视频融合测试；系统名称图标配置调整；图层名称调整；激光云台弹窗增加云台操作

public/VideoTest/VideoTest.gltf

@@ -0,0 +1 @@
+{"asset":{"version":"2.0","generator":"babylon.js glTF exporter for 3dsmax 2022 v20220923.2"},"scene":0,"scenes":[{"nodes":[0]}],"nodes":[{"mesh":0,"translation":[-25.85311,0.0,3.15426731],"name":"Box001"}],"meshes":[{"primitives":[{"attributes":{"POSITION":1,"NORMAL":2,"COLOR_0":3,"TEXCOORD_0":4},"indices":0,"material":0}],"name":"Box001"}],"accessors":[{"bufferView":0,"componentType":5123,"count":36,"type":"SCALAR","name":"accessorIndices"},{"bufferView":1,"componentType":5126,"count":24,"max":[18.8048534,1.0,26.8609276],"min":[-18.8048534,0.0,-26.8609276],"type":"VEC3","name":"accessorPositions"},{"bufferView":1,"byteOffset":288,"componentType":5126,"count":24,"type":"VEC3","name":"accessorNormals"},{"bufferView":2,"componentType":5126,"count":24,"type":"VEC4","name":"accessorColors"},{"bufferView":3,"componentType":5126,"count":24,"type":"VEC2","name":"accessorUVs"}],"bufferViews":[{"buffer":0,"byteLength":72,"name":"bufferViewScalar"},{"buffer":0,"byteOffset":72,"byteLength":576,"byteStride":12,"name":"bufferViewFloatVec3"},{"buffer":0,"byteOffset":648,"byteLength":384,"byteStride":16,"name":"bufferViewFloatVec4"},{"buffer":0,"byteOffset":1032,"byteLength":192,"byteStride":8,"name":"bufferViewFloatVec2"}],"buffers":[{"uri":"VideoTest.bin","byteLength":1224}],"materials":[{"pbrMetallicRoughness":{"baseColorTexture":{"index":0},"metallicFactor":0.0,"roughnessFactor":0.0},"doubleSided":true,"name":"Material #25","extras":{"babylonSeparateCullingPass":false}}],"textures":[{"sampler":0,"source":0,"name":"Vtest.png"}],"images":[{"uri":"Vtest.png"}],"samplers":[{"magFilter":9729,"minFilter":9987}]}

public/index.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-  <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+  <link rel="icon" href="static/setting/favicon.ico" />
   <script src="js/config.js?"></script>
   <script src="js/layers.js?"></script>
   <script src="js/layerconfig.js?"></script>

public/insidemodels/VideoTest.gltf

@@ -0,0 +1 @@
+{"asset":{"version":"2.0","generator":"babylon.js glTF exporter for 3dsmax 2022 v20220923.2"},"scene":0,"scenes":[{"nodes":[0]}],"nodes":[{"mesh":0,"translation":[-25.85311,0.0,3.15426731],"name":"Box001"}],"meshes":[{"primitives":[{"attributes":{"POSITION":1,"NORMAL":2,"COLOR_0":3,"TEXCOORD_0":4},"indices":0,"material":0}],"name":"Box001"}],"accessors":[{"bufferView":0,"componentType":5123,"count":36,"type":"SCALAR","name":"accessorIndices"},{"bufferView":1,"componentType":5126,"count":24,"max":[18.8048534,1.0,26.8609276],"min":[-18.8048534,0.0,-26.8609276],"type":"VEC3","name":"accessorPositions"},{"bufferView":1,"byteOffset":288,"componentType":5126,"count":24,"type":"VEC3","name":"accessorNormals"},{"bufferView":2,"componentType":5126,"count":24,"type":"VEC4","name":"accessorColors"},{"bufferView":3,"componentType":5126,"count":24,"type":"VEC2","name":"accessorUVs"}],"bufferViews":[{"buffer":0,"byteLength":72,"name":"bufferViewScalar"},{"buffer":0,"byteOffset":72,"byteLength":576,"byteStride":12,"name":"bufferViewFloatVec3"},{"buffer":0,"byteOffset":648,"byteLength":384,"byteStride":16,"name":"bufferViewFloatVec4"},{"buffer":0,"byteOffset":1032,"byteLength":192,"byteStride":8,"name":"bufferViewFloatVec2"}],"buffers":[{"uri":"VideoTest.bin","byteLength":1224}],"materials":[{"pbrMetallicRoughness":{"baseColorTexture":{"index":0},"metallicFactor":0.0,"roughnessFactor":0.0},"doubleSided":true,"name":"Material #25","extras":{"babylonSeparateCullingPass":false}}],"textures":[{"sampler":0,"source":0,"name":"Vtest.png"}],"images":[{"uri":"Vtest.png"}],"samplers":[{"magFilter":9729,"minFilter":9987}]}

public/js/config.js

@@ -11,7 +11,7 @@ const HOME_DATA = {
   startDate: '2024-11-27',
   group: '国家管网集团北京管道有限公司',
   company: '内蒙古输油气分公司',
-  curStation: '托克托压气站',
+  curStation: '托克托作业区',
 }
 
 /**
@@ -30,7 +30,7 @@ const STATION_LIST = [
 /**
  * 页面内标题 已生效
  */
-const SYSTEM_TITLE = '托克托压气站综合安防平台'
+const SYSTEM_TITLE = '托克托作业区综合安防平台'
 /**
  * 设置浏览器标题 已生效
  */
