123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566 |
- var _this, screenWidth, timeId;
- var map, geoCoder;
- var myChart1, myChart2, myChart3, myChart4, myChart5, myChart6, myChart70, myChart71, myChart80, myChart81,
- myChart90, myChart91, myChart92, myChart00, myChart01, myChart02;
- new Vue({
- el: '#app',
- data: function() {
- return {
- imgHei: 0,
- gutter: 5,
- fontS: 16,
- tabBar: 0,
- tabBh: 0,
- echTxt: 0,
- shipLi: [],
- tabDiv: 39,
- nowTab: {},
- addRess: "",
- 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"}],
- switLi: []
- }
- },
- created() {
- _this = this;
- _this.switLi = shipSwit;
- _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 = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
- let screenWidth = 1920;
- _this.gutter = Math.ceil(screenWidth / 320);
- _this.fontS = (screenWidth / 1440) * 16;
- 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"));
- myChart6 = echarts.init(document.getElementById("myChart6"));
- myChart70 = echarts.init(document.getElementById("myChart70"));
- myChart80 = echarts.init(document.getElementById("myChart80"));
- myChart71 = echarts.init(document.getElementById("myChart71"));
- myChart81 = echarts.init(document.getElementById("myChart81"));
- myChart90 = echarts.init(document.getElementById("myChart90"));
- myChart91 = echarts.init(document.getElementById("myChart91"));
- myChart00 = echarts.init(document.getElementById("myChart00"));
- myChart01 = echarts.init(document.getElementById("myChart01"));
- 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*30)+"px"});
- myChart3.resize({height:(_this.gutter*30)+"px"});
- _this.tabDiv = _this.$refs.titleDiv.offsetHeight;
- _this.tabBh = _this.$refs.tabbar.offsetHeight;
- _this.echTxt = _this.$refs.chartxt.offsetHeight;
- let _ech = _this.$refs.charts.offsetHeight;
- myChart1.resize({height: _ech*0.84+"px"});
- })
- window.onresize = () => {
- _this.imgLoad();
- }
- },
- destroyed(){
- clearInterval(timeId);
- },
- methods: {
- init(num) {
- let loading = null;
- if(num == 0){
- loading = this.$loading({
- background: 'rgba(0, 0, 0, 0.4)'
- })
- }
- getList(function acb(_obj, _online){
- let _sn = _this.nowTab.mmsi;
- if (_sn != undefined) {
- let _ind = _obj.findIndex((i, ind) => {
- return i.mmsi == _sn
- });
- if (_ind != -1) {
- _sn = _obj[_ind];
- } else {
- _sn = _obj[0];
- }
- } else {
- _sn = _obj[0];
- }
- _this.shipLi = _obj;
- _this.nowTab = _sn;
- _this.shipCount[0].count = _this.shipLi.length;
- _this.shipCount[1].count = _online;
- _this.shipCount[2].count = parseInt(_this.shipLi.length) - _online;
- _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]));
- 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.setOption3(_this.nowTab.speed, 20));
- myChart5.setOption(_this.setOption4(0.0));
- myChart6.setOption(_this.setOption4(0.0));
- myChart70.setOption(_this.setOption3(10, 3000));
- myChart80.setOption(_this.setOption3(10, 1500));
- myChart71.setOption(_this.setOption3(10, 3000));
- myChart81.setOption(_this.setOption3(10, 1500));
- myChart90.setOption(_this.setOption3(10, 3000));
- myChart00.setOption(_this.setOption3(10, 1500));
- myChart01.setOption(_this.setOption3(10, 3000));
- myChart91.setOption(_this.setOption3(10, 1500));
- // myChart02.setOption(_this.setOption3(10, 3000));
- // myChart92.setOption(_this.setOption3(10, 1500));
- // myChart92.setOption(_this.setOption3(10, 3000));
- // myChart02.setOption(_this.setOption3(10, 1500));
- myChart1.resize();
- myChart2.resize();
- myChart3.resize();
- myChart4.resize();
- myChart5.resize();
- myChart6.resize();
- myChart70.resize();
- myChart80.resize();
- myChart81.resize();
- myChart71.resize();
- myChart90.resize();
- myChart91.resize();
- // myChart92.resize();
- myChart00.resize();
- myChart01.resize();
- // myChart02.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];
- _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 = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
- let screenWidth = 1920;
- _this.gutter = Math.ceil(screenWidth / 320);
- _this.fontS = (screenWidth / 1440) * 16;
- },
- changeTab(ind) {
- _this.tabBar = ind;
- _this.setEchart();
- },
- 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) {
- 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: ['2016', '2017', '2018', '2019', '2020', '2021', '2022']
- },
- 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) {
- option = {
- tooltip: {
- trigger: 'item',
- formatter: '{a} <br/>{b}: {c} ({d}%)'
- },
- legend: {
- show: true,
- itemWidth: ((_this.fontS > 16) ? (_this.gutter * 0.8) : 10) ,
- itemHeight: ((_this.fontS > 16) ? (_this.gutter * 0.8) : 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: [{
- 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]
- }
- ]
- }]
- };
- return option;
- },
- setOption3(num, max) {
- option = {
- series: [{
- name: '实时数据',
- min: 0,
- max: max,
- splitNumber: 10,
- type: 'gauge',
- center: ['50%', '50%'],
- radius: '80%',
- detail: {
- show: false,
- },
- data: [{
- value: num
- }],
- axisLine: {
- lineStyle: {
- color: [
- [0.09, 'lime'],
- [0.82, '#1e90ff'],
- [1, '#ff4500']
- ],
- width: ((_this.fontS > 16) ? (_this.gutter * 0.7) : 5) + ''
- }
- },
- axisTick: {
- distance: ((_this.fontS > 16) ? (_this.gutter * 0.7) : 5),
- length: _this.gutter * 0.8,
- },
- pointer: {
- width: ((_this.fontS > 16) ? (_this.gutter * 0.7) : 5),
- length: "60%",
- },
- splitLine: {
- distance: ((_this.fontS > 16) ? (_this.gutter * 0.7) : 5),
- length: ((_this.fontS > 16) ? _this.gutter : 6),
- lineStyle: {
- width: ((_this.fontS > 16) ? (_this.gutter * 0.2) : 2),
- color: '#fff',
- }
- },
- axisLabel: {
- textStyle: {
- color: '#fff',
- fontSize: ((_this.fontS > 16) ? (max == 20?_this.fontS * 0.6:_this.fontS * 0.2) : 10) + '',
- },
- distance: _this.gutter*0.5
- },
- title: {
- textStyle: {
- color: '#fff',
- }
- },
- }]
- };
- return option;
- },
- setOption4(num) {
- option = {
- series: [{
- name: '实时数据',
- min: 0,
- max: 360,
- splitNumber: 12,
- type: 'gauge',
- fontSize: 0,
- center: ['50%', '50%'],
- radius: '80%',
- startAngle: 90,
- endAngle: -269.999999,
- detail: {
- show: false
- },
- axisTick: {
- distance: ((_this.fontS > 16) ? (_this.gutter * 0.7) : 5),
- length: _this.gutter * 0.8,
- },
- data: [{
- value: num
- }],
- axisLine: {
- lineStyle: {
- color: [
- [1, '#1e90ff']
- ],
- width: ((_this.fontS > 16) ? (_this.gutter * 0.7) : 5) + ''
- },
- },
- axisLabel: {
- textStyle: {
- color: '#fff',
- fontSize: ((_this.fontS > 16) ? (_this.fontS * 0.5) : 10) + '',
- },
- distance: _this.gutter,
- formatter: function(e) {
- switch (e + "") {
- case "0":
- return "0";
- case "30":
- return "30";
- case "60":
- return "60";
- case "90":
- return "90";
- case "120":
- return "120";
- case "150":
- return "150";
- case "180":
- return "180";
- case "210":
- return "210";
- case "240":
- return "240";
- case "270":
- return "270";
- case "300":
- return "300";
- case "330":
- return "330";
- default:
- return "";
- }
- }
- },
- pointer: {
- width: ((_this.fontS > 16) ? (_this.gutter * 0.7) : 5),
- length: "60%",
- },
- splitLine: {
- distance: ((_this.fontS > 16) ? (_this.gutter * 0.5) : 5),
- length: ((_this.fontS > 16) ? _this.gutter : 6),
- lineStyle: {
- width: ((_this.fontS > 16) ? (_this.gutter * 0.2) : 2),
- color: '#fff',
- }
- },
- title: {
- textStyle: {
- color: '#fff',
- }
- },
- }]
- };
- return option;
- }
- }
- })
|