123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458 |
- var _this, screenWidth, timeId;
- var map, geoCoder;
- var myChart1, myChart2, myChart3, myChart4, myChart5, myChart6;
- new Vue({
- el: '#app',
- data: function() {
- return {
- imgHei: 0,
- gutter: 5,
- fontS: 128,
- echTxt: 0,
- shipLi: [],
- tabDiv: 39,
- nowTab: {},
- addRess: "",
- vidWid: 80,
- tabInd: 0,
- selVis: false,
- shipCount: [{name: "船舶总数",count: 0,icon: "../img/shipnum.png"},
- {name: "在航船舶",count: 0,icon: "../img/online.png"},
- {name: "停航船舶",count: 0,icon: "../img/offline.png"}
- ],
- shipPeol: [{name: "在船人数",count: 297,col:"#51a3f4"},
- {name: "预警人数",count: 7,col:"#fbbd08"},
- {name: "超载人数",count: 10,col:"#fa0000"}],
- caremLi: [{
- alive: 1,
- cameraid: "001",
- name: "驾驶室",
- },{
- alive: 1,
- cameraid: "002",
- name: "机舱",
- },{
- alive: 0,
- cameraid: "003",
- name: "左舷",
- },{
- alive: 1,
- cameraid: "004",
- name: "右舷",
- }],
- carmAct: {},
- switLi: []
- }
- },
- created() {
- _this = this;
- _this.switLi = shipSwit;
- _this.carmAct = _this.caremLi[0];
- _this.init(0);
- timeId = setInterval(()=>{
- _this.init(1);
- },60*1000)
- },
-
- mounted() {
- map = new AMap.Map("areaMap", {
- center: [116.433322, 39.900256],
- layers: [new AMap.TileLayer.Satellite()],
- zoom: 14
- });
- map.addControl(new AMap.Scale({
- visible: true
- }));
- geoCoder = new AMap.Geocoder({
- radius: 1000
- });
- let screenWidth = 1920;
- // let screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body
- // .clientWidth;
- _this.gutter = Math.ceil(screenWidth / 320);
- _this.fontS = (screenWidth / 1440) * 16;
- _this.vidWid = _this.gutter*14;
- this.$nextTick(() => {
- myChart1 = echarts.init(document.getElementById("myChart1"));
- myChart2 = echarts.init(document.getElementById("myChart2"));
- myChart3 = echarts.init(document.getElementById("myChart3"));
- myChart4 = echarts.init(document.getElementById("myChart4"));
- myChart5 = echarts.init(document.getElementById("myChart5"));
- let el = document.getElementsByClassName("el-slider__runway");
- for(let i=0;i<el.length;i++){
- el[i].style.margin = (_this.gutter*0.53)+"px 0";
- el[i].style.height = (_this.gutter*1.7)+"px";
- }
- let els = document.getElementsByClassName("el-slider__bar");
- for(let i=0;i<els.length;i++){
- els[i].style.height = (_this.gutter*1.7)+"px";
- }
- // myChart2.resize({height:(_this.gutter*21.6)+"px"});
- // myChart3.resize({height:(_this.gutter*21.6)+"px"});
- _this.tabDiv = _this.$refs.titleDiv.offsetHeight;
- _this.echTxt = _this.$refs.chartxt.offsetHeight;
- // let _ech = _this.$refs.charts.offsetHeight;
- // myChart1.resize({height: _ech*0.71+"px"});
- })
- window.onresize = () => {
- _this.imgLoad();
- myChart1.resize();
- myChart2.resize();
- myChart3.resize();
- myChart4.resize();
- myChart5.resize();
- }
- },
- destroyed(){
- clearInterval(timeId);
- },
- methods: {
- init(num) {
- let loading = null;
- if(num == 0){
- loading = this.$loading({
- background: 'rgba(0, 0, 0, 0.4)'
- })
- }
- $.ajax({
- url: "http://121.37.6.200:8088/SelHswsSn?user_id=109",
- type: "GET",
- traditional: true,
- dataType: "json",
- async: false,
- data: {
- "euser_idnc": 109
- },
- headers:{
- "Authorization":"Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjVlNTcxMWNiLTI2YmEtNDAyYy1hZTAxLTU5YTAzMmIyNTU2MiJ9.dS_d4Z0XlIYSO0ji_Fu9DajYYCzf-Ja2XQNQlKFQX8_ket4HT4J3Ffzj1MlsjDtLdzFSw9KzED3rJZKqBHeo4g"
- },
- error: function() { },
- success: function(res) {
- if(res.code == 200){
- let _obj = res.data, _arr = [], _onl = 0;
- for(let i=0;i<_obj.length;i++){
- let item = _obj[i];
- if(item.dev_ver == 2){
- let _onli = item.online == undefined ?{lon:0,lat:0,speed:0,time:1639449590}:item.online;
- let _gps = wgsGcj(_onli.lat, _onli.lon);
- let _neol = _this.changeTime((_onli.time+"")>10?parseInt(_onli.time):parseInt(_onli.time)*1000);
- item.lat = _gps.lat;
- item.lon = _gps.lon;
- item.sog = _onli.speed.toFixed(1);
- item.position = [_gps.lon, _gps.lat];
- item.prod = item.dev_name;
- item.icon = "../img/ship.png",
- item.status = _neol == 1?'在航(主机推动)':'停航';
- item.mmsi = item.sn;
- item.hdg = 0.0;
- item.cog = 0.0;
- item.draught = 0.0;
- item.speed = _onli.speed.toFixed(2);
- if(_neol == 1){
- _onl += 1;
- }
- _arr.push(item);
- }
- }
- let _sn = _this.nowTab.mmsi;
- if (_sn != undefined) {
- let _ind = _arr.findIndex((i, ind) => {
- return i.mmsi == _sn
- });
- if (_ind != -1) {
- _sn = _arr[_ind];
- } else {
- _sn = _arr[0];
- }
- } else {
- _sn = _arr[0];
- }
- _this.shipLi = _arr;
- _this.nowTab = _sn;
- _this.shipCount[0].count = _this.shipLi.length;
- _this.shipCount[1].count = _this.shipLi.length;
- _this.setMap(_this.shipLi);
- }
- if(num == 0){loading.close();}
- }
- })
-
- },
- changeTime(time) {
- let date3 = new Date().getTime() - (parseInt(time));
- let str = 1;
- if (date3 > (5 * 60 * 1000)) {
- str = 0;
- }
- return str;
- },
- setEchart() {
- this.$nextTick(() => {
- myChart1.setOption(_this.setOption1([100, 140, 125, 160, 130, 145, 128],['2016', '2017', '2018', '2019', '2020', '2021', '2022']));
- myChart2.setOption(_this.setOption2([25, 28, 10, 17, 20],["在航", "故障", "维修", "靠泊", "锚泊"]));
- myChart3.setOption(_this.setOption2([25, 28, 10, 17, 20],[">20年", "15-20年", "10-15年", "5-10年", "<5年"]));
- myChart4.setOption(_this.setOption1([100, 140, 125, 160, 130, 145, 128],['2022-08-12', '2022-08-13', '2022-08-14', '2022-08-15', '2022-08-16', '2022-08-17', '2022-08-18']));
- myChart5.setOption(_this.setOption2([25, 28, 10, 17, 20],["疲惫", "分神", "离岗", "抽烟", "电话"],1));
- myChart1.resize();
- myChart2.resize();
- myChart3.resize();
- myChart4.resize();
- })
- },
- setMap(_obj) {
- this.$nextTick(() => {
- map.clearMap();
- _obj.forEach(function(_obj) {
- var marker = new AMap.Marker({
- map: map,
- icon: new AMap.Icon({
- size: new AMap.Size(_this.gutter * 12, _this.gutter * 12),
- image: _obj.icon,
- imageSize: new AMap.Size(_this.gutter * 12, _this.gutter * 12),
- rotation: Number(152) * (Math.PI / 180)
- }),
- position: _obj.position,
- offset: new AMap.Pixel(-13, -30),
- extData: _obj.mmsi
- });
- marker.setLabel({
- offset: new AMap.Pixel(0, 0),
- content: "<div style='color:#000;font-size:" + (_this.fontS*0.5) + "px'>" +
- _obj.prod + "</div>",
- direction: 'bottom'
- });
- marker.on('click', markerClick);
- });
- _this.openInfo(_this.nowTab.mmsi);
- function markerClick(e) {
- let _ind = e.target.getExtData();
- _this.openInfo(_ind);
- }
- })
- },
- openInfo(_sn) {
- let _cmk = _this.shipLi;
- for (var i = 0; i < _cmk.length; i++) {
- if (_sn == _cmk[i].mmsi) {
- var _str = _cmk[i];
- _str.lon = _str.position[0];
- _str.lat = _str.position[1];
- _this.nowTab = _str;
- var info = [];
- geoCoder.getAddress(_str.position, function(status, result) {
- if (status === 'complete' && result.regeocode) {
- var address = result.regeocode.formattedAddress;
- _this.addRess = address;
- } else {
- _this.addRess = '获取位置失败';
- }
- map.setCenter(_str.position);
- return;
- });
- _this.setEchart();
- }
- }
- },
- imgLoad() {
- var _Img = document.getElementById('headImg');
- this.$nextTick(() => {
- _this.imgHei = _Img.clientHeight
- })
- let screenWidth = 1920;
- // let screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body
- // .clientWidth;
- _this.gutter = Math.ceil(screenWidth / 320);
- _this.fontS = (screenWidth / 1440) * 16;
- },
- changeSn(key) {
- let _ind = _this.shipLi.findIndex((i, ind) => {
- return i.mmsi == key
- });
- if (_ind != -1) {
- _sn = _this.shipLi[_ind];
- } else {
- _sn = _this.shipLi[0];
- }
- _this.selVis = false;
- _this.nowTab = _sn;
- _this.setEchart();
- _this.openInfo(_this.nowTab.mmsi);
- },
- setOption1(_arr,_data) {
- option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- label: {
- backgroundColor: '#6a7985'
- }
- }
- },
- grid: {
- top: '10%',
- left: '1%',
- right: '2%',
- bottom: '2%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- boundaryGap: true,
- splitLine: {
- show: true,
- lineStyle: {
- color: '#29437c'
- }
- },
- axisLabel: {
- textStyle: {
- color: '#fff',
- fontSize: ((_this.fontS > 16) ? (_this.fontS * 0.6) : 10) + ''
- },
- showMaxLabel: true
- },
- data: _data
- },
- yAxis: {
- type: 'value',
- axisLabel: {
- textStyle: {
- fontSize: ((_this.fontS > 16) ? (_this.fontS * 0.6) : 10) + ''
- },
- showMaxLabel: true
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: ['#5f6ee1']
- }
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: ['#29437c']
- }
- }
- },
- series: [{
- data: _arr,
- type: 'line',
- label: {
- show: true,
- position: 'top',
- fontSize: ((_this.fontS > 16) ? (_this.fontS * 0.6) : 10) + ''
- },
- itemStyle: {
- normal: {
- color: '#5f6ee1', //改变折线点的颜色
- lineStyle: {
- color: '#5f6ee1' //改变折线颜色
- }
- }
- }
- }]
- };
- return option;
- },
- setOption2(Num,Name,who) {
- let _serir = {
- name: '实时数据统计',
- type: 'pie',
- center: ['45%', '50%'],
- radius: ['50%', '60%'],
- avoidLabelOverlap: false,
- label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: ((_this.fontS > 16) ? (_this.fontS * 0.4) : 10) + '',
- fontWeight: 'bold'
- }
- },
- itemStyle: {
- normal: {
- borderRadius: 10,
- borderColor: '#323740',
- borderWidth: 2,
- label: {
- show: true,
- formatter: '{d}%',
- fontSize: ((_this.fontS > 16) ? (_this.fontS * 0.4) : 10) + '',
- color: "#fff"
- },
- labelLine: {
- show: true
- }
- }
- },
- labelLine: {
- show: true
- },
- data: [{
- value: Num[0],
- name: Name[0]
- },{
- value: Num[1],
- name: Name[1]
- },{
- value: Num[2],
- name: Name[2]
- },{
- value: Num[3],
- name: Name[3]
- },{
- value: Num[4],
- name: Name[4]
- },{
- value: Num[5],
- name: Name[5]
- }]
- };
- if(who == 1) delete _serir["radius"];
- option = {
- tooltip: {
- trigger: 'item',
- formatter: '{a} <br/>{b}: {c} ({d}%)'
- },
- legend: {
- show: true,
- itemWidth: ((_this.fontS > 16) ? (_this.gutter * 0.9) : 10) ,
- itemHeight: ((_this.fontS > 16) ? (_this.gutter * 0.9) : 10),
- right: '3%',
- y: "center",
- itemGap: _this.gutter,
- orient: 'vertical',
- data:Name,
- textStyle: {
- color: "#fff",
- fontSize: ((_this.fontS > 16) ? (_this.fontS * 0.4) : 10) + '',
- }
- },
- color: ['#4f6dcd', '#fad972', '#f88582', '#3ae3bc', '#9299f3'],
- series: [_serir]
- };
- return option;
- },
- changeShow(){
- _this.vidWid = (_this.vidWid>0?0:_this.gutter*14);
- },
- changCarm(key){
- let _ind = _this.caremLi.findIndex((item,index)=>{
- return key == item.cameraid;
- });
- _this.carmAct = _this.caremLi[_ind];
- if(_this.carmAct.alive == 0){
- _this.$message({
- showClose: true,
- message: '设备离线中!!!',
- type: 'warning'
- });
- }
- }
- }
- })
|