@@ -605,7 +605,7 @@ const GY_STATIONS = [
     positioningBuildId: '100001',
     direction: 'right',
     position: [106.6263209022603, 26.650585399041464, 1.4657059185197159],
-    layers: ['周界', '泄漏', '摄像头'],
+    layers: ['周界入侵', '激光云台', '工业视频'],
   },
   {
     id: '784131093203787776',
@@ -615,7 +615,7 @@ const GY_STATIONS = [
     positioningBuildId: '100001',
     direction: 'right',
     position: [106.6263209022603, 26.650585399041464, 1.4657059185197159],
-    layers: ['周界', '泄漏', '摄像头'],
+    layers: ['周界入侵', '激光云台', '工业视频'],
     // webRTCUrl: "wss://dispatcher:1443/webrtc",
     // admin: "8889",
     // password: "123456",
@@ -660,6 +660,7 @@ const GY_JGYT_CONFIG = [
   }
 ]
 
+const YWURL = "http://10.0.0.203:8081"
 
 /**
  * mqtt地址

public/js/station.js

@@ -245,9 +245,9 @@ const STATION_CONFIG_2 = [
         picPath: '/imgs/yx_tkt.JPG',
         preTag: '',
         data: [
-          { name: '管道里程', value: '518240.2', unit: 'm', tag: '' },
-          { name: '经度', value: '111.260470840', unit: '', tag: '' },
-          { name: '纬度', value: '40.380258539', unit: '', tag: '' },
+          { name: '管道里程', value: '518240.2', unit: 'km', tag: '' },
+          { name: '经度', value: '111.2604708', unit: '°E', tag: '' },
+          { name: '纬度', value: '40.3802585', unit: '°N', tag: '' },
           { name: '高程', value: '996.178', unit: 'm', tag: '' },
         ],
       },
@@ -257,19 +257,19 @@ const STATION_CONFIG_2 = [
         type: 'stationFS',
         left: 1060,
         top: 468,
-        offsetX: 120,
-        offsetY: -220,
+        offsetX: -140,
+        offsetY: -280,
         height: 140,
-        anchors: ['Top', 'Left'],
+        anchors: ['Top', 'Bottom'],
         departmentId: '784131392517709824',
         buildId: '581056806831267840',
         picPath: '/imgs/yx_hhht.JPG',
         preTag: '',
         data: [
-          { name: '管道里程', value: '531237.0', unit: '', tmag: '' },
-          { name: '经度', value: '111.641454172,', unit: '', tag: '' },
-          { name: '纬度', value: '40.620619066', unit: '', tag: '' },
-          { name: '高程', value: '1025.135', unit: '', tmag: '' },
+          { name: '管道里程', value: '531237.0', unit: 'km', tmag: '' },
+          { name: '经度', value: '111.6414541,', unit: '°E', tag: '' },
+          { name: '纬度', value: '40.6206190', unit: '°N', tag: '' },
+          { name: '高程', value: '1025.135', unit: 'm', tmag: '' },
         ],
       },
       {
@@ -287,9 +287,9 @@ const STATION_CONFIG_2 = [
         picPath: '/imgs/yx_17.JPG',
         preTag: '',
         data: [
-          { name: '管道里程', value: '380840.4', unit: 'm', tag: '' },
-          { name: '经度', value: '110.789238923', unit: '', tag: '' },
-          { name: '纬度', value: '40.170114812', unit: '', tag: '' },
+          { name: '管道里程', value: '380840.4', unit: 'km', tag: '' },
+          { name: '经度', value: '110.7892389', unit: '°E', tag: '' },
+          { name: '纬度', value: '40.1701148', unit: '°N', tag: '' },
           { name: '高程', value: '1075.633', unit: 'm', tag: '' },
         ],
       },
@@ -308,9 +308,9 @@ const STATION_CONFIG_2 = [
         picPath: '/imgs/yx_18.JPG',
         preTag: '',
         data: [
-          { name: '管道里程', value: '431736.2', unit: 'm', tag: '' },
-          { name: '经度', value: '111.050644990', unit: '', tag: '' },
-          { name: '纬度', value: '40.237420999', unit: '', tag: '' },
+          { name: '管道里程', value: '431736.2', unit: 'km', tag: '' },
+          { name: '经度', value: '111.0506450', unit: '°E', tag: '' },
+          { name: '纬度', value: '40.2374210', unit: '°N', tag: '' },
           { name: '高程', value: '1020.847', unit: 'm', tag: '' },
         ],
       },
@@ -329,9 +329,9 @@ const STATION_CONFIG_2 = [
         picPath: '/imgs/yx_19.JPG',
         preTag: '',
         data: [
-          { name: '管道里程', value: '452140.6', unit: 'm', tag: '' },
-          { name: '经度', value: '111.112902993', unit: '', tag: '' },
-          { name: '纬度', value: '40.274858858', unit: '', tag: '' },
+          { name: '管道里程', value: '452140.6', unit: 'km', tag: '' },
+          { name: '经度', value: '111.1129030', unit: '°E', tag: '' },
+          { name: '纬度', value: '40.2748589', unit: '°N', tag: '' },
           { name: '高程', value: '988.3670', unit: 'm', tag: '' },
         ],
       },
@@ -341,18 +341,19 @@ const STATION_CONFIG_2 = [
         type: 'valve',
         left: 983,
         top: 465,
-        offsetX: -80,
-        offsetY: -280,
+        offsetX: -60,
+        offsetY: 300,
+
         height: 140,
-        anchors: ['Top', 'Bottom'],
+        anchors: ['Top', 'Top'],
         departmentId: '784131445336580096',
         buildId: '524944733819117568',
         picPath: '/imgs/yx_20.JPG',
         preTag: '',
         data: [
-          { name: '管道里程', value: '531108.2', unit: 'm', tag: '' },
-          { name: '经度', value: '111.436153642', unit: '', tag: '' },
-          { name: '纬度', value: '40.489591328', unit: '', tag: '' },
+          { name: '管道里程', value: '531108.2', unit: 'km', tag: '' },
+          { name: '经度', value: '111.4361536', unit: '°E', tag: '' },
+          { name: '纬度', value: '40.4895913', unit: '°N', tag: '' },
           { name: '高程', value: '1007.164', unit: 'm', tag: '' },
         ],
       },
@@ -362,8 +363,8 @@ const STATION_CONFIG_2 = [
         type: 'valve',
         left: 1030,
         top: 463,
-        offsetX: -60,
-        offsetY: 300,
+        offsetX: 120,
+        offsetY: 260,
         height: 140,
         anchors: ['Bottom', 'Top'],
         departmentId: '784131445336580097',
@@ -371,9 +372,9 @@ const STATION_CONFIG_2 = [
         picPath: '/imgs/yx_21.JPG',
         preTag: '',
         data: [
-          { name: '管道里程', value: '539723.4', unit: 'm', tag: '' },
-          { name: '经度', value: '111.639092670', unit: '', tag: '' },
-          { name: '纬度', value: '40.619999597', unit: '', tag: '' },
+          { name: '管道里程', value: '539723.4', unit: 'km', tag: '' },
+          { name: '经度', value: '111.6390926', unit: '°E', tag: '' },
+          { name: '纬度', value: '40.6199996', unit: '°N', tag: '' },
           { name: '高程', value: '1025.127', unit: 'm', tag: '' },
         ],
       },
@@ -383,18 +384,18 @@ const STATION_CONFIG_2 = [
         type: 'valve',
         left: 1094,
         top: 473,
-        offsetX: 100,
-        offsetY: 220,
+        offsetX: 120,
+        offsetY: 0,
         height: 140,
-        anchors: ['Bottom', 'Top'],
+        anchors: ['Bottom', 'Left'],
         departmentId: '784131445336580098',
         buildId: '524944733819117568',
         picPath: '/imgs/yx_22.JPG',
         preTag: '',
         data: [
-          { name: '管道里程', value: '555860.5', unit: 'm', tag: '' },
-          { name: '经度', value: '111.861633940', unit: '', tag: '' },
-          { name: '纬度', value: '40.662374382', unit: '', tag: '' },
+          { name: '管道里程', value: '555860.5', unit: 'km', tag: '' },
+          { name: '经度', value: '111.8616339', unit: '°E', tag: '' },
+          { name: '纬度', value: '40.6623743', unit: '°N', tag: '' },
           { name: '高程', value: '1065.356', unit: 'm', tag: '' },
         ],
       },
@@ -404,8 +405,8 @@ const STATION_CONFIG_2 = [
         type: 'valve',
         left: 1128,
         top: 484,
-        offsetX: 100,
-        offsetY: 0,
+        offsetX: 70,
+        offsetY: -220,
         height: 140,
         anchors: ['Right', 'Left'],
         departmentId: '784131445336580099',
@@ -413,9 +414,9 @@ const STATION_CONFIG_2 = [
         picPath: '/imgs/yx_23.JPG',
         preTag: '',
         data: [
-          { name: '管道里程', value: '567902.1', unit: 'm', tag: '' },
-          { name: '经度', value: '112.045375766', unit: '', tag: '' },
-          { name: '纬度', value: '40.701167418', unit: '', tag: '' },
+          { name: '管道里程', value: '567902.1', unit: 'km', tag: '' },
+          { name: '经度', value: '112.0453757', unit: '°E', tag: '' },
+          { name: '纬度', value: '40.7011674', unit: '°N', tag: '' },
           { name: '高程', value: '1129.733', unit: 'm', tag: '' },
         ],
       },

src/views/Home.vue

@@ -376,7 +376,7 @@ export default {
             const data = JSON.parse(content);
             // console.log("门禁事件数据", data);
             this.$notify({
-              title: "智能门禁",
+              title: "安防门禁",
               duration: 1500, //自动关闭时间1.5s
               message: data.Content,
               offset: 70,

src/views/basePage/components/layerControl/index.vue

@@ -312,14 +312,15 @@ export default {
       const { type, name, layerId } = layer;
       if (
         [
-          "智能门禁",
+          "视频融合",
+          "安防门禁",
           "防爆扩音",
           "埋地泄漏",
           "监控探头",
-          "摄像头",
-          "泄漏",
-          "周界",
-          "火灾",
+          "工业视频",
+          "激光云台",
+          "周界入侵",
+          "火灾监测",
           "风险识别",
           "集气站",
           "井场",

src/views/basePage/components/monitorDialog/index.vue

@@ -242,9 +242,9 @@ export default {
           icon: "police",
           data: [
             // { category: '人员报警', name: '人员', num: 0, icon: 'people' },
-            { category: "周界报警", name: "周界", num: 0, icon: "Perimeter" },
+            { category: "周界入侵", name: "周界入侵", num: 0, icon: "Perimeter" },
             // { category: "火灾报警", name: "火灾", num: 0, icon: "fire" },
-            { category: "泄漏报警", name: "泄漏", num: 0, icon: "xielou" },
+            { category: "激光云台", name: "激光云台", num: 0, icon: "xielou" },
           ],
           tableConfig: [
             // { title: "类型", prop: "category", width: "22%" },

src/views/basePage/mixins/LoadLayer/JGYT.js

@@ -95,8 +95,8 @@ export default {
     initJGYT() {
       this.$store.dispatch('globalConfig/pushSwitchConfig', {
         type: 'jgyt',
-        label: '泄漏',
-        name: '泄漏',
+        label: '激光云台',
+        name: '激光云台',
         show: this.jgytLayerShow,
         selected: false,
         elements: this.jgytTagsData,
@@ -184,8 +184,8 @@ export default {
         })
         this.$store.dispatch('globalConfig/updateSwitchConfig', {
           type: 'jgyt',
-          label: '泄漏',
-          name: '泄漏',
+          label: '激光云台',
+          name: '激光云台',
           show: this.jgytLayerShow,
           selected: false,
           elements: this.jgytTagsData,

src/views/basePage/mixins/LoadLayer/accessControl.js

@@ -19,7 +19,7 @@ export default {
   watch: {
     buildId: {
       handler(val) {
-        console.log('智能门禁图层建筑变化', val)
+        // console.log('智能门禁图层建筑变化', val)
         if (!val) return
         setTimeout(() => {
           this.getZnmjTagsData()
@@ -40,8 +40,8 @@ export default {
     initZnmj() {
       this.$store.dispatch('globalConfig/pushSwitchConfig', {
         type: this.znmjDataSourceName,
-        label: '智能门禁',
-        name: '智能门禁',
+        label: '安防门禁',
+        name: '安防门禁',
         show: this.znmjDataSourceShow,
         selected: false,
         elements: this.znmjTagsData,
@@ -55,8 +55,8 @@ export default {
         this.znmjTagsData = res.data.content || []
         this.$store.dispatch('globalConfig/updateSwitchConfig', {
           type: this.znmjDataSourceName,
-          label: '智能门禁',
-          name: '智能门禁',
+          label: '安防门禁',
+          name: '安防门禁',
           show: this.znmjDataSourceShow,
           selected: false,
           elements: this.znmjTagsData,

src/views/basePage/mixins/LoadLayer/camera.js

@@ -41,8 +41,8 @@ export default {
     initCamera() {
       this.$store.dispatch('globalConfig/pushSwitchConfig', {
         type: this.cameraDataSourceName,
-        label: '摄像头',
-        name: '摄像头',
+        label: '工业视频',
+        name: '工业视频',
         show: this.cameraDataSourceShow,
         selected: false,
         elements: this.cameraTagsData,
@@ -56,8 +56,8 @@ export default {
         this.cameraTagsData = res.data.content.filter(e => !e.canHide) || []
         this.$store.dispatch('globalConfig/updateSwitchConfig', {
           type: this.cameraDataSourceName,
-          label: '摄像头',
-          name: '摄像头',
+          label: '工业视频',
+          name: '工业视频',
           show: this.cameraDataSourceShow,
           selected: false,
           elements: this.cameraTagsData,

src/views/basePage/mixins/LoadLayer/fire.js

@@ -44,9 +44,9 @@ export default {
     initFire() {
       this.$store.dispatch("globalConfig/pushSwitchConfig", {
         type: "fire",
-        label: "火灾",
-        name: "火灾",
-        show: true,
+        label: "火灾监测",
+        name: "火灾监测",
+        show: false,
         selected: false,
         elements: this.fireTagsData,
       });
@@ -60,8 +60,8 @@ export default {
         // console.log("火灾信息", this.fireTagsData);
         this.$store.dispatch("globalConfig/updateSwitchConfig", {
           type: "fire",
-          label: "火灾",
-          name: "火灾",
+          label: "火灾监测",
+          name: "火灾监测",
           show: this.fireTagsShow,
           selected: false,
           elements: this.fireTagsData,

src/views/basePage/mixins/LoadLayer/index.js

@@ -2,13 +2,14 @@ import Person from './person' //人员定位模块
 import Rail from './rail' //电子围栏
 import AreaAlarm from './areaAlarm' //区域报警
 import JGYT from './JGYT' //激光云台/泄漏
-import perimeter from './perimeter' //周界
-import camera from './camera' //摄像头
-import fire from './fire' //火灾
-import risk from './risk' //风险
+import perimeter from './perimeter' //周界入侵
+import camera from './camera' //摄像头 工业视频
+import fire from './fire' //火灾监测
+import risk from './risk' //风险区域
 import fbky from './fbky' //防爆扩音
 import accessControl from './accessControl' //智能门禁
+import videoFusion from './videoFusion' //视频融合
 
 export default {
-  mixins: [Person, Rail, AreaAlarm, JGYT, perimeter, camera, fire, risk, fbky, accessControl],
+  mixins: [Person, Rail, AreaAlarm, JGYT, perimeter, camera, fire, risk, fbky, accessControl, videoFusion],
 }

src/views/basePage/mixins/LoadLayer/perimeter.js

@@ -113,8 +113,8 @@ export default {
     initPerimeter() {
       this.$store.dispatch('globalConfig/pushSwitchConfig', {
         type: 'perimeter',
-        label: '周界',
-        name: '周界',
+        label: '周界入侵',
+        name: '周界入侵',
         show: this.perimeterTagsShow,
         selected: false,
         elements: this.perimeterTagsData,
@@ -129,8 +129,8 @@ export default {
         this.perimeterTagsData = res.data.content || []
         this.$store.dispatch('globalConfig/updateSwitchConfig', {
           type: 'perimeter',
-          label: '周界',
-          name: '周界',
+          label: '周界入侵',
+          name: '周界入侵',
           show: this.perimeterTagsShow,
           selected: false,
           elements: this.perimeterTagsData,
@@ -150,6 +150,7 @@ export default {
           const extrudedHeight = 3
           let positions = []
           let minimumHeights = []
+          let pColor = seg.withdrawn ? "#808080" : "#00ff00"
           seg.points.forEach(p => {
             const gpsPoint = _locate(p.x, p.y, { x: longitude, y: latitude })
             const point = [gpsPoint.x, gpsPoint.y, wallHeight]
@@ -166,7 +167,7 @@ export default {
               wall: {
                 positions: Cartesian3.fromDegreesArrayHeights(positions),
                 minimumHeights,
-                material: Color.fromCssColorString('#00ff00').withAlpha(0.8),
+                material: Color.fromCssColorString(pColor).withAlpha(0.8),
               },
               properties: new PropertyBag({
                 type: 'layer_perimeter',
@@ -223,6 +224,9 @@ export default {
           case 3:
             color = '#FF0000'
             break
+          case 4:
+            color = '#808080'
+            break
           case 5:
             color = '#FFF100'
             break
@@ -332,6 +336,17 @@ export default {
               item.billboard = null
               item.position = null
             }
+          } else if (data.alarmType === 4) {
+            //地图元素
+            let x = 1
+            let flog = true
+            let speed = 0.015 * data.alarmType
+            item.wall.material = new ColorMaterialProperty(
+              new CallbackProperty(function () {
+                return Color.fromCssColorString(color).withAlpha(x)
+              }, false)
+            )
+            item.show = true
           } else {
             let perimeterSegmentData = {}
             this.perimeterTagsData.forEach(tag => {

src/views/basePage/mixins/LoadLayer/person.js

@@ -95,8 +95,8 @@ export default {
     // 没有定位模块，不加载人员
     // this.$store.dispatch('globalConfig/pushSwitchConfig', {
     //   type: this.personDataSourceName,
-    //   label: '人员',
-    //   name: '人员',
+    //   label: '人员定位',
+    //   name: '人员定位',
     //   show: this.personDataSourceShow,
     //   selected: false,
     // })

src/views/basePage/mixins/LoadLayer/videoFusion.js

@@ -0,0 +1,118 @@
+import { Entity, NearFarScalar, PolylineDashMaterialProperty, DistanceDisplayCondition, Cartesian3, ImageMaterialProperty, Texture, Color, PropertyBag } from "cesium";
+import { getAccessInfoList } from "@/API/accessControl";
+import { flyToByViewer, addNewDatasource, flyToPerspective } from "@/utils/mapUtil";
+import { _locate } from '@/utils'
+import { getViewer } from "@/store/map/mapService";
+import { mapGetters } from 'vuex'
+export default {
+  name: 'vFusion',
+  data() {
+    return {
+      vFusionDataSourceName: 'vFusion',
+      vFusionDataSourceShow: false,
+      vFusionTagsData: [],
+    }
+  },
+  computed: {
+    ...mapGetters(['buildId', 'buildInfo']),
+  },
+  watch: {
+    buildId: {
+      handler(val) {
+        console.log('视频融合图层建筑变化', val)
+        if (!val) return
+        setTimeout(() => {
+          this.getVideoFusionTagsData()
+        }, 2000)
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    // setTimeout(() => {
+    //   this.initVideoFusion()
+    // }, 1000)
+  },
+  methods: {
+    /**
+     * 初始化
+     */
+    initVideoFusion() {
+      this.$store.dispatch('globalConfig/pushSwitchConfig', {
+        type: this.vFusionDataSourceName,
+        label: '视频融合',
+        name: '视频融合',
+        show: this.vFusionDataSourceShow,
+        selected: false,
+        elements: this.vFusionTagsData,
+      })
+    },
+    async getVideoFusionTagsData() {
+      try {
+        let p = { enable: true, buildId: this.buildInfo.positioningBuildId }
+        let res = await getAccessInfoList(p)
+        // console.log('视频融合数据', res)
+        this.vFusionTagsData = res.data.content || []
+        this.$store.dispatch('globalConfig/updateSwitchConfig', {
+          type: this.vFusionDataSourceName,
+          label: '视频融合',
+          name: '视频融合',
+          show: this.vFusionDataSourceShow,
+          selected: false,
+          elements: this.vFusionTagsData,
+        })
+        this.addVideoFusionTags()
+      } catch (err) {
+        console.log(err)
+      }
+    },
+    addVideoFusionTags() {
+      let dataSource = addNewDatasource('layer_' + this.vFusionDataSourceName)
+      // 视频纹理
+      const videoTexture = new Texture({
+        context: dataSource.scene.context,
+        source: videoElement,
+      });
+      // console.log("视频融合基础信息", this.vFusionTagsData);
+      dataSource.entities.add({
+        position: Cartesian3.fromDegrees(111.26017906894992, 40.380134574100325, 0.021734722753457503),
+        model: {
+          uri: 'insidemodels/VideoTest.glb',
+          minimumPixelSize: 128,
+          maximumScale: 20000
+        },
+        material: new ImageMaterialProperty({
+          image: videoTexture,
+          transparent: true
+        })
+      });
+    },
+    async pushVideoFusionStatus(data) {
+      if (data.id) {
+        if (data?.buildId === this.buildInfo?.positioningBuildId) {
+          // console.log("聚焦报警");
+          this.animationVideoFusion(data)
+        } else {
+          const curStation = GY_STATIONS.find(e => e.positioningBuildId === data.buildId)
+          // console.log('报警站点信息：', curStation)
+          if (!curStation) return
+          this.$store.dispatch('globalConfig/setMapMode', {
+            value: '3d',
+          })
+          await this.$store.dispatch('model/setBuildInfoByBuildId', curStation.buildId)
+          setTimeout(() => {
+            this.animationVideoFusion(data)
+          }, 3000)
+        }
+      }
+    },
+    transPosition(pointList = []) {
+      const { longitude, latitude } = this.buildInfo.gpsCoordinate0
+      return pointList.reduce((pre, cur) => {
+        const { x, y } = _locate(cur.x, cur.y, { x: longitude, y: latitude })
+        pre.push([x, y, +cur.z])
+        return pre
+      }, [])
+    },
+  },
+}

