| 1 |
- {"remainingRequest":"D:\\GERENWENJIAN\\code\\qv\\vue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\GERENWENJIAN\\code\\qv\\vue\\src\\views\\situation\\index.vue?vue&type=style&index=0&id=447539d7&scoped=true&lang=css&","dependencies":[{"path":"D:\\GERENWENJIAN\\code\\qv\\vue\\src\\views\\situation\\index.vue","mtime":1683195856997},{"path":"D:\\GERENWENJIAN\\code\\qv\\vue\\node_modules\\css-loader\\dist\\cjs.js","mtime":1683195235159},{"path":"D:\\GERENWENJIAN\\code\\qv\\vue\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1683195239228},{"path":"D:\\GERENWENJIAN\\code\\qv\\vue\\node_modules\\postcss-loader\\src\\index.js","mtime":1683195236737},{"path":"D:\\GERENWENJIAN\\code\\qv\\vue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1683195233343},{"path":"D:\\GERENWENJIAN\\code\\qv\\vue\\node_modules\\vue-loader\\lib\\index.js","mtime":1683195237816}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQoubW9kZWx7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgdG9wOiAyMHB4Ow0KICBsZWZ0OiAyMHB4Ow0KICB6LWluZGV4OiA5OTk7DQp9DQouYm94LWNhcmR7DQogIG1pbi1oZWlnaHQ6IDEwMCU7DQogIGhlaWdodDogMTAwJTsNCn0NCi9kZWVwLyAuZWwtY2FyZF9fYm9keXsNCiAgaGVpZ2h0OiAxMDAlICFpbXBvcnRhbnQ7DQogIHBhZGRpbmc6IDBweCAhaW1wb3J0YW50Ow0KfQ0KDQouZWNoYXJ0cy1ib3h7DQogIGhlaWdodDogMTAwJTsNCiAgd2lkdGg6IDEwMCU7DQogIGJhY2tncm91bmQtaW1hZ2U6IHVybCgnfkAvYXNzZXRzL2ltYWdlL21hcC1iZy5wbmcnKTsNCiAgYmFja2dyb3VuZC1yZXBlYXQ6IG5vLXJlcGVhdDsNCiAgYmFja2dyb3VuZC1zaXplOjEwMCUgMTAwJTsNCn0NCi5jb250YWluZXJ7DQogIGhlaWdodDogMTAwJTsNCn0NCi5tYXBlY2hhcnRzew0KICB3aWR0aDogMTAwJTsNCiAgaGVpZ2h0OiAxMDAlOw0KfQ0KLnRhYmxlSGVpZ2h0ew0KICBmbGV4LWdyb3c6IDE7DQogIGhlaWdodDogMzMlOw0KfQ0KLnRhYmxlSGVpZ2h0IC9kZWVwLyAuZWwtY2FyZF9fYm9keXsNCiAgaGVpZ2h0OiBjYWxjKDEwMCUgLSA5NXB4KSAhaW1wb3J0YW50Ow0KICANCn0NCg=="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";AAoVA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA","file":"index.vue","sourceRoot":"src/views/situation","sourcesContent":["<template>\r\n <div class=\"container\">\r\n <el-row :gutter=\"10\" style=\"height:100%;\">\r\n\r\n <el-col style=\"height:100%;position: relative;\" :span=\"24\">\r\n <el-radio-group class=\"model\" v-model=\"pattern\" label=\"size control\" size=\"small\">\r\n <el-radio-button label=\"two-dimensional\" @click=\"echartsChange()\">二维态势</el-radio-button>\r\n <el-radio-button label=\"three-dimensional\" @click=\"echartsChange()\">三维态势</el-radio-button>\r\n </el-radio-group>\r\n <div class=\"echarts-box\">\r\n <div id=\"mapEchart\" class=\"mapecharts\"></div>\r\n </div> \r\n </el-col>\r\n </el-row>\r\n </div>\r\n \r\n</template>\r\n <script>\r\n import { mapGetters } from 'vuex'\r\nexport default({\r\n computed: {\r\n ...mapGetters([\r\n 'map',\r\n 'init',\r\n 'platforms',\r\n 'instances',\r\n 'properties',\r\n 'platformShow'\r\n ]),\r\n },\r\n watch: {\r\n init: {\r\n handler: function(val, oldVal){\r\n console.log(val)\r\n this.setTimer();\r\n }\r\n },\r\n platforms: {\r\n handler: function(val, oldVal){\r\n \r\n }\r\n },\r\n instances: {\r\n handler: function(val, oldVal){\r\n\r\n this.instancetable = val \r\n }\r\n },\r\n platformID: {\r\n handler: function(val, oldVal){\r\n this.$wst.send({\r\n url:'getRadarInstances',\r\n data:{PlatformID: val}\r\n })\r\n\r\n }\r\n },\r\n properties: {\r\n handler: function(val,oldVal){\r\n this.propertyinittable = val.InitParams\r\n this.propertycontroltable = val.CtrlParams\r\n }\r\n },\r\n platformShow: {\r\n handler: function(val,oldVal){\r\n this.resizeDom()\r\n }\r\n }\r\n },\r\n data() {\r\n return {\r\n pattern:\"two-dimensional\",\r\n instancetable: null,\r\n propertyinittable: null,\r\n propertycontroltable: null, \r\n timer: null,\r\n mapEchart: null,\r\n mapOption: {\r\n aria: {\r\n show: true\r\n },\r\n tooltip: {\r\n formatter: '{a}&name:{b}&location:{c}', \r\n },\r\n legend: {\r\n orient: 'vertical',\r\n left: 'left',\r\n data:['categoryA','categoryB','categoryC']\r\n },\r\n geo: {\r\n map: \"china\",\r\n // zoom: 1,\r\n // center: [120.397128, 25.916527],\r\n roam: true,\r\n scaleLimit:{\r\n min: 1,\r\n max: 20\r\n },\r\n label: {\r\n color: \"#fff\",\r\n show: true\r\n },\r\n emphasis: {\r\n label: {\r\n color: \"#fff\",\r\n show: true\r\n },\r\n itemStyle: {\r\n areaColor: {\r\n x: 0,\r\n y: 0,\r\n x2: 0,\r\n y2: 1,\r\n colorStops: [\r\n {\r\n offset: 0,\r\n color: \"#073684\" // 0% 处的颜色\r\n },\r\n {\r\n offset: 1,\r\n color: \"#2B91B7\" // 100% 处的颜色\r\n }\r\n ]\r\n }\r\n }\r\n },\r\n itemStyle: {\r\n areaColor: {\r\n x: 0,\r\n y: 0,\r\n x2: 0,\r\n y2: 1,\r\n colorStops: [\r\n {\r\n offset: 0,\r\n color: \"#073684\" // 0% 处的颜色\r\n },\r\n {\r\n offset: 1,\r\n color: \"#061E3D\" // 100% 处的颜色\r\n }\r\n ]\r\n },\r\n borderColor: \"#87ADCB\",\r\n shadowColor: \"rgba(10,76,139,1)\",\r\n shadowOffsetY: 0,\r\n shadowBlur: 60,\r\n borderWidth: 1\r\n },\r\n tooltip: {\r\n show: false\r\n }\r\n },\r\n\r\n series : [\r\n {\r\n name: '我方飞机',\r\n type: 'scatter',\r\n coordinateSystem: 'geo',\r\n symbol: 'image://'+ require('@/assets/image/redairplane.png'),\r\n symbolSize: 20,\r\n data: null,\r\n label: {\r\n normal: {\r\n formatter: '{b}',\r\n position: 'right',\r\n show: false\r\n },\r\n emphasis: {\r\n show: true\r\n }\r\n },\r\n itemStyle: {\r\n normal: {\r\n color: '#ddb926'\r\n //color: '#0000ff'\r\n }\r\n }\r\n },\r\n {\r\n name: '我方dddd',\r\n type: 'scatter',\r\n coordinateSystem: 'geo',\r\n symbol: 'image://'+ require('@/assets/image/redmissile.png'),\r\n symbolSize: 20,\r\n data: null,\r\n label: {\r\n normal: {\r\n formatter: '{b}',\r\n position: 'right',\r\n show: false\r\n },\r\n emphasis: {\r\n show: true\r\n }\r\n },\r\n itemStyle: {\r\n normal: {\r\n color: '#ddb926'\r\n //color: '#0000ff'\r\n }\r\n }\r\n },\r\n {\r\n name: '敌方',\r\n type: 'scatter',\r\n coordinateSystem: 'geo',\r\n symbol: 'image://'+ require('@/assets/image/blueradar.png'),\r\n symbolSize: 20,\r\n data: null,\r\n label: {\r\n normal: {\r\n formatter: '{b}',\r\n position: 'right',\r\n show: false\r\n },\r\n emphasis: {\r\n show: true\r\n }\r\n },\r\n itemStyle: {\r\n normal: {\r\n color: '#ff0000'\r\n }\r\n }\r\n },\r\n \r\n \r\n ]\r\n }\r\n\r\n\r\n\r\n }\r\n \r\n },\r\n mounted(){\r\n this.echartsInit();\r\n // 页面加载设置高度自适应\r\n window.onresize = () => {\r\n \r\n this.resizeDom()\r\n };\r\n // 页面加载设置高度自适应\r\n this.resizeDom()\r\n if(this.init == 100){\r\n this.setTimer();\r\n }\r\n\r\n },\r\n beforeDestroy() {\r\n this.timerDestory()\r\n },\r\n methods: {\r\n setTimer() {\r\n if(this.timer == null) {\r\n this.timer = setInterval( () => {\r\n console.log('开始定时...每过一秒执行一次')\r\n this.echartsInit()\r\n }, 1000)\r\n }\r\n },\r\n //初始化echarts\r\n echartsInit() {\r\n \r\n if(this.init == 100){ this.$wst.send({url:'getLocalMap'})}\r\n if(this.map != null && this.map.type=='local'){ this.submitForm('mapEchart')}\r\n if(this.mapEchart == null){\r\n this.mapEchart = this.$echarts.init(document.getElementById('mapEchart'))\r\n }\r\n this.mapEchart.setOption(this.mapOption);\r\n this.resizeDom()\r\n \r\n },\r\n //通过窗体高宽计算容器高宽，渲染echart图表的div的宽高度以达到自适应目的\r\n resizeDom() {\r\n console.log(\"高度自适应\")\r\n this.$echarts.init(document.getElementById('mapEchart')).resize()\r\n // var mapEchart = document.getElementById('mapEchart')\r\n // var mapEchart = document.getElementById('mapEchart')\r\n // var mapEchart = document.getElementById('mapEchart')\r\n // var mapEchart = document.getElementById('mapEchart')\r\n // const boxHeight = document.getElementsByClassName(\"echarts-box\")[0].clientHeight\r\n // mapEchart.style.height = (boxHeight/2-65)+'px';\r\n // mapEchart.style.height = (boxHeight/2-65)+'px';\r\n // mapEchart.style.height = (boxHeight/2-65)+'px';\r\n // mapEchart.style.height = (boxHeight/2-65)+'px';\r\n },\r\n echartsChange(){\r\n this.timerDestory()\r\n this.echartsInit();\r\n this.setTimer();\r\n },\r\n timerDestory(){\r\n if (this.timer) {\r\n clearInterval(this.timer);\r\n }\r\n },\r\n submitForm(map) {\r\n console.log(\"放入数据\")\r\n this.mapOption.series[0].data = this.map.data.friend.Planes;\r\n this.mapOption.series[1].data = this.map.data.friend.Missiles;\r\n this.mapOption.series[2].data = this.map.data.enemy.Radars; \r\n this.$echarts.init(document.getElementById(map)).setOption(this.mapOption);\r\n console.log(this.mapOption);\r\n },\r\n instanceChange(val) {\r\n \r\n if(val.instanceName.includes(\"信号侦察\")){\r\n this.$wst.send({\r\n url:'getESMParams',\r\n data:{InstanceID: val.instanceID}\r\n })\r\n }else\r\n if(val.instanceName.includes(\"导航\")) {\r\n this.$wst.send({\r\n url:'getNavParams',\r\n data:{InstanceID: val.instanceID}\r\n })\r\n\r\n }else\r\n if(val.instanceName.includes(\"雷达\")) {\r\n this.$wst.send({\r\n url:'getRadarParams',\r\n data:{InstanceID: val.instanceID}\r\n })\r\n\r\n }else\r\n if(val.instanceName.includes(\"电子攻击\")) {\r\n this.$wst.send({\r\n url:'getECMParams',\r\n data:{InstanceID: val.instanceID}\r\n })\r\n }\r\n \r\n }\r\n },\r\n })\r\n </script>\r\n<style scoped>\r\n.model{\r\n position: absolute;\r\n top: 20px;\r\n left: 20px;\r\n z-index: 999;\r\n}\r\n.box-card{\r\n min-height: 100%;\r\n height: 100%;\r\n}\r\n/deep/ .el-card__body{\r\n height: 100% !important;\r\n padding: 0px !important;\r\n}\r\n\r\n.echarts-box{\r\n height: 100%;\r\n width: 100%;\r\n background-image: url('~@/assets/image/map-bg.png');\r\n background-repeat: no-repeat;\r\n background-size:100% 100%;\r\n}\r\n.container{\r\n height: 100%;\r\n}\r\n.mapecharts{\r\n width: 100%;\r\n height: 100%;\r\n}\r\n.tableHeight{\r\n flex-grow: 1;\r\n height: 33%;\r\n}\r\n.tableHeight /deep/ .el-card__body{\r\n height: calc(100% - 95px) !important;\r\n \r\n}\r\n</style> "]}]}
|