src/views/basePage/panels/IntelligentVideo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page_container">
-    <base-title title="天然气泄露检测" />
+    <base-title title="激光云台" />
     <div class="page_content">
       <div class="video_window window1"></div>
       <div class="video_window window2"></div>

src/views/basePage/panels/IntelligentVideo/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page_container">
-    <base-title title="天然气泄露检测" />
+    <base-title title="激光云台" />
     <div class="page_content">
       <!-- 上半部分 -->
       <div class="video_window window1">

src/views/basePage/panels/Overview.vue

@@ -64,25 +64,25 @@ export default {
       categoryList: {
         100001: {
           code: "101",
-          name: "人员报警",
+          name: "人员定位",
           value: "",
           level: "024000",
         },
         100002: {
           code: "101",
-          name: "周界报警",
+          name: "周界入侵",
           value: "",
           level: "024000",
         },
         100003: {
           code: "101",
-          name: "火灾报警",
+          name: "火灾监测",
           value: "",
           level: "024000",
         },
         100004: {
           code: "101",
-          name: "泄漏检测",
+          name: "激光云台",
           value: "",
           level: "024000",
         },
@@ -94,13 +94,13 @@ export default {
         },
         100006: {
           code: "101",
-          name: "门禁报警",
+          name: "安防门禁",
           value: "",
           level: "024000",
         },
         100015: {
           code: "101",
-          name: "110报警",
+          name: "一键报警",
           value: "",
           level: "024000",
         },

src/views/basePage/panels/PersonStatistics.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page_container">
-    <base-title title="出入统计" />
+    <base-title title="安防门禁" />
     <div class="page_content">
       <!-- 都匀人员不统计 -->
       <div class="person_title">人员信息</div>
@@ -150,17 +150,17 @@
               :key="index"
             >
               <img
-                v-if="item.name === '员工'"
+                v-if="item.name === '站内员工'"
                 :src="require('@/assets/imgs/panels/icon_staff@2x.png')"
                 alt=""
               />
               <img
-                v-if="item.name === '访客'"
+                v-if="item.name === '访客人员'"
                 :src="require('@/assets/imgs/panels/icon_visitor@2x.png')"
                 alt=""
               />
               <img
-                v-if="item.name === '施工'"
+                v-if="item.name === '施工人员'"
                 :src="require('@/assets/imgs/panels/icon_construction@2x.png')"
                 alt=""
               />
@@ -186,9 +186,13 @@
 import BaseTitle from "./BaseTitle.vue";
 import VueSeamless from "vue-seamless-scroll";
 import { getPersonTypeList, getAccessInfo } from "@/API/positioning";
-import { setAreaPersonOut,getAreaPersonList, getAccessLogList } from "@/API/accessControl";
+import {
+  setAreaPersonOut,
+  getAreaPersonList,
+  getAccessLogList,
+} from "@/API/accessControl";
 import Dayjs from "dayjs";
-
+import { openDialog } from "@/utils/mapUtil.js";
 export default {
   name: "PersonStatistics",
   components: { BaseTitle, VueSeamless },
@@ -200,15 +204,15 @@ export default {
       seamLessTimeKeyEvent: new Date().getTime(),
       personTypeCount: [
         {
-          name: "员工",
+          name: "站内员工",
           value: 0,
         },
         {
-          name: "访客",
+          name: "访客人员",
           value: 0,
         },
         {
-          name: "施工",
+          name: "施工人员",
           value: 0,
         },
       ],
@@ -264,7 +268,7 @@ export default {
       personList: [
         {
           id: "1",
-          name: "张某某",
+          name: "",
           pic: "",
           type: "值班干部",
           posi: "主任",
@@ -311,6 +315,7 @@ export default {
     // this.getPersonTypeList();
   },
   methods: {
+    openDialog,
     async initAccessLogList() {
       try {
         const params = {
@@ -337,8 +342,8 @@ export default {
           const c = data.remark.split(":");
           if (c.length == 3) {
             this.personTypeCount[0].value = c[0]; //员工
-            this.personTypeCount[1].value = c[1]; //访客
-            this.personTypeCount[2].value = c[2]; //施工
+            this.personTypeCount[1].value = c[2]; //访客
+            this.personTypeCount[2].value = c[1]; //施工
             this.total = Number(c[0]) + Number(c[1]) + Number(c[2]);
           }
         }
@@ -347,6 +352,12 @@ export default {
       }
     },
     openPersonList() {
+      // this.openDialog(
+      //   "进站跟踪",
+      //   "https://10.0.0.201:8082/#/main?nolayout=1&token={token}",
+      //   1500,
+      //   760
+      // );
       // this.$store.dispatch("globalConfig/setPersonListDialog", {
       //   show: true,
       //   dialogMsg: this.personList,
@@ -445,7 +456,7 @@ export default {
                 //访客
                 case "546093319541760000":
                   visitList.push({
-                    id:i.id,
+                    id: i.id,
                     workNo: i.workNo,
                     name: i.name,
                   });
@@ -453,7 +464,7 @@ export default {
                 //施工
                 case "403245878963347456":
                   workList.push({
-                    id:i.id,
+                    id: i.id,
                     workNo: i.workNo,
                     name: i.name,
                   });
@@ -461,7 +472,7 @@ export default {
                 //员工
                 case "255022541838691649":
                   localList.push({
-                    id:i.id,
+                    id: i.id,
                     workNo: i.workNo,
                     name: i.name,
                   });
@@ -490,7 +501,10 @@ export default {
     },
     async delPersonMessage(item) {
       try {
-        let res = await setAreaPersonOut({ areaId: '791707314364096512', personId: item.id });
+        let res = await setAreaPersonOut({
+          areaId: "791707314364096512",
+          personId: item.id,
+        });
       } catch (error) {
         console.log(error);
       }
@@ -503,7 +517,7 @@ export default {
       })
         .then(() => {
           console.log("删除" + item.name + "人员已入场信息！");
-          this.delPersonMessage(item)//删除接口
+          this.delPersonMessage(item); //删除接口
           this.$message({
             type: "success",
             message: "删除成功!",

src/views/basePage/panels/RiskHint.vue

@@ -72,32 +72,7 @@ export default {
         ["024002"]: { name: "二级", color: "#F8E71C" },
         ["024003"]: { name: "三级", color: "#53A3FF" },
       },
-      hintData1: [
-        {
-          id: "1",
-          level: "306004",
-          riskTime: "2022-11-16 15:51:46",
-          content: "周界入侵触发，事件等级低",
-        },
-        {
-          id: "2",
-          level: "306004",
-          riskTime: "2022-11-16 15:51:46",
-          content: "周界入侵触发，事件等级低",
-        },
-        {
-          id: "3",
-          level: "306004",
-          riskTime: "2022-11-16 15:51:46",
-          content: "周界入侵触发，事件等级较低",
-        },
-        {
-          id: "4",
-          level: "306003",
-          riskTime: "2022-11-16 15:51:46",
-          content: "激光云台触发气体泄漏，事件等级中",
-        },
-      ],
+      hintData1: [],
     };
   },
   computed: {
@@ -106,6 +81,16 @@ export default {
   mounted() {
     this.getAlarmDataList();
     // this.startMqtt();
+    let timer = null;
+    if (!timer) {
+      timer = setInterval(() => {
+        this.getAlarmDataList();
+      }, 5000);
+    }
+    this.$once("hook:beforeDestroy", () => {
+      !!timer && clearTimeout(timer);
+      timer = null;
+    });
   },
   watch: {
     departmentId(newVal) {
@@ -118,19 +103,20 @@ export default {
   },
   methods: {
     Dayjs,
+
     async getAlarmDataList() {
       try {
         const params = {
-          pageSize: 10,
-          pageIndex: 1,
+          // pageSize: 10000,
+          // pageIndex: 1,
           dealStatus: "", //0
-          confirmStatus: "",
+          confirmStatus: "0",
           recoveryStatus: "",
           category: "",
           level: "",
           type: "",
           startTime: Dayjs(
-            Dayjs(new Date()).subtract(1, "month").format("YYYY-MM-DD HH:mm:ss")
+            Dayjs(new Date()).subtract(7, "day").format("YYYY-MM-DD HH:mm:ss")
           ).format(),
           endTime: Dayjs(
             Dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss")
@@ -152,22 +138,22 @@ export default {
               e.content,
           };
         });
-        // console.log("风险报警数据", alarmData, this.hintData1);
+        console.log("风险报警数据", alarmData, this.hintData1);
       } catch (err) {}
     },
     openRiskDialog(data) {
       console.log("风险报警数据", data);
-      let dialogConfig = {
-        dialogId: "risk_" + data.id,
-        show: true, //是否显示
-        title: "事件详情",
-        width: 500, //px宽度
-        height: 320, //px高度
-        center: true, //是否居中定位
-        zIndex: 10,
-        data,
-      };
-      this.$store.dispatch("dialog/addRiskDialog", dialogConfig);
+      // let dialogConfig = {
+      //   dialogId: "risk_" + data.id,
+      //   show: true, //是否显示
+      //   title: "事件详情",
+      //   width: 500, //px宽度
+      //   height: 320, //px高度
+      //   center: true, //是否居中定位
+      //   zIndex: 10,
+      //   data,
+      // };
+      // this.$store.dispatch("dialog/addRiskDialog", dialogConfig);
     },
     startMqtt() {
       const topics = [

src/views/components/baseHeader/left.vue

@@ -92,6 +92,9 @@
             <el-dropdown-item @click.native="toAdmin">
               <span style="display: block">管理系统</span>
             </el-dropdown-item>
+            <el-dropdown-item @click.native="toURL(ywUrl)">
+              <span style="display: block">运维系统</span>
+            </el-dropdown-item>
             <el-dropdown-item @click.native="goToLogout">
               <span style="display: block">退出登录</span>
             </el-dropdown-item>
@@ -178,7 +181,7 @@ export default {
         person: "admin",
       },
       curNav: "1", // 当前选中的菜单id
-
+      ywUrl: "",
       navConfig: [
         {
           id: "1",
@@ -275,6 +278,7 @@ export default {
       this.alarmCount = +data;
     });
     this.startMqtt();
+    this.ywUrl = YWURL;
   },
   updated() {
     this.datePersonData.person = localStorage.getItem("username");
@@ -370,7 +374,7 @@ export default {
       this.$notify({
         //样式style块
         dangerouslyUseHTMLString: true,
-        title: "智能门禁",
+        title: "安防门禁",
         message:
           "【郝波】在门禁【托克托出站门禁】人脸认证通过，离开【托克托压气站】",
         // duration: 0,
@@ -641,6 +645,14 @@ export default {
       //window.location.href = ISMSAdminWeb.path + "main?token=" + token;
       window.open(ISMSAdminWeb.path + "main?token=" + token);
     },
+    toURL(url) {
+      const token = localStorage.getItem("token");
+      //window.location.href = ISMSAdminWeb.path + "main?token=" + token;
+      window.open(url);
+    },
+    goClose() {
+      window.close();
+    },
     /**
      * 弹窗形式打开后台页面
      */

src/views/components/chart/BarLineChart.vue

@@ -40,10 +40,10 @@ export default {
         // { code: "100004", name: "泄漏监测", color: ["#00E0C3", "#4AC6E2"] }, // 泄漏
         { code: "1", name: "已处理", color: "#00FFCC" }, //周界
         { code: "0", name: "未处理", color: "##85FF00" }, // 火灾
-        { code: "100001", name: "人员报警", color: "#00E1FF" }, // 人员
-        { code: "100002", name: "周界防护", color: "#00B387" }, //周界
-        { code: "100003", name: "火灾报警", color: "#00FFCC" }, // 火灾
-        { code: "100004", name: "泄漏监测", color: "#00B0B0" }, // 泄漏
+        { code: "100001", name: "人员定位", color: "#00E1FF" }, // 人员
+        { code: "100002", name: "周界入侵", color: "#00B387" }, //周界
+        { code: "100003", name: "火灾监测", color: "#00FFCC" }, // 火灾
+        { code: "100004", name: "激光云台", color: "#00B0B0" }, // 泄漏
       ],
     };
   },

src/views/components/chart/MultiLineChart.vue

@@ -39,10 +39,10 @@ export default {
         // { code: "100004", name: "泄漏监测", color: ["#00E0C3", "#4AC6E2"] }, // 泄漏
         { code: "1", name: "已处理", color: "#00FFCC" }, //周界
         { code: "0", name: "未处理", color: "#00B0B0" }, // 火灾
-        { code: "100001", name: "人员报警", color: "#00E1FF" }, // 人员
-        { code: "100002", name: "周界防护", color: "#00B387" }, //周界
-        { code: "100003", name: "火灾报警", color: "#00FFCC" }, // 火灾
-        { code: "100004", name: "泄漏监测", color: "#00B0B0" }, // 泄漏
+        { code: "100001", name: "人员定位", color: "#00E1FF" }, // 人员
+        { code: "100002", name: "周界入侵", color: "#00B387" }, //周界
+        { code: "100003", name: "火灾监测", color: "#00FFCC" }, // 火灾
+        { code: "100004", name: "激光云台", color: "#00B0B0" }, // 泄漏
       ],
     };
   },

src/views/components/chart/RadarChart.vue

@@ -40,10 +40,10 @@ export default {
         // { code: "100004", name: "泄漏监测", color: ["#00E0C3", "#4AC6E2"] }, // 泄漏
         { code: "1", name: "已处理", color: "#00FFCC" }, //周界
         { code: "0", name: "未处理", color: "#00B0B0" }, // 火灾
-        { code: "100001", name: "人员报警", color: "#00E1FF" }, // 人员
-        { code: "100002", name: "周界防护", color: "#00B387" }, //周界
-        { code: "100003", name: "火灾报警", color: "#00FFCC" }, // 火灾
-        { code: "100004", name: "泄漏监测", color: "#00B0B0" }, // 泄漏
+        { code: "100001", name: "人员定位", color: "#00E1FF" }, // 人员
+        { code: "100002", name: "周界入侵", color: "#00B387" }, //周界
+        { code: "100003", name: "火灾监测", color: "#00FFCC" }, // 火灾
+        { code: "100004", name: "激光云台", color: "#00B0B0" }, // 泄漏
       ],
     };
   },

src/views/components/chart/RankBar.vue

@@ -41,10 +41,10 @@ export default {
         // { code: "100004", name: "泄漏监测", color: ["#00E0C3", "#4AC6E2"] }, // 泄漏
         { code: "1", name: "已处理", color: "#00FFCC" }, //周界
         { code: "0", name: "未处理", color: "#00B0B0" }, // 火灾
-        { code: "100001", name: "人员报警", color: "#00E1FF" }, // 人员
-        { code: "100002", name: "周界防护", color: "#00B387" }, //周界
-        { code: "100003", name: "火灾报警", color: "#00FFCC" }, // 火灾
-        { code: "100004", name: "泄漏监测", color: "#00B0B0" }, // 泄漏
+        { code: "100001", name: "人员定位", color: "#00E1FF" }, // 人员
+        { code: "100002", name: "周界入侵", color: "#00B387" }, //周界
+        { code: "100003", name: "火灾监测", color: "#00FFCC" }, // 火灾
+        { code: "100004", name: "激光云台", color: "#00B0B0" }, // 泄漏
       ],
     };
   },

src/views/components/chart/ScatterChart.vue

@@ -44,10 +44,10 @@ export default {
         // { code: "100002", name: "周界防护", color: ["#23E490", "#00AE63"] }, //周界
         // { code: "100003", name: "火灾报警", color: ["#FFB500", "#E9CC75"] }, // 火灾
         // { code: "100004", name: "泄漏监测", color: ["#00E0C3", "#4AC6E2"] }, // 泄漏
-        { code: "100001", name: "人员报警", color: "#00E1FF" }, // 人员
-        { code: "100002", name: "周界防护", color: "#00B387" }, //周界
-        { code: "100003", name: "火灾报警", color: "#00FFCC" }, // 火灾
-        { code: "100004", name: "泄漏监测", color: "#00B0B0" }, // 泄漏
+        { code: "100001", name: "人员定位", color: "#00E1FF" }, // 人员
+        { code: "100002", name: "周界入侵", color: "#00B387" }, //周界
+        { code: "100003", name: "火灾监测", color: "#00FFCC" }, // 火灾
+        { code: "100004", name: "激光云台", color: "#00B0B0" }, // 泄漏
       ],
     };
   },

src/views/components/chart/StackBarChart.vue

@@ -31,13 +31,13 @@ export default {
     return {
       chart: null,
       colorConfig: [
-        { code: "100001", name: "人员报警", color: "#9072FF" },
-        { code: "100002", name: "周界防护", color: "#02F2F9" },
-        { code: "100003", name: "火灾报警", color: "#007DFF" },
-        { code: "100004", name: "泄漏监测", color: "#00C9A0" },
+        { code: "100001", name: "人员定位", color: "#00E1FF" }, // 人员
+        { code: "100002", name: "周界入侵", color: "#00B387" }, //周界
+        { code: "100003", name: "火灾监测", color: "#00FFCC" }, // 火灾
+        { code: "100004", name: "激光云台", color: "#00B0B0" }, // 泄漏
         { code: "100001", name: "人员报警", color: "#FFD552" },
-        { code: "100002", name: "周界防护", color: "#02F2F9" },
-        { code: "100003", name: "火灾报警", color: "#007DFF" },
+        { code: "100002", name: "周界入侵", color: "#02F2F9" },
+        { code: "100003", name: "火灾监测", color: "#007DFF" },
       ],
       colors: [
         "#FF83DF",

src/views/components/dialog/AccessControlDialog.vue

@@ -139,7 +139,7 @@
           <el-col :span="8">
             <div class="search-box">
               <div class="search-item">
-                <span class="search-label">出入设备列表</span>
+                <span class="search-label">安防门禁列表</span>
                 <!-- <el-select
                   value-key="id"
                   v-model="department"
@@ -189,7 +189,7 @@
           <el-col :span="16">
             <div class="record_list">
               <div class="record_title">
-                <span>出入门记录</span>
+                <span>门禁记录</span>
                 <span class="more" @click="more">更多</span>
               </div>
 
@@ -280,7 +280,7 @@ export default {
       baseDialogConfig: {
         dialogId: "accessControlDialog",
         show: false,
-        title: "智能门禁",
+        title: "安防门禁",
         width: 1240,
         height: 680,
         center: true,

src/views/components/dialog/JGYTControlDialog/VideoControl.vue

@@ -159,7 +159,8 @@ export default {
         ptzSpeed: this.speed,
         canControl: this.curVideoData.ptzEnable,
       };
-      this.$EventBus.$emit("updateSendParam", param);
+      console.log("云台控制基础传参内容", param);
+      this.$EventBus.$emit("updateSendParamJGYT", param);
     },
     changePtzPresetParam(comm) {
       if (!this.commOpenning) {
@@ -177,7 +178,7 @@ export default {
         ptzPresetIndex: this.presetIndex,
         canControl: this.curVideoData.ptzEnable,
       };
-      this.$EventBus.$emit("updateSendParam", param);
+      this.$EventBus.$emit("updateSendParamJGYT", param);
     },
     /**
      * state  true代表回放模式
@@ -201,7 +202,7 @@ export default {
           "YYYY-MM-DD HH:mm:ss"
         );
       }
-      this.$EventBus.$emit("updateSendParam", param, true);
+      this.$EventBus.$emit("updateSendParamJGYT", param, true);
     },
   },
 };

src/views/components/dialog/JGYTControlDialog/VideoImageWindow.vue

@@ -0,0 +1,283 @@
+<template>
+  <div class="video_container">
+    <!-- 弹窗内容 -->
+    <div class="dialog_box">
+      <!-- 内容 -->
+      <div class="dialog_content_box" v-show="!!cameraId">
+        <div class="content_box">
+          <div class="img_box">
+            <img :src="url" v-if="url" />
+            <div class="image_slot" v-else>
+              <img
+                :src="require(`@/assets/imgs/panels/img_video@2x.png`)"
+                alt=""
+              />
+              <!-- <i class="el-icon-video-camera"></i> -->
+              <span>无信号</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="dialog_content_box"
+        v-show="cameraData && !cameraId"
+        style="color: #fff"
+      >
+        <!-- 暂无数据 -->
+        <!-- <img :src="require(`@/assets/imgs/maps/video_img_${cameraData.id}.png`)" alt="" /> -->
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Dayjs from "dayjs";
+import { mapGetters } from "vuex";
+export default {
+  name: "VideoImageWindow",
+  props: {
+    cameraId: {
+      type: String,
+      require: true,
+    },
+    cameraData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    ...mapGetters(["rtData"]),
+  },
+  watch: {
+    cameraId: {
+      handler(id) {
+        if (!!id) {
+          this.updateEvent({ id }, true);
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+    timer: {
+      handler(newVal) {
+        this.$EventBus.$off("updateSendParamJGYT");
+        this.$EventBus.$on("updateSendParamJGYT", (data, state) => {
+          if (data.id === this.cameraData.id) {
+            this.updateEvent(data, state);
+          }
+        });
+      },
+      deep: true,
+      immediate: true,
+    },
+    rtData: {
+      handler(newVal) {
+        // console.log(newVal)
+        if (!!this.cameraData.tags) {
+          if (!!this.cameraData.dataList) {
+            this.cameraData.dataList.forEach((item) => {
+              if (!!item.tag && !!newVal[item.tag]) {
+                item.value = newVal[item.tag].value + " " + item.unit;
+              }
+              if (item.isTag && !!newVal[item.value]) {
+              }
+            });
+          }
+        }
+      },
+      deep: true,
+    },
+  },
+  data() {
+    return {
+      largeScreen: false,
+      ws: null,
+      url: "",
+      lastUrl: "",
+      // 视频控制相关 start
+      commandConfig: {
+        //视频控制开关配置
+        direction: [
+          //方向
+          { type: "top-left", name: "左上", command: 25 },
+          { type: "top", name: "上", command: 21 },
+          { type: "top-right", name: "右上", command: 26 },
+          { type: "back", name: "左", command: 23 },
+          { type: "rank", name: "中", command: 0 },
+          { type: "right", name: "右", command: 24 },
+          { type: "bottom-left", name: "左下", command: 27 },
+          { type: "bottom", name: "下", command: 22 },
+          { type: "bottom-right", name: "右下", command: 28 },
+        ],
+        zoom: [
+          //放大缩小
+          { type: "zoom-in", name: "放大", command: 11 },
+          { type: "zoom-out", name: "缩小", command: 12 },
+        ],
+      },
+      startTime: null,
+      speed: 4,
+      presetIndex: 1,
+      // 视频控制 end
+      ndValue: "0",
+      timer: new Date(),
+    };
+  },
+  beforeDestroy() {
+    this.closeHandler();
+  },
+  created() {
+    this.init(JSON.stringify({ id: this.cameraId }));
+  },
+  mounted() {
+    const ndTopic = "DataCommunication/TagData/" + this.cameraData.tags?.ndTag;
+    const _this = this;
+    this.$store.dispatch("mqtt/subscribe", {
+      topic: [ndTopic],
+      onMessage: (topic, message, packet) => {
+        // console.log(topic);
+        const content = message.toString();
+        if (topic === ndTopic) {
+          //console.log(new Date(), content);
+          const data = JSON.parse(content);
+          _this.ndValue = data.Value;
+        }
+      },
+    });
+    this.$once("hook:beforeDestroy", () => {
+      this.$store.dispatch("mqtt/unsubscribe", [ndTopic]);
+    });
+  },
+  methods: {
+    // 放大缩小
+    init(str) {
+      // this.socketList[`ws_${this.cameraId}`];
+      this.ws = new WebSocket(VUE_APP_BASE_WS() + "/VideoOverWebSocket");
+      // this.ws = new WebSocket('wss://' + window.location.host + BASE_URL + '/VideoOverWebSocket')
+      this.ws.onmessage = (evt) => {
+        if (typeof evt.data === "string") {
+          // console.log(JSON.parse(evt.data).Msg)
+        } else {
+          let _this = this;
+          // const updateUrl = _.debounce(function () {
+          let currUrl = URL.createObjectURL(evt.data);
+          if (_this.lastUrl) URL.revokeObjectURL(_this.lastUrl);
+          _this.lastUrl = currUrl;
+          _this.url = currUrl;
+          // }, 500);
+          // updateUrl();
+        }
+      };
+      this.handleSend(str);
+      // console.log(window);
+    },
+    handleSend(str) {
+      if (this.ws.readyState === WebSocket.OPEN) {
+        this.ws.send(str);
+      } else if (this.ws.readyState == WebSocket.CONNECTING) {
+        // Wait for the open event, maybe do something with promises
+        // depending on your use case. I believe in you developer!
+        this.ws.addEventListener("open", () => this.handleSend(str));
+      } else {
+        // etc.
+      }
+    },
+    updateEvent(data, state) {
+      const param = JSON.stringify(data);
+      console.log("云台控制传参内容", param, state);
+      if (this.ws && this.ws.readyState == 1) {
+        this.handleSend(param);
+      } else {
+        this.init(param);
+      }
+      if (state) {
+        setTimeout(() => {
+          this.url = "";
+          if (this.lastUrl) URL.revokeObjectURL(this.lastUrl);
+          this.lastUrl = "";
+        }, 500);
+      }
+    },
+    closeHandler() {
+      console.log("close video websocket");
+      this.ws && this.ws.close();
+      setTimeout(() => {
+        if (this.url) URL.revokeObjectURL(this.url);
+        this.url = "";
+        this.lastUrl = "";
+        this.ws &&
+          (this.ws.onclose = (evt) => {
+            // this.ws = null;
+            console.log("websocket已关闭");
+          });
+      }, 500);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.video_container {
+  pointer-events: auto;
+  width: 100%;
+  height: 100%;
+  .dialog_box {
+    // margin-top: 10px;
+    width: 100%;
+    // height: calc(100% - 10px);
+    height: 100%;
+    border: 1px solid #39b5ff;
+
+    .dialog_content_box {
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      margin: 0 auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .content_box {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        .img_box {
+          width: 100%;
+          height: 100%;
+          &.comm_ptz {
+            width: 75%;
+          }
+        }
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: fill;
+        // display: block;
+      }
+      .image_slot {
+        width: 100%;
+        height: 100%;
+        // background-color: #f5f7fa;
+        color: #f5f7fa;
+        font-size: 24px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        font-weight: 500;
+        img {
+          width: 96px;
+          height: 65px;
+        }
+        span {
+          margin-top: 10px;
+          font-family: MicrosoftYaHei;
+          font-size: 13px;
+          color: #7ea0ca;
+          letter-spacing: 1px;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/components/dialog/JGYTControlDialog/index.vue

@@ -34,17 +34,18 @@
               <base-table-list :tableConfig="tableConfig" />
             </div>
           </el-col> -->
-          <el-col class="jgyt_video" :span="12">
+          <el-col class="jgyt_video" :span="10">
             <div class="select">
               <div class="select_title">
-                泄漏检测
+                激光云台
                 <el-select
                   value-key="id"
                   v-model="cameraInfo1"
                   style="width: 220px"
                   size="mini"
                   clearable
-                  placeholder="请选择摄像头"
+                  placeholder="请选择"
+                  @change="setCamera($event)"
                 >
                   <el-option
                     v-for="item in cameraList"
@@ -80,17 +81,18 @@
               </div>
             </div>
           </el-col>
-          <el-col class="jgyt_video" :span="12">
+          <el-col class="jgyt_video" :span="10">
             <div class="select">
               <div class="select_title">
-                泄漏检测
+                可操作激光云台
                 <el-select
                   value-key="id"
                   v-model="cameraInfo2"
                   style="width: 220px"
                   size="mini"
                   clearable
-                  placeholder="请选择摄像头"
+                  placeholder="请选择"
+                  @change="setCamera($event)"
                 >
                   <el-option
                     v-for="item in cameraList"
@@ -126,9 +128,30 @@
               </div>
             </div>
           </el-col>
-          <!-- <el-col :span="4">
+          <el-col :span="4">
+            <!-- <div class="select">
+              <div class="select_title">
+                当前设备
+                <el-select
+                  value-key="id"
+                  v-model="cameraInfo"
+                  style="width: 120px"
+                  size="mini"
+                  clearable
+                  placeholder="请选择"
+                  @change="setCamera($event)"
+                >
+                  <el-option
+                    v-for="item in cameraList"
+                    :key="item.id"
+                    :value="item"
+                    :label="item.name"
+                  ></el-option>
+                </el-select>
+              </div>
+            </div> -->
             <video-control :curVideoData="cameraInfo" />
-          </el-col> -->
+          </el-col>
         </el-row>
         <el-row :key="refreshKey">
           <el-col :span="24">
@@ -151,7 +174,7 @@
 import Vue from "vue";
 import BaseTableList from "@/views/components/base/BaseTableList";
 import BaseDragBgDialog from "@/views/components/base/BaseDragBgDialog.vue";
-import VideoImageWindow from "@/views/components/dialog/VideoImageWindow.vue";
+import VideoImageWindow from "./VideoImageWindow.vue";
 import { dealAlarm } from "@/API/common";
 import { getDepartmentByPid } from "@/API/alarm";
 import { getJGYTList, getJGYTAlarmList } from "@/API/JGYT";
@@ -172,6 +195,7 @@ export default {
         this.baseDialogConfig.show = newVal;
         if (newVal) {
           this.filterInfo();
+          this.cameraInfo = { id: "1" };
         }
       },
       // deep: true,
@@ -221,8 +245,8 @@ export default {
       baseDialogConfig: {
         dialogId: "jgytControlDialog",
         show: false,
-        title: "泄漏检测",
-        width: 1250,
+        title: "激光云台",
+        width: 1400,
         height: 724,
         center: true,
         zIndex: 10,
@@ -264,6 +288,9 @@ export default {
       cameraList: [{ id: "1", name: "" }],
       jgyt1: {},
       jgyt2: {},
+      cameraInfo: {
+        id: "1",
+      },
       cameraInfo1: {
         id: "1",
       },
@@ -290,6 +317,10 @@ export default {
   },
   mounted() {},
   methods: {
+    setCamera(e) {
+      console.log("当前设备", e);
+      this.cameraInfo = e;
+    },
     refresh() {
       this.refreshKey++;
     },
@@ -312,6 +343,7 @@ export default {
           setTimeout(() => {
             this.cameraInfo1 = this.cameraList[0];
             this.cameraInfo2 = this.cameraList[this.cameraList.length - 1];
+            this.cameraInfo = this.cameraList[this.cameraList.length - 1];
           }, 300);
         }
         // console.log("激光云台摄像头列表",this.cameraList,this.cameraInfo1,this.cameraInfo2);
@@ -499,6 +531,15 @@ export default {
     .select_title {
       padding: 6px 6px 6px 16px;
     }
+    .select {
+      text-align: left;
+      font-size: 0.083333rem /* 16/192 */;
+      line-height: 30px /* 50/192 */;
+      color: #fff;
+      .select_title {
+        padding: 6px;
+      }
+    }
   }
   .jgyt_video {
     padding-left: 10px;

src/views/components/dialog/PipeMileageDialog/DateTimeBar.vue

@@ -0,0 +1,320 @@
+<template>
+  <div :id="baseConfig.ids" :style="{ width: width, height: height }"></div>
+</template>
+<script>
+import resize from "@/views/components/chart/resize";
+export default {
+  props: {
+    data: {
+      default: () => ({
+        date: [],
+        seriesData: [],
+        chartType: "",
+        limitNumber: 30,
+      }),
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "100%",
+    },
+    baseConfig: {
+      default: function () {
+        return {
+          ids: "EchartsBar",
+          title: "",
+          unit: "人",
+        };
+      },
+    },
+  },
+  mixins: [resize],
+  data() {
+    return {
+      chart: null,
+      colorConfig: [
+        {
+          name: "人员报警",
+          code: "100001",
+          color: "#FF83DF",
+        },
+        {
+          name: "周界报警",
+          code: "100002",
+          color: "#8023FF",
+        },
+        {
+          name: "火灾报警",
+          code: "100003",
+          color: "#00ACFF",
+        },
+        {
+          name: "门禁报警",
+          code: "100006",
+          color: "#39CD1A",
+        },
+        {
+          name: "生产报警",
+          code: "100010",
+          color: "#F8E71C",
+        },
+        {
+          name: "阴保报警",
+          code: "100011",
+          color: "#EC576A",
+        },
+      ],
+      colors: [
+        "#FF83DF",
+        "#8023FF",
+        "#0064FF",
+        "#00ACFF",
+        "#50E3C2",
+        "#39CD1A",
+        "#B8E986",
+        "#F8E71C",
+        "#FF9F00",
+        "#EC576A",
+      ],
+      dataZoomMix: 0,
+      chartType: "line",
+    };
+  },
+  mounted() {
+    this.drawChart();
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  watch: {
+    data: {
+      //深度监听，可监听到对象、数组的变化
+      handler(newVal) {
+        let length = newVal.date.length;
+        //显示数据数量
+        if (newVal.limitNumber === 0) {
+          this.dataZoomMix = 0;
+        } else {
+          if (length > newVal.limitNumber) {
+            this.dataZoomMix = (1 - newVal.limitNumber / length) * 100;
+          } else {
+            this.dataZoomMix = 0;
+          }
+        }
+        //默认图表类型
+        if (newVal.chartType || newVal.chartType === "") {
+          this.chartType = "bar";
+        } else {
+          this.chartType = "line";
+        }
+        // console.log(this.dataZoomMix);
+        this.$nextTick(() => {
+          this.chart.clear();
+          this.drawChart();
+        });
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    drawChart() {
+      //$("#你的画布名称").removeAttr("_echarts_instance_").empty()
+      this.chart = this.$echarts.init(
+        document.getElementById(this.baseConfig.ids)
+      );
+      this.chart.off("click");
+      let option = {
+        title: {
+          show: false,
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          top: "10%",
+          bottom: "15%",
+          containLabel: true,
+        },
+        toolbox: {
+          feature: {
+            // magicType: {
+            //   show: true,
+            //   type: ["line", "bar"],
+            // },
+            // restore: { show: true },
+            // saveAsImage: { show: true },
+            myTool1: {
+              show: true,
+              title: "切换折线图",
+              icon: "path://M193.422222 648.533333l-45.511111-45.511111L398.222222 358.4l199.111111 199.111111 347.022223-352.711111 45.511111 45.511111-392.533334 386.844445L398.222222 438.044444z",
+              onclick: () => {
+                this.chartType = "line";
+                this.chart.clear();
+                this.drawChart();
+              },
+            },
+            myTool2: {
+              show: true,
+              title: "切换柱状图",
+              icon: "path://M194.56 386.048q31.744 0 46.592 19.456t14.848 43.008l0 447.488-192.512 0 0-443.392q0-31.744 19.968-49.152t43.52-17.408l67.584 0zM514.048 134.144q27.648 0 44.032 16.896t16.384 40.448l0 704.512-191.488 0 0-702.464q0-15.36 6.144-26.624t15.36-18.432 20.48-10.752 20.48-3.584l68.608 0zM832.512 577.536q9.216 0 19.968 5.12t20.48 14.336 16.384 20.992 6.656 25.088l0 252.928-191.488 0 0-250.88q0-11.264 4.608-23.552t12.8-22.016 19.456-15.872 24.576-6.144l66.56 0z",
+              onclick: () => {
+                this.chartType = "bar";
+                this.chart.clear();
+                this.drawChart();
+              },
+            },
+          },
+          iconStyle: {
+            borderColor: "#fff",
+          },
+          emphasis: {
+            iconStyle: {
+              borderColor: "#409EFF",
+            },
+          },
+        },
+        dataZoom: [
+          {
+            show: true,
+            start: this.dataZoomMix,
+            end: 100,
+            height: 20,
+            bottom: 2,
+            textStyle: {
+              color: "#fff",
+            },
+          },
+        ],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "line",
+            lineStyle: {
+              type: "dashed",
+            },
+          },
+          padding: 10,
+          textStyle: {
+            fontSize: 12,
+          },
+        },
+        color: [
+          "#00ACFF",
+          "#FF83DF",
+          "#8023FF",
+          "#0064FF",
+          "#50E3C2",
+          "#39CD1A",
+          "#B8E986",
+          "#F8E71C",
+          "#FF9F00",
+          "#EC576A",
+        ],
+        legend: {
+          top: 2,
+          itemWidth: 24,
+          textStyle: {
+            color: "#fff",
+          },
+        },
+        xAxis: [
+          {
+            name:"里程（km）",
+            type: "category",
+            data: this.data.date,
+            axisLabel: {
+              textStyle: {
+                color: "#fff",
+              },
+              margin: 10,
+              // interval: 0,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#99FFFA",
+              },
+            },
+          },
+        ],
+        yAxis: {
+          name:"高程（m）",
+          axisTick: {
+            show: true,
+          },
+          axisLabel: {
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#99FFFA",
+            },
+          },
+          splitLine: {
+            show: false,
+            // interval: 4,
+          },
+          minInterval: 1,
+          boundaryGap: [0, "5%"],
+        },
+        series: this.data.seriesData.map((item, index) => {
+          if (this.chartType === "bar") {
+            return {
+              name: item.name,
+              stack: "total",
+              type: this.chartType,
+              barMaxWidth: 30,
+              itemStyle: {
+                normal: {
+                  opacity: 0.8,
+                },
+                emphasis: {
+                  opacity: 1,
+                },
+              },
+              data: item.data,
+              markPoint: {
+                data: item.markPointData,
+              },
+            };
+          } else {
+            return {
+              name: item.name,
+              type: this.chartType,
+              itemStyle: {
+                normal: {
+                  opacity: 0.8,
+                },
+                emphasis: {
+                  opacity: 1,
+                },
+              },
+              data: item.data,
+              markPoint: {
+                data: item.markPointData,
+              },
+            };
+          }
+        }),
+      };
+      // this.chart.clear();
+      this.chart.setOption(option);
+      this.chart.on("click", (params) => {
+        this.$emit("handleChartClick", params);
+      });
+    },
+  },
+};
+</script>

src/views/components/dialog/PipeMileageDialog/index.vue

@@ -0,0 +1,306 @@
+<template>
+  <base-drag-bg-dialog
+    :dialogConfig="baseDialogConfig"
+    @handleClose="closeDialog"
+    @onActivated="onActivated"
+  >
+    <!-- 弹窗内容 -->
+    <div class="dialog_box">
+      <!-- 内容 -->
+      <div class="dialog_content_box">
+        <div class="chart-box">
+          <div class="dateTime-chart">
+            <!-- <div class="chart-title">
+              {{ baseDialogConfig.title }}
+            </div> -->
+            <el-row class="chart-row">
+              <el-col>
+                <date-time-bar
+                  v-if="statisticData"
+                  :data="statisticData"
+                  :baseConfig="{ ids: 'stackBarChart', unit: '次' }"
+                  @handleChartClick="handleChartClick"
+                />
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </div>
+    </div>
+  </base-drag-bg-dialog>
+</template>
+<script>
+import BaseDragBgDialog from "@/views/components/base/BaseDragBgDialog.vue";
+import { getMileageList } from "@/API/report";
+import DateTimeBar from "./DateTimeBar";
+import { mapGetters } from "vuex";
+export default {
+  name: "PipeMileageDialog",
+  components: { BaseDragBgDialog, DateTimeBar },
+  watch: {
+    "pipeMileageDialog.show": {
+      handler(newVal) {
+        this.baseDialogConfig.show = newVal;
+        if (this.statisticData.date.length == 0) {
+          this.getMileageList();
+        }
+        // if (newVal) {
+        //   this.openFullScreen()
+        // }
+      },
+      // deep: true,
+      immediate: true,
+    },
+  },
+  data() {
+    return {
+      BASE_URL,
+      baseDialogConfig: {
+        dialogId: "pipeMileage",
+        show: false,
+        title: "陕京四线里程高程图",
+        width: 1560,
+        height: 460,
+        center: true,
+        zIndex: 10,
+      },
+      statisticData: {
+        date: [],
+        seriesData: [
+          {
+            data: [],
+            name: "高程",
+            code: "100006",
+            markPointData: [],
+          },
+        ],
+        chartType: "line",
+        limitNumber: 0,
+      },
+    };
+  },
+  computed: {
+    ...mapGetters(["pipeMileageDialog"]),
+  },
+  created() {},
+  mounted() {
+    this.getMileageList();
+  },
+  methods: {
+    closeDialog() {
+      this.$store.dispatch("dialog/setPipeMileageDialog", {
+        show: false,
+        dialogMsg: {},
+        type: "",
+      });
+    },
+    async getMileageList() {
+      try {
+        const res = await getMileageList({
+          pageSize: 10000000,
+          pageIndex: 1,
+          listOrder: ["field001,asc"],
+          pageId: "822794755799785472",
+        });
+        if (res.code === 20000) {
+          let mileage = [];
+          let data = [];
+          let points = [];
+          res.data.content.forEach((item, index) => {
+            mileage.push(item.field002);
+            data.push(item.field003);
+            if (item.field004) {
+              points.push({
+                yAxis: item.field003,
+                xAxis: index,
+                value: item.field004,
+              });
+            }
+          });
+          this.statisticData.date = mileage;
+          this.statisticData.seriesData[0].data = data;
+          this.statisticData.seriesData[0].markPointData = points;
+        }
+        console.log("图表信息：", this.statisticData);
+        // 刷新报警列表页
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    onActivated() {
+      // console.log("aaa");
+      this.$nextTick(() => {
+        this.$refs.dealContent.focus();
+      });
+    },
+    // 图表的点击操作
+    handleChartClick(params) {
+      if (params.seriesType === "bar") {
+        let selectTime = params.name.replace(
+          /(\d{4}).(\d{1,2}).(\d{1,2}).+/gm,
+          "$1-$2-$3"
+        );
+        this.query.tags.dateTag = params.name;
+        this.queryTags.find((tag) => tag.type === "dateTag").name = params.name;
+        this.getCacheData();
+      }
+    },
+    openFullScreen() {
+      const loading = this.$loading({
+        lock: true,
+        text: "Loading",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      setTimeout(() => {
+        loading.close();
+      }, 800);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.dialog_box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 30px 10px 0;
+  pointer-events: auto;
+  .dialog_content_box {
+    width: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .search-box {
+      width: 100%;
+      display: flex;
+      padding: 0.052083rem /* 10/192 */ 0;
+      color: #fff;
+      .search-item {
+        display: flex;
+        .search-label {
+          display: inline-block;
+          width: 0.28125rem /* 54/192 */;
+          font-size: 0.072917rem /* 14/192 */;
+          line-height: 0.145833rem /* 28/192 */;
+          text-align: center;
+        }
+        .search-date.el-input__inner {
+          width: 1.5625rem /* 300/192 */;
+          height: 0.145833rem /* 28/192 */;
+          border-radius: 0;
+        }
+
+        .el-select {
+          margin-right: 0.052083rem /* 10/192 */;
+          ::v-deep .el-input__inner {
+            width: 0.520833rem /* 100/192 */;
+            height: 0.145833rem /* 28/192 */;
+            border-radius: 0;
+
+            // padding-right: 0.182292rem /* 35/192 */;
+          }
+
+          ::v-deep .el-input__icon {
+            line-height: 0.145833rem /* 28/192 */;
+          }
+        }
+      }
+      .search-btn {
+        box-sizing: border-box;
+        width: 0.145833rem /* 28/192 */;
+        height: 0.145833rem /* 28/192 */;
+        line-height: 0.145833rem /* 28/192 */;
+        text-align: center;
+        justify-content: right;
+        color: #fff;
+        font-size: 0.072917rem /* 14/192 */;
+        cursor: pointer;
+        border: 0.005208rem /* 1/192 */ solid #5bd6ff;
+        border-radius: 0;
+        &:hover {
+          border-color: #ccc;
+        }
+        img {
+          width: 0.083333rem /* 16/192 */;
+          height: 0.083333rem /* 16/192 */;
+        }
+        &:last-child {
+          margin-left: 10px;
+        }
+      }
+    }
+    .chart-box {
+      .chart-title {
+        height: 50px;
+        line-height: 50px;
+        font-size: 16px;
+        font-weight: 500;
+        color: #fff;
+        .title-icon {
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          background: url("~@/assets/imgs/dialog/img_block.png") center
+            no-repeat;
+          box-shadow: 0 0 6px 1px #ffe175;
+          margin: 0 6px;
+        }
+        .title-count {
+          color: #ffc800;
+        }
+        .el-tag {
+          margin-right: 10px;
+          // background-color: rgba(0, 0, 0, 0.1);
+          // border-color: rgba(4, 42, 47, 0.4);
+          // color: #fff;
+        }
+      }
+      .chart-query {
+        margin-left: 20px;
+        .el-radio-group {
+          ::v-deep .el-radio__label {
+            font-size: 12px;
+            padding-left: 5px;
+          }
+          ::v-deep .el-radio {
+            color: #fff;
+            margin-right: 16px;
+          }
+          ::v-deep .el-radio__input.is-checked + .el-radio__label {
+            color: #fff;
+          }
+          ::v-deep .el-radio__inner {
+            width: 12px;
+            height: 12px;
+            background-color: rgba(0, 0, 0, 0.1);
+          }
+          ::v-deep .el-radio__input.is-checked .el-radio__inner {
+            background: rgba(4, 42, 47, 0.4);
+            border-color: #76c1e1;
+          }
+        }
+      }
+      .dateTime-chart {
+        .el-col {
+          height: 330px;
+        }
+      }
+      .split-line {
+        width: 100%;
+        height: 6px;
+        background: url("~@/assets/imgs/dialog/split_line.png") center no-repeat;
+        background-size: contain;
+        margin: 20px auto 10px;
+      }
+      .rank-chart {
+        .el-col {
+          height: 300px;
+        }
+        .scatter-box {
+          height: 310px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/stationMap/components/AlarmStatisticsPanel/statisticsChart.vue

@@ -33,9 +33,9 @@ export default {
       chart: null,
       // color: ['rgba(143,223,254,0.4)', 'rgba(0,168,255,0.4)'],
       colorConfig: [
-        { code: "100001", name: "人员报警", color: "#F81C1C" },
-        { code: "100002", name: "周界防护", color: "#F8E71C" },
-        { code: "100003", name: "火灾报警", color: "#1fb9ff" },
+        { code: "100001", name: "人员定位", color: "#F81C1C" },
+        { code: "100002", name: "周界入侵", color: "#F8E71C" },
+        { code: "100003", name: "火灾监测", color: "#1fb9ff" },
       ],
     };
   },

src/views/stationMapTKT/components/TypeStatistics/PieChart.vue

@@ -33,9 +33,9 @@ export default {
       chart: null,
       // color: ['rgba(143,223,254,0.4)', 'rgba(0,168,255,0.4)'],
       colorConfig: [
-        { code: '100001', name: '人员报警', color: '#FFD552' },
-        { code: '100002', name: '周界防护', color: '#02F2F9' },
-        { code: '100003', name: '火灾报警', color: '#007DFF' },
+        { code: '100001', name: '人员定位', color: '#FFD552' },
+        { code: '100002', name: '周界入侵', color: '#02F2F9' },
+        { code: '100003', name: '火灾监测', color: '#007DFF' },
       ],
       colors: [
         '#FF83DF',

src/views/videoMonitorType/components/VideoConfig.vue

@@ -109,6 +109,7 @@ export default {
     'configOptions.splitScreenType': {
       handler(val) {
         console.log(val)
+        console.log("云台控制相关数据",this.configOptions)
         this.$nextTick(() => {
           setTimeout(() => {
             const data = this.screenConfig.find(item => item.type === val)

src/views/videoMonitorType/components/VideoControl.vue

@@ -1,37 +1,107 @@
 <template>
   <div class="videoControl-container">
     <div class="comm-panel">
-      <div class="btn-box" v-for="item of commandConfig.direction" :key="item.type">
-        <el-button type="primary" :icon="`el-icon-${item.type}`" size="mini" @mousedown.native="changePtzCommParam(item.command, false)" @mouseup.native="changePtzCommParam(item.command, true)"></el-button>
+      <div
+        class="btn-box"
+        v-for="item of commandConfig.direction"
+        :key="item.type"
+      >
+        <el-button
+          type="primary"
+          :icon="`el-icon-${item.type}`"
+          size="mini"
+          @mousedown.native="changePtzCommParam(item.command, false)"
+          @mouseup.native="changePtzCommParam(item.command, true)"
+        ></el-button>
       </div>
     </div>
     <div class="zoom-panel">
       <div class="btn-box" v-for="item of commandConfig.zoom" :key="item.type">
-        <el-button type="primary" :icon="`el-icon-${item.type}`" size="mini" @mousedown.native="changePtzCommParam(item.command, false)" @mouseup.native="changePtzCommParam(item.command, true)"></el-button>
+        <el-button
+          type="primary"
+          :icon="`el-icon-${item.type}`"
+          size="mini"
+          @mousedown.native="changePtzCommParam(item.command, false)"
+          @mouseup.native="changePtzCommParam(item.command, true)"
+        ></el-button>
       </div>
     </div>
     <div class="form_box">
       <el-form label-width="70px" size="small">
         <el-form-item label="速度" prop="speed">
-          <el-select class="myInput" size="mini" v-model="speed" placeholder="请选择速度" style="width: 100%">
-            <el-option v-for="item in Array.from({ length: 10 }, (item, index) => index + 1)" :key="item" :label="item" :value="item"></el-option>
+          <el-select
+            class="myInput"
+            size="mini"
+            v-model="speed"
+            placeholder="请选择速度"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in Array.from(
+                { length: 10 },
+                (item, index) => index + 1
+              )"
+              :key="item"
+              :label="item"
+              :value="item"
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="预置点" prop="presetIndex">
-          <el-select class="myInput" size="mini" v-model="presetIndex" placeholder="请选择预置点" style="width: 100%">
-            <el-option v-for="item in Array.from({ length: 255 }, (item, index) => index + 1)" :key="item" :label="item" :value="item"></el-option>
+          <el-select
+            class="myInput"
+            size="mini"
+            v-model="presetIndex"
+            placeholder="请选择预置点"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in Array.from(
+                { length: 255 },
+                (item, index) => index + 1
+              )"
+              :key="item"
+              :label="item"
+              :value="item"
+            ></el-option>
           </el-select>
         </el-form-item>
         <div class="btn_box">
-          <el-button type="primary" size="mini" @click="changePtzPresetParam(8)">设置</el-button>
-          <el-button type="primary" size="mini" @click="changePtzPresetParam(39)">转到</el-button>
+          <el-button type="primary" size="mini" @click="changePtzPresetParam(8)"
+            >设置</el-button
+          >
+          <el-button
+            type="primary"
+            size="mini"
+            @click="changePtzPresetParam(39)"
+            >转到</el-button
+          >
         </div>
         <el-form-item label="时间" prop="startTime">
-          <el-date-picker class="myInput" size="mini" v-model="startTime" type="datetime" placeholder="选择日期时间" style="width: 100%"></el-date-picker>
+          <el-date-picker
+            class="myInput"
+            size="mini"
+            v-model="startTime"
+            type="datetime"
+            placeholder="选择日期时间"
+            style="width: 100%"
+          ></el-date-picker>
         </el-form-item>
         <div class="btn_box">
-          <el-button type="primary" size="mini" @click="changePlayTypeParam(true)" :disabled="!startTime">回放</el-button>
-          <el-button type="primary" size="mini" @click="changePlayTypeParam(false)" :disabled="!startTime">实时</el-button>
+          <el-button
+            type="primary"
+            size="mini"
+            @click="changePlayTypeParam(true)"
+            :disabled="!startTime"
+            >回放</el-button
+          >
+          <el-button
+            type="primary"
+            size="mini"
+            @click="changePlayTypeParam(false)"
+            :disabled="!startTime"
+            >实时</el-button
+          >
         </div>
       </el-form>
     </div>
@@ -39,9 +109,9 @@
 </template>
 
 <script>
-import Dayjs from 'dayjs'
+import Dayjs from "dayjs";
 export default {
-  name: 'VideoControl',
+  name: "VideoControl",
   props: {
     curVideoData: {
       type: Object,
@@ -56,35 +126,39 @@ export default {
         //视频控制开关配置
         direction: [
           //方向
-          { type: 'top-left', name: '左上', command: 25 },
-          { type: 'top', name: '上', command: 21 },
-          { type: 'top-right', name: '右上', command: 26 },
-          { type: 'back', name: '左', command: 23 },
-          { type: 'rank', name: '中', command: 0 },
-          { type: 'right', name: '右', command: 24 },
-          { type: 'bottom-left', name: '左下', command: 27 },
-          { type: 'bottom', name: '下', command: 22 },
-          { type: 'bottom-right', name: '右下', command: 28 },
+          { type: "top-left", name: "左上", command: 25 },
+          { type: "top", name: "上", command: 21 },
+          { type: "top-right", name: "右上", command: 26 },
+          { type: "back", name: "左", command: 23 },
+          { type: "rank", name: "中", command: 0 },
+          { type: "right", name: "右", command: 24 },
+          { type: "bottom-left", name: "左下", command: 27 },
+          { type: "bottom", name: "下", command: 22 },
+          { type: "bottom-right", name: "右下", command: 28 },
         ],
         zoom: [
           //放大缩小
-          { type: 'zoom-in', name: '放大', command: 11 },
-          { type: 'zoom-out', name: '缩小', command: 12 },
+          { type: "zoom-in", name: "放大", command: 11 },
+          { type: "zoom-out", name: "缩小", command: 12 },
         ],
       },
       startTime: null,
       speed: 5,
       presetIndex: 1,
       // 视频控制 end
-    }
+    };
   },
   mounted() {},
   methods: {
     changePtzCommParam(comm, stop) {
-      if (!comm) return
+      if (!comm) return;
       if (!this.curVideoData.id) {
-        stop && this.$message.warning('请先选择视频窗口！')
-        return
+        stop && this.$message.warning("请先选择视频窗口！");
+        return;
+      }
+      if (!this.curVideoData.ptzEnable) {
+        stop && this.$message.warning("该视频不支持或未开启云台功能！");
+        return;
       }
       let param = {
         id: this.curVideoData.id,
@@ -92,43 +166,49 @@ export default {
         ptzStop: stop,
         ptzSpeed: this.speed,
         canControl: this.curVideoData.ptzEnable,
-      }
-      this.$EventBus.$emit('updateSendParam', param)
+      };
+      this.$EventBus.$emit("updateSendParam", param);
     },
     changePtzPresetParam(comm) {
-      if (!comm) return
+      if (!comm) return;
       if (!this.curVideoData.id) {
-        this.$message.warning('请先选择视频窗口！')
-        return
+        this.$message.warning("请先选择视频窗口！");
+        return;
+      }
+      if (!this.curVideoData.ptzEnable) {
+        stop && this.$message.warning("该视频不支持或未开启云台功能！");
+        return;
       }
       let param = {
         id: this.curVideoData.id,
         ptzPreset: comm,
         ptzPresetIndex: this.presetIndex,
         canControl: this.curVideoData.ptzEnable,
-      }
-      this.$EventBus.$emit('updateSendParam', param)
+      };
+      this.$EventBus.$emit("updateSendParam", param);
     },
     /**
      * state  true代表回放模式
      */
     changePlayTypeParam(state) {
-      let param = { id: this.curVideoData.id }
+      let param = { id: this.curVideoData.id };
       if (!this.curVideoData.id) {
-        this.$message.warning('请先选择视频窗口！')
-        return
+        this.$message.warning("请先选择视频窗口！");
+        return;
       }
       if (state) {
         if (!this.startTime) {
-          this.$message.warning('请选择回放开始时间！')
-          return
+          this.$message.warning("请选择回放开始时间！");
+          return;
         }
-        param['startTime'] = Dayjs(this.startTime).format('YYYY-MM-DD HH:mm:ss')
+        param["startTime"] = Dayjs(this.startTime).format(
+          "YYYY-MM-DD HH:mm:ss"
+        );
       }
-      this.$EventBus.$emit('updateSendParam', param, true)
+      this.$EventBus.$emit("updateSendParam", param, true);
     },
   },
-}
+};
 </script>
 <style lang="less" scoped>
 .videoControl-container {