模型界面添加门禁图层，交互查看门禁监视；驾驶舱增加切换高程标注与场站分布按钮；增加场站阀室地理信息标注；增加里程高程图；页面配置调整

.gitignore

@@ -4,6 +4,8 @@ dist
 dist.zip
 dist.7z
 public/model
+public/static/tkt
+public/static/setting
 
 # local env files
 .env.local

public/js/config.js

@@ -10,7 +10,7 @@ const BASE_URL = '/yapi' //开发接口代理
 const HOME_DATA = {
   startDate: '2024-11-27',
   group: '国家管网集团北京管道公司',
-  company: '输油气分公司',
+  company: '内蒙古输油气分公司',
   curStation: '托克托压气站',
 }
 
@@ -138,6 +138,7 @@ const MQTT_CONFIG = {
     'Perimeter/#',
     'LaserPtz/#',
     'Risk/New',
+    'AccessControl/Log/#',
     'dashboard/risk/drawrisktime',
     'Visualization/DataComm/NewAlarm',
     'Visualization/Number/RecentlyLevelByDate',
@@ -617,7 +618,7 @@ const GY_STATIONS = [
     // webRTCUrl: "wss://dispatcher:1443/webrtc",
     // admin: "8889",
     // password: "123456",
-  },
+  }
 ]
 
 const GY_ZYQS = [

public/js/station.js

@@ -245,16 +245,16 @@ const STATION_CONFIG_2 = [
         picPath: '/imgs/yx_tkt.JPG',
         preTag: '',
         data: [
-          { name: '进站压力', value: '0', unit: 'Mpa', tag: '' },
-          { name: '出站压力', value: '0', unit: 'Mpa', tag: '' },
-          { name: '进站温度', value: '0', unit: '℃', tag: '' },
-          { name: '出站温度', value: '0', unit: '℃', tag: '' },
+          { name: '管道里程', value: '518240.2', unit: 'm', tag: '' },
+          { name: '经度', value: '111.260470840', unit: '', tag: '' },
+          { name: '纬度', value: '40.380258539', unit: '', tag: '' },
+          { name: '高程', value: '996.178', unit: 'm', tag: '' },
         ],
       },
       {
         id: 'point_2',
         name: '呼和浩特分输站',
-        type: 'value',
+        type: 'stationFS',
         left: 1060,
         top: 468,
         offsetX: 120,
@@ -266,10 +266,10 @@ const STATION_CONFIG_2 = [
         picPath: '/imgs/yx_hhht.JPG',
         preTag: '',
         data: [
-          { name: '进站压力', value: '0', unit: 'Mpa', tag: '' },
-          { name: '出站压力', value: '0', unit: 'Mpa', tag: '' },
-          { name: '进站温度', value: '0', unit: '℃', tag: '' },
-          { name: '出站温度', value: '0', unit: '℃', tag: '' },
+          { name: '管道里程', value: '0', unit: '', tmag: '' },
+          { name: '经度', value: '0', unit: '', tag: '' },
+          { name: '纬度', value: '0', unit: '', tag: '' },
+          { name: '高程', value: '0', unit: '', tmag: '' },
         ],
       },
       {
@@ -286,7 +286,12 @@ const STATION_CONFIG_2 = [
         buildId: '524944733819117568',
         picPath: '/imgs/yx_17.JPG',
         preTag: '',
-        data: [],
+        data: [
+          { name: '管道里程', value: '380840.4', unit: 'm', tag: '' },
+          { name: '经度', value: '110.789238923', unit: '', tag: '' },
+          { name: '纬度', value: '40.170114812', unit: '', tag: '' },
+          { name: '高程', value: '1075.633', unit: 'm', tag: '' },
+        ],
       },
       {
         id: 'point_4',
@@ -302,7 +307,12 @@ const STATION_CONFIG_2 = [
         buildId: '524944733819117568',
         picPath: '/imgs/yx_18.JPG',
         preTag: '',
-        data: [],
+        data: [
+          { name: '管道里程', value: '431736.2', unit: 'm', tag: '' },
+          { name: '经度', value: '111.050644990', unit: '', tag: '' },
+          { name: '纬度', value: '40.237420999', unit: '', tag: '' },
+          { name: '高程', value: '1020.847', unit: 'm', tag: '' },
+        ],
       },
       {
         id: 'point_5',
@@ -318,7 +328,12 @@ const STATION_CONFIG_2 = [
         buildId: '524944733819117568',
         picPath: '/imgs/yx_19.JPG',
         preTag: '',
-        data: [],
+        data: [
+          { name: '管道里程', value: '452140.6', unit: 'm', tag: '' },
+          { name: '经度', value: '111.112902993', unit: '', tag: '' },
+          { name: '纬度', value: '40.274858858', unit: '', tag: '' },
+          { name: '高程', value: '988.3670', unit: 'm', tag: '' },
+        ],
       },
       {
         id: 'point_6',
@@ -334,7 +349,12 @@ const STATION_CONFIG_2 = [
         buildId: '524944733819117568',
         picPath: '/imgs/yx_20.JPG',
         preTag: '',
-        data: [],
+        data: [
+          { name: '管道里程', value: '531108.2', unit: 'm', tag: '' },
+          { name: '经度', value: '111.436153642', unit: '', tag: '' },
+          { name: '纬度', value: '40.489591328', unit: '', tag: '' },
+          { name: '高程', value: '1007.164', unit: 'm', tag: '' },
+        ],
       },
       {
         id: 'point_7',
@@ -350,7 +370,12 @@ const STATION_CONFIG_2 = [
         buildId: '524944733819117568',
         picPath: '/imgs/yx_21.JPG',
         preTag: '',
-        data: [],
+        data: [
+          { name: '管道里程', value: '539723.4', unit: 'm', tag: '' },
+          { name: '经度', value: '111.639092670', unit: '', tag: '' },
+          { name: '纬度', value: '40.619999597', unit: '', tag: '' },
+          { name: '高程', value: '1025.127', unit: 'm', tag: '' },
+        ],
       },
       {
         id: 'point_8',
@@ -366,7 +391,12 @@ const STATION_CONFIG_2 = [
         buildId: '524944733819117568',
         picPath: '/imgs/yx_22.JPG',
         preTag: '',
-        data: [],
+        data: [
+          { name: '管道里程', value: '555860.5', unit: 'm', tag: '' },
+          { name: '经度', value: '111.861633940', unit: '', tag: '' },
+          { name: '纬度', value: '40.662374382', unit: '', tag: '' },
+          { name: '高程', value: '1065.356', unit: 'm', tag: '' },
+        ],
       },
       {
         id: 'point_9',
@@ -382,7 +412,12 @@ const STATION_CONFIG_2 = [
         buildId: '524944733819117568',
         picPath: '/imgs/yx_23.JPG',
         preTag: '',
-        data: [],
+        data: [
+          { name: '管道里程', value: '567902.1', unit: 'm', tag: '' },
+          { name: '经度', value: '112.045375766', unit: '', tag: '' },
+          { name: '纬度', value: '40.701167418', unit: '', tag: '' },
+          { name: '高程', value: '1129.733', unit: 'm', tag: '' },
+        ],
       },
     ],
     entries: [],

src/API/accessControl.js

@@ -23,4 +23,12 @@ export const getAccessLogList = data =>
     url: '/AccessControl/Log/GetList',
     data,
     notShowLoading: true,
+  })
+// 获取门禁区域人员列表信息
+export const getAreaPersonList = data =>
+  $http({
+    method: 'POST',
+    url: '/AccessControl/Log/GetAreaPersonList',
+    data,
+    notShowLoading: true,
   })

src/API/report.js

@@ -0,0 +1,10 @@
+import $http from '@/utils/request'
+
+// 获取报表信息
+export const getMileageList = data =>
+  $http({
+    method: 'POST',
+    url: 'customPage/page/getList',
+    data,
+    notShowLoading: true,
+  })

src/components/ImageVideo/CanvasVideo.vue

@@ -132,8 +132,8 @@ export default {
     // 初始化WebSocket
     initWebSocket() {
       try {
-        // const host = VUE_APP_BASE_WS() + '/VideoOverWebSocket'
-        const host = 'wss://' + window.location.host + BASE_URL + '/VideoOverWebSocket'
+        const host = VUE_APP_BASE_WS() + '/VideoOverWebSocket'
+        // const host = 'wss://' + window.location.host + BASE_URL + '/VideoOverWebSocket'
         this.ws = new WebSocket(host)
 
         Object.entries(this.wsEventHandlers).forEach(([event, handler]) => {

src/components/ImageVideo/index.vue

@@ -55,8 +55,8 @@ export default {
   },
   methods: {
     initWebSocket() {
-      // const host = VUE_APP_BASE_WS() + '/VideoOverWebSocket'
-      const host = 'wss://' + window.location.host + BASE_URL + '/VideoOverWebSocket'
+      const host = VUE_APP_BASE_WS() + '/VideoOverWebSocket'
+      // const host = 'wss://' + window.location.host + BASE_URL + '/VideoOverWebSocket'
       // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
       this.ws = new WebSocket(host)
       this.ws.onopen = this.websocketOnopen

src/components/ImageVideoORI/index.vue

@@ -268,8 +268,8 @@ export default {
   },
   methods: {
     init(str) {
-      // this.ws = new WebSocket(VUE_APP_BASE_WS() + "/VideoOverWebSocket");
-      this.ws = new WebSocket("wss://" + window.location.host + process.env.VUE_APP_BASE_API + "/VideoOverWebSocket");
+      this.ws = new WebSocket(VUE_APP_BASE_WS() + "/VideoOverWebSocket");
+      // this.ws = new WebSocket("wss://" + window.location.host + process.env.VUE_APP_BASE_API + "/VideoOverWebSocket");
       let _this = this;
       this.ws.onmessage = function (evt) {
         if (typeof evt.data === "string") {

src/store/getters.js

@@ -22,6 +22,7 @@ const getters = {
   serverTime: (state) => state.globalConfig.serverTime,
   mapMode: (state) => state.globalConfig.mapMode, //地图模式
   openLayer: (state) => state.globalConfig.openLayer,
+  stationMapLayer: (state) => state.globalConfig.stationMapLayer,
 
   // 弹窗相关
   visibleDialogs: (state) => state.dialog.visibleDialogs,
@@ -31,6 +32,7 @@ const getters = {
   oneKeyAlarmDialogs: (state) => state.dialog.oneKeyAlarmDialogs,
   alarmDetailDialog: (state) => state.dialog.alarmDetailDialog,
   layerDetailDialog: (state) => state.dialog.layerDetailDialog,
+  pipeMileageDialog: (state) => state.dialog.pipeMileageDialog,//管网高程图
 
   //模型部分
   departmentId: (state) => state.model.departmentId,

src/store/modules/dialog.js

@@ -18,6 +18,12 @@ const state = {
     dialogMsg: {},
     type: "",
   },
+  // 管网高程图窗口
+  pipeMileageDialog: {
+    show: false,
+    dialogMsg: {},
+    type: "",
+  },
   layerDetailDialog: {
     id: "",
     type: "",
@@ -141,6 +147,9 @@ const mutations = {
       type: "",
     };
   },
+  SET_PIPE_MILEAGE_DIALOG(state, data) {
+    state.pipeMileageDialog = data
+  },
   OPEN_LAYER_DETAIL_DIALOG(state, data) {
     const __VALUE__ = JSON.parse(JSON.stringify(data));
     state.layerDetailDialog = __VALUE__;
@@ -185,6 +194,9 @@ const actions = {
   closeAlarmDetailDialog({ commit }) {
     commit("CLOSE_ALARM_DETAIL_DIALOG");
   },
+  setPipeMileageDialog({ commit }, data) {
+    commit("SET_PIPE_MILEAGE_DIALOG", data);
+  },
   openVideoDialog({ commit }, data) {
     commit("OPEN_VIDEO_DIALOG", data);
   },

src/store/modules/globalConfig.js

@@ -38,6 +38,9 @@ const state = {
   openLayer: {
     name: '',
   },
+  stationMapLayer: {
+    type: 1
+  }
 }
 const mutations = {
   SET_SWITCHCONFIGSHOW(state, data) {//左侧开关栏显示
@@ -156,6 +159,9 @@ const mutations = {
   SET_OPENLAYER(state, data) {
     state.openLayer = data
   },
+  SET_STATIONMAPLAYER(state, data) {
+    state.stationMapLayer = data
+  },
 }
 const actions = {
   setSwitchConfigShow({ commit }, data) {
@@ -234,6 +240,9 @@ const actions = {
   setOpenLayer({ commit }, data) {
     commit('SET_OPENLAYER', data)
   },
+  setStationMapLayer({ commit }, data) {
+    commit('SET_STATIONMAPLAYER', data)
+  },
 }
 export default {
   namespaced: true,

src/store/modules/mqtt.js

@@ -21,7 +21,8 @@ const mutations = {
       username: MQTT_CONFIG.username,
       password: MQTT_CONFIG.password,
     }
-    const host = 'wss://' + window.location.host + BASE_URL + MQTT_CONFIG.host
+    const host = 'ws://' + window.location.host + BASE_URL + MQTT_CONFIG.host
+    // const host = 'wss://' + window.location.host + BASE_URL + MQTT_CONFIG.host
 
     console.log(new Date(), 'Connecting global mqtt client')
 

src/utils/index.js

@@ -43,10 +43,10 @@ export function _locate(xDist, yDist, c = { x: 108.4416707584088, y: 22.86248482
   // console.log(c, xDist, yDist);
   // console.log(c)
   const radius = 6378137 //坐标系球的半径  WGS84是6378137
-  let xOffset = -700 //x偏移量 单位mm  -7400;// -2700 tkt  -700 duyun   tkt2  0
-  let yOffset = 1600 //y偏移量 单位mm   1800;// 2000 tkt  1600 duyun  tkt2 1000 
-  // let xOffset = 0 //x偏移量 单位mm  -7400;// -2700 tkt  -700 duyun   tkt2  0
-  // let yOffset = 1000 //y偏移量 单位mm   1800;// 2000 tkt  1600 duyun  tkt2 1000 
+  // let xOffset = -700 //x偏移量 单位mm  -7400;// -2700 tkt  -700 duyun   tkt2  0
+  // let yOffset = 1600 //y偏移量 单位mm   1800;// 2000 tkt  1600 duyun  tkt2 1000 
+  let xOffset = -2700 //x偏移量 单位mm  -7400;// -2700 tkt  -700 duyun   tkt2  0
+  let yOffset = 2000 //y偏移量 单位mm   1800;// 2000 tkt  1600 duyun  tkt2 1000 
   //console.log("before", xDist, yDist)
   xDist = +xDist + xOffset
   yDist = +yDist + yOffset

src/views/Home.vue

@@ -17,6 +17,8 @@
     <contact-info-dialog />
     <!-- 报警详情弹窗 由vuex控制 -->
     <alarm-detail-dialog />
+    <!-- 管网高程弹窗 由vuex控制 -->
+    <pipe-mileage-dialog />
     <!-- 一键报警弹窗 由vuex控制 -->
     <onekey-110-dialog />
     <!-- 防爆扩音弹窗 由vuex控制 -->
@@ -67,6 +69,7 @@ import SoundDialog from "@/views/components/dialog/SoundDialog";
 import AccessControlDialog from "@/views/components/dialog/AccessControlDialog";
 import JGYTControlDialog from "@/views/components/dialog/JGYTControlDialog";
 import AlarmDetailDialog from "@/views/components/dialog/AlarmDetailDialog";
+import PipeMileageDialog from "@/views/components/dialog/PipeMileageDialog";
 import AlarmAudioDialog from "@/views/components/dialog/AlarmAudioDialog";
 import RiskTipDialog from "@/views/components/dialog/RiskTipDialog";
 import BaseBlankDialog from "@/views/components/dialog/BaseBlankDialog";
@@ -87,6 +90,7 @@ export default {
     CardDetailDialog,
     ContactInfoDialog,
     AlarmDetailDialog,
+    PipeMileageDialog,
     Onekey110Dialog,
     PersonListDialog,
     SoundDialog,
@@ -216,6 +220,7 @@ export default {
         "LaserPtz/#",
         "Message/New",
         "Alarm/List",
+        "AccessControl/Log",
       ];
       // const topics = ['Message/New']
       this.$store.dispatch("mqtt/subscribe", {
@@ -274,21 +279,27 @@ export default {
               //   });
               // }, 200);
             }
+          } else if (topic.startsWith("AccessControl/Log")) {
+            const data = JSON.parse(content);
+            console.log("门禁事件数据", data);
+            if (this.$refs.routerView.$options.name === "basePage") {
+              this.$refs.routerView.pushZnmjStatus(data);
+            }
           } else if (topic.startsWith("Perimeter/")) {
             const data = JSON.parse(content);
-            console.log("周界报警数据", data);
+            // console.log("周界报警数据", data);
             if (this.$refs.routerView.$options.name === "basePage") {
               this.$refs.routerView.pushPerimeterStatus(data);
             }
           } else if (topic.startsWith("Fire/")) {
             const data = JSON.parse(content);
-            console.log("火灾报警数据", data);
+            // console.log("火灾报警数据", data);
             if (this.$refs.routerView.$options.name === "basePage") {
               this.$refs.routerView.pushFireStatus(data);
             }
           } else if (topic.startsWith("LaserPtz/")) {
             const data = JSON.parse(content);
-            console.log("JGYT报警数据", data);
+            // console.log("JGYT报警数据", data);
             if (this.$refs.routerView.$options.name === "basePage") {
               setTimeout(() => {
                 this.$refs.routerView.pushJGYTStatus(data);

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

@@ -312,6 +312,7 @@ export default {
       const { type, name, layerId } = layer;
       if (
         [
+          "智能门禁",
           "防爆扩音",
           "埋地泄漏",
           "监控探头",

src/views/basePage/components/videoWindow/VideoImageWindow.vue

@@ -363,7 +363,8 @@ export default {
     },
     init(str) {
       // this.socketList[`ws_${this.cameraId}`];
-      this.ws = new WebSocket('wss://' + window.location.host + BASE_URL + '/VideoOverWebSocket')
+      this.ws = new WebSocket('ws://' + window.location.host + BASE_URL + '/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)

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

@@ -0,0 +1,188 @@
+import { Entity, NearFarScalar, PolylineDashMaterialProperty, DistanceDisplayCondition, Cartesian3, Color, PropertyBag } from "cesium";
+import { getAccessInfoList, getAreaPersonList, getAccessLogList } 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: 'znmj',
+  data() {
+    return {
+      znmjDataSourceName: 'znmj',
+      znmjDataSourceShow: false,
+      znmjTagsData: [],
+    }
+  },
+  computed: {
+    ...mapGetters(['buildId', 'buildInfo']),
+  },
+  watch: {
+    buildId: {
+      handler(val) {
+        console.log('智能门禁图层建筑变化', val)
+        if (!val) return
+        setTimeout(() => {
+          this.getZnmjTagsData()
+        }, 2000)
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    setTimeout(() => {
+      this.initZnmj()
+    }, 1000)
+  },
+  methods: {
+    /**
+     * 初始化
+     */
+    initZnmj() {
+      this.$store.dispatch('globalConfig/pushSwitchConfig', {
+        type: this.znmjDataSourceName,
+        label: '智能门禁',
+        name: '智能门禁',
+        show: this.znmjDataSourceShow,
+        selected: false,
+        elements: this.znmjTagsData,
+      })
+    },
+    async getZnmjTagsData() {
+      try {
+        let p = { enable: true, buildId: this.buildInfo.positioningBuildId }
+        let res = await getAccessInfoList(p)
+        // console.log('智能门禁数据', res)
+        this.znmjTagsData = res.data.content || []
+        this.$store.dispatch('globalConfig/updateSwitchConfig', {
+          type: this.znmjDataSourceName,
+          label: '智能门禁',
+          name: '智能门禁',
+          show: this.znmjDataSourceShow,
+          selected: false,
+          elements: this.znmjTagsData,
+        })
+        this.addZnmjTags()
+      } catch (err) {
+        console.log(err)
+      }
+    },
+    addZnmjTags() {
+      let dataSource = addNewDatasource('layer_' + this.znmjDataSourceName)
+      console.log("智能门禁基础信息", this.znmjTagsData);
+      this.znmjTagsData.forEach(d => {
+        d.GPSPoints = this.transPosition([{ x: d.location.x, y: d.location.y, z: d.height }])
+        dataSource.entities.add(
+          new Entity({
+            id: d.id,
+            name: d.name,
+            show: false,
+            position: Cartesian3.fromDegrees(...d.GPSPoints[0]),
+            billboard: {
+              image: '/imgs/camera/icon_ZJ_nor@2x.png',
+              scale: 0.5, //固定值
+              scaleByDistance: new NearFarScalar(10, 1, 10000, 1),
+            },
+            polyline: {
+              positions: Cartesian3.fromDegreesArrayHeights([
+                d.GPSPoints[0][0],
+                d.GPSPoints[0][1],
+                d.GPSPoints[0][2],
+                d.GPSPoints[0][0],
+                d.GPSPoints[0][1],
+                0,
+              ]),
+              width: 2,
+              material: new PolylineDashMaterialProperty({
+                color: Color.CYAN,
+              }),
+            },
+            properties: new PropertyBag({
+              type: 'znmj',
+              details: d,
+              isZnmj: true,
+            }),
+          })
+        )
+      })
+    },
+    async pushZnmjStatus(data) {
+      if (data.id) {
+        if (data?.buildId === this.buildInfo?.positioningBuildId) {
+          // console.log("聚焦报警");
+          this.animationZnmj(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.animationZnmj(data)
+          }, 3000)
+        }
+      }
+    },
+    animationZnmj(data) {
+      const viewer = getViewer()
+      const dataSource = viewer.dataSources.getByName('layer_znmj')
+      if (dataSource.length > 0) {
+        let item = dataSource[0].entities.getById(data.accessControl.id)
+        console.log(item, "地图实体数据", item.properties.details._value, '接收参数', data);
+        if (!!item) {
+          const { longitude, latitude } = this.buildInfo.gpsCoordinate0
+          const gpsAlarmPoint = _locate(item.properties.details._value.location.x, item.properties.details._value.location.y, { x: longitude, y: latitude })
+          //地图元素
+          item.show = true
+          setTimeout(() => {
+            item.billboard = {
+              image: '/imgs/camera/icon_ZJ_nor@2x.png',
+              width: 50,
+              height: 50,
+              // verticalOrigin: VerticalOrigin.BOTTOM,
+              distanceDisplayCondition: new DistanceDisplayCondition(0, 700.0),
+            }
+            item.position = Cartesian3.fromDegrees(gpsAlarmPoint.x, gpsAlarmPoint.y, item.properties.details._value.height)
+            //视角漂移
+            // flyToByViewer(item)
+            flyToPerspective({
+              destination: Cartesian3.fromDegrees(gpsAlarmPoint.x + 0.00026, gpsAlarmPoint.y - 0.0011, 100),
+              orientation: {
+                pitch: -0.549380381243696,
+                heading: 6.181746598877237,
+                roll: 0.0000025332551629730915, //倾斜视角坐标需要加偏移量
+              },
+              duration: 1.5,
+            })
+            //增加属性
+            // item.properties.details._value.alarmPoint = data.alarmPoint
+            // item.properties.details._value.alarmType = data.alarmType
+            // item.properties.details._value.camera = data.camera
+            // item.properties.details._value.alarmState = 1
+            // item.properties.details._value.alarmStatus = true
+            // item.properties.details._value.alarmPosition = [gpsAlarmPoint.x, gpsAlarmPoint.y, item.properties.details._value.height]
+            // console.log(item.properties.details._value, "66666666666666666666666666666");
+            //数据弹窗
+            // this.$store.dispatch('globalConfig/updateAlarmDataObj', {
+            //   fire: [item.properties.details._value],
+            // })
+            //视频弹窗
+            // if (!!data?.camera?.id) {
+            //   this.$store.dispatch('dialog/openVideoDialog', data.accessControl.ccameraID)
+            // }
+          }, 1000)
+
+        }
+      }
+    },
+    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/mixins/LoadLayer/index.js

@@ -7,7 +7,8 @@ import camera from './camera' //摄像头
 import fire from './fire' //火灾
 import risk from './risk' //风险
 import fbky from './fbky' //防爆扩音
+import accessControl from './accessControl' //智能门禁
 
 export default {
-  mixins: [Person, Rail, AreaAlarm, JGYT, perimeter, camera, fire, risk, fbky],
+  mixins: [Person, Rail, AreaAlarm, JGYT, perimeter, camera, fire, risk, fbky, accessControl],
 }

src/views/basePage/mixins/MapEvent.js

@@ -157,6 +157,8 @@ export default {
             //点击摄像头，打开追视窗口
             else if (type === 'camera') {
               this.$store.dispatch('dialog/openVideoDialog', data.id)
+            } else if (type === 'znmj') {
+              this.$store.dispatch('dialog/openVideoDialog', data.cameraID)
             } else if (type === 'wf') {
               this.getWFConfig(obj)
             } else if (type === 'zdwxy') {
@@ -344,6 +346,7 @@ export default {
             console.log(
               `点击了【${feature.tileset.name}】的【${feature.getProperty('name')}】【${feature.getProperty('id')}】`
             )
+            const featureName = feature.getProperty("name");
             this.runModelActionScript(feature.tileset.code, feature.getProperty('id'), 3)
             let obj = {
               type: 'modelpart',
@@ -352,19 +355,38 @@ export default {
               //     : "",
               position: [longitude, latitude, height],
             }
-            console.log('地下模式', this.underGround)
-            if (!this.underGround) {
-              const modelRootClickRet = this.setModelRoofVisible(feature.getProperty('name'))
-              console.log(this.underground)
-              if (!modelRootClickRet.hasFeature && !modelRootClickRet.insideModel) {
-                this.showModelToolTip(feature.tileset.code, feature.getProperty('id'), pickObj, obj)
-                setModelShow({ model: 'JBZHZ' }, true)
-              } else if (!modelRootClickRet.hasFeature && modelRootClickRet.insideModel) {
-                this.showModelToolTip(feature.tileset.code, feature.getProperty('id'), pickObj, obj)
-              }
-            } else {
-              this.showModelToolTip(feature.tileset.code, feature.getProperty('id'), pickObj, obj)
-            }
+            //模型点击隐藏
+            // if (featureName.startsWith("综合楼")) {
+            //   setModelShow(//tkt
+            //     {
+            //       model: "tkt_yu0j1s",
+            //       part: [
+            //         "综合楼"
+            //       ],
+            //     },
+            //     false
+            //   );
+            // } else {
+            //   this.showModelToolTip(
+            //     feature.tileset.code,
+            //     feature.getProperty("id"),
+            //     pickObj,
+            //     obj
+            //   );
+            // }
+            // console.log('地下模式', this.underGround)
+            // if (!this.underGround) {
+            //   const modelRootClickRet = this.setModelRoofVisible(feature.getProperty('name'))
+            //   console.log(this.underground)
+            //   if (!modelRootClickRet.hasFeature && !modelRootClickRet.insideModel) {
+            //     this.showModelToolTip(feature.tileset.code, feature.getProperty('id'), pickObj, obj)
+            //     setModelShow({ model: 'JBZHZ' }, true)
+            //   } else if (!modelRootClickRet.hasFeature && modelRootClickRet.insideModel) {
+            //     this.showModelToolTip(feature.tileset.code, feature.getProperty('id'), pickObj, obj)
+            //   }
+            // } else {
+            //   this.showModelToolTip(feature.tileset.code, feature.getProperty('id'), pickObj, obj)
+            // }
             //feature.show = false;
           }
 
@@ -436,7 +458,9 @@ export default {
       const handler = new ScreenSpaceEventHandler(scene.canvas)
       viewer.screenSpaceEventHandler.removeInputAction(ScreenSpaceEventType.RIGHT_CLICK)
       //鼠标右键点击人员，列出重叠人员，只有一个时不列出
+      
       handler.setInputAction(movement => {
+        // setModelShow({ model: "tkt_yu0j1s" }, true);
         //输入一些位置信息，调试用
         // 从笛卡尔坐标获取经纬度
         let position = viewer.scene.pickPosition(movement.position)

src/views/basePage/mixins/MqttUtil.js

@@ -27,8 +27,8 @@ export default {
         username: MQTT_CONFIG.username,
         password: MQTT_CONFIG.password,
       }
-      let host = "wss://" + window.location.host + BASE_URL + MQTT_CONFIG.host
-      // let host = VUE_APP_BASE_WS() + MQTT_CONFIG.host
+      // let host = "wss://" + window.location.host + BASE_URL + MQTT_CONFIG.host
+      let host = VUE_APP_BASE_WS() + MQTT_CONFIG.host
       //host = "ws://192.168.92.200:18002" + MQTT_CONFIG.host;
       //console.log(host);
       console.log(new Date(), 'Connecting map mqtt client')

src/views/basePage/panels/Overview.vue

@@ -62,12 +62,12 @@ export default {
         },
       ],
       categoryList: {
-        // 100001: {
-        //   code: "101",
-        //   name: "人员报警",
-        //   value: "",
-        //   level: "024000",
-        // },
+        100001: {
+          code: "101",
+          name: "人员报警",
+          value: "",
+          level: "024000",
+        },
         100002: {
           code: "101",
           name: "周界报警",
@@ -98,13 +98,12 @@ export default {
           value: "",
           level: "024000",
         },
-
-        // 100015: {
-        //   code: "101",
-        //   name: "110报警",
-        //   value: "",
-        //   level: "024000",
-        // },
+        100015: {
+          code: "101",
+          name: "110报警",
+          value: "",
+          level: "024000",
+        },
         100888: {
           code: "101",
           name: "系统事件",

src/views/basePage/panels/PersonStatistics.vue

@@ -15,10 +15,7 @@
           <div v-if="personList.length">
             <div class="item" v-for="item of personList" :key="item.id">
               <div class="left">
-                <img
-                  src="~@/assets/imgs/stationMap/img_无照片.png"
-                  @click="openPersonInfo"
-                />
+                <img :src="item.imgUrl" @click="openPersonInfo" />
               </div>
               <div class="divider"></div>
               <div class="right">
@@ -29,7 +26,7 @@
                       <span>姓名：</span>
                       <span class="val">{{ item.name }}</span>
                     </div>
-                    <div>
+                    <div v-show="item.phone">
                       <span>电话号码：</span>
                       <span class="val" style="color: #00e0ff">{{
                         item.phone
@@ -49,10 +46,10 @@
                     </div>
                   </div>
                   <div class="row">
-                    <div>
-                      <span>所属单位：</span>
-                      <span class="val">{{ item.comp }}</span>
-                    </div>
+                    <span>所属单位：</span>
+                  </div>
+                  <div class="row" v-if="item.comp">
+                    <span class="val">{{ item.comp }}</span>
                   </div>
                 </div>
               </div>
@@ -189,7 +186,7 @@
 import BaseTitle from "./BaseTitle.vue";
 import VueSeamless from "vue-seamless-scroll";
 import { getPersonTypeList, getAccessInfo } from "@/API/positioning";
-import { getAccessInfoList, getAccessLogList } from "@/API/accessControl";
+import { getAreaPersonList, getAccessLogList } from "@/API/accessControl";
 import Dayjs from "dayjs";
 
 export default {
@@ -204,15 +201,15 @@ export default {
       personTypeCount: [
         {
           name: "员工",
-          value: 2,
+          value: 0,
         },
         {
           name: "访客",
-          value: 1,
+          value: 0,
         },
         {
           name: "施工",
-          value: 1,
+          value: 0,
         },
       ],
       devicesTypeCount: [
@@ -259,10 +256,11 @@ export default {
       },
       scrollOptionEvent: {
         limitMoveNum: 1,
-        singleHeight: 66,
+        singleHeight: 66.5,
         waitTime: 5000,
         openWatch: true,
       },
+      defaultPhoto: "~@/assets/imgs/stationMap/img_无照片.png",
       personList: [
         {
           id: "1",
@@ -275,39 +273,6 @@ export default {
           phone: 15500001111,
           imgUrl: "~@/assets/imgs/stationMap/img_无照片.png",
         },
-        {
-          id: "2",
-          name: "王某某",
-          pic: "",
-          type: "值班门卫",
-          posi: "运维操作工",
-          personType: "员工",
-          comp: "XXXXX公司",
-          phone: 15500001111,
-          imgUrl: "~@/assets/imgs/stationMap/img_无照片.png",
-        },
-        {
-          id: "3",
-          name: "李某某",
-          pic: "",
-          type: "施工人员",
-          posi: "门卫",
-          personType: "施工",
-          comp: "XXXXX公司",
-          phone: 15500001111,
-          imgUrl: "~@/assets/imgs/stationMap/img_无照片.png",
-        },
-        {
-          id: "4",
-          name: "高某某",
-          pic: "",
-          type: "访客",
-          posi: "工程师",
-          personType: "访客",
-          comp: "XXXXX公司",
-          phone: 15500001111,
-          imgUrl: "~@/assets/imgs/stationMap/img_无照片.png",
-        },
       ],
       eventsList: [
         {
@@ -332,12 +297,18 @@ export default {
     };
   },
   created() {
-    this.openPersonInfo();
-    this.initAccessLogList();
+    this.getMessage();
+    this.startMqtt();
+    // this.openPersonInfo();
+    // this.initAccessLogList();
+  },
+  computed: {
+    VUE_APP_BASE_API() {
+      return process.env.VUE_APP_BASE_API;
+    },
   },
   mounted() {
     // this.getPersonTypeList();
-    // this.startMqtt();
   },
   methods: {
     async initAccessLogList() {
@@ -365,9 +336,9 @@ export default {
         if (data.remark) {
           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[0].value = c[0]; //员工
+            this.personTypeCount[1].value = c[1]; //访客
+            this.personTypeCount[2].value = c[2]; //施工
             this.total = Number(c[0]) + Number(c[1]) + Number(c[2]);
           }
         }
@@ -386,31 +357,41 @@ export default {
       try {
         const p = {};
         const res = await getPersonTypeList(p);
-        console.log(res.data);
+        // console.log(res.data);
       } catch (err) {
         console.log(err);
       }
     },
     startMqtt() {
       const topics = [
-        "CountArea/AllCount/All",
-        "CountArea/RiskCount/All",
-        "CountArea/PersonTypeCount/All",
+        // "CountArea/AllCount/All",
+        // "CountArea/RiskCount/All",
+        // "CountArea/PersonTypeCount/All",
+        "AccessControl/Log",
       ];
       const _this = this;
       this.$store.dispatch("mqtt/subscribe", {
         topic: topics,
         onMessage: (topic, message, packet) => {
           const content = message.toString();
-          if (topic === "CountArea/AllCount/All") {
-            this.total = content;
-          } else if (topic === "CountArea/RiskCount/All") {
-            const data = JSON.parse(content);
-            this.personRiskCount.forEach((item) => {
-              item.value = data[item.code];
-            });
-          } else if (topic === "CountArea/PersonTypeCountDic/All") {
-            const data = JSON.parse(content);
+          // if (topic === "CountArea/AllCount/All") {
+          //   this.total = content;
+          // } else if (topic === "CountArea/RiskCount/All") {
+          //   const data = JSON.parse(content);
+          //   this.personRiskCount.forEach((item) => {
+          //     item.value = data[item.code];
+          //   });
+          // } else if (topic === "CountArea/PersonTypeCountDic/All") {
+          //   const data = JSON.parse(content);
+          // } else
+          if (topic === "AccessControl/Log") {
+            //站内人员变动，重新查询数据
+            if (
+              JSON.parse(content).AreaId == "791707314364096512" &&
+              JSON.parse(content).PersonId != null
+            ) {
+              this.getMessage();
+            }
           }
         },
       });
@@ -418,6 +399,75 @@ export default {
         this.$store.dispatch("mqtt/unsubscribe", topics);
       });
     },
+    async getMessage() {
+      try {
+        let res = await getAreaPersonList({ id: "791707314364096512" });
+        if (res.code === 20000) {
+          console.log(res);
+          if (res.data.content != null && res.data.content != undefined) {
+            let localList = [];
+            let workList = [];
+            let visitList = [];
+            let personInfoList = [];
+            res.data.content.forEach((i) => {
+              personInfoList.push({
+                id: i.workNo,
+                name: i.name,
+                pic: "",
+                type: i.positionName,
+                posi: i.positionName,
+                personType: i.typeName,
+                comp: i.companyName == null ? "" : i.companyName,
+                phone: i.telephone,
+                imgUrl:
+                  i.photoPath == null
+                    ? this.defaultPhoto
+                    : "/yapi" + i.photoPath,
+              });
+              switch (i.type) {
+                //访客
+                case "546093319541760000":
+                  visitList.push({
+                    workNo: i.workNo,
+                    name: i.name,
+                  });
+                  break;
+                //施工
+                case "403245878963347456":
+                  workList.push({
+                    workNo: i.workNo,
+                    name: i.name,
+                  });
+                  break;
+                //员工
+                case "255022541838691649":
+                  localList.push({
+                    workNo: i.workNo,
+                    name: i.name,
+                  });
+                  break;
+              }
+            });
+            this.personList = personInfoList.sort(function (a, b) {
+              return a.id - b.id;
+            });
+            this.personTypeCount[0].value = localList.length; //员工
+            this.personTypeCount[1].value = visitList.length; //访客
+            this.personTypeCount[2].value = workList.length; //施工
+            this.total = localList.length + workList.length + visitList.length;
+            // console.log(
+            //   "数据数组：",
+            //   personInfoList,
+            //   localList,
+            //   visitList,
+            //   workList
+            // );
+          }
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
   },
 };
 </script>
@@ -520,8 +570,8 @@ export default {
             text-align: center;
             margin-right: 8px;
             img {
-              // width: 100%;
-              height: 100%;
+              width: 120px;
+              height: 160px;
             }
           }
           .divider {
@@ -568,6 +618,10 @@ export default {
                 font-family: MicrosoftYaHei;
                 .val {
                   color: #ffffff;
+                  white-space: nowrap; /*强制单行显示*/
+                  text-overflow: ellipsis; /*超出部分省略号表示*/
+                  overflow: hidden; /*超出部分隐藏*/
+                  width: 256px; /*设置显示的最大宽度*/
                 }
               }
               .row:nth-child(2) {

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

@@ -70,13 +70,7 @@ export default {
   },
   methods: {
     startMqtt() {
-      const topics = [
-        "Visualization/Number/RecentlyLevelByDate",
-        // "Visualization/Number/RecentlyLevelByDateDYMZ",
-        // "Visualization/Number/RecentlyLevelByDateKKQG",
-        // "Visualization/Number/RecentlyLevelByDateDSSZ",
-        // "Visualization/Number/RecentlyLevelByDateYWSZ",
-      ];
+      const topics = ["Visualization/Number/RecentlyLevelByDate"];
       const _this = this;
       this.$store.dispatch("mqtt/subscribe", {
         topic: topics,

src/views/components/chart/DateTimeBar.vue

@@ -6,7 +6,12 @@ import resize from "./resize";
 export default {
   props: {
     data: {
-      default: () => ({ date: [], seriesData: [] }),
+      default: () => ({
+        date: [],
+        seriesData: [],
+        chartType: "",
+        limitNumber: 30,
+      }),
     },
     width: {
       type: String,
@@ -93,13 +98,25 @@ export default {
       //深度监听，可监听到对象、数组的变化
       handler(newVal) {
         let length = newVal.date.length;
-        if (length > 30) {
-          this.dataZoomMix = (1 - 30 / length) * 100;
-        } else {
+        //显示数据数量
+        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();
         });
       },
@@ -109,7 +126,9 @@ export default {
   methods: {
     drawChart() {
       //$("#你的画布名称").removeAttr("_echarts_instance_").empty()
-      this.chart = this.$echarts.init(document.getElementById(this.baseConfig.ids));
+      this.chart = this.$echarts.init(
+        document.getElementById(this.baseConfig.ids)
+      );
       this.chart.off("click");
       let option = {
         title: {
@@ -186,15 +205,15 @@ export default {
           },
         },
         color: [
+          "#00ACFF",
           "#FF83DF",
           "#8023FF",
-          // "#0064FF",
-          "#00ACFF",
-          // "#50E3C2",
+          "#0064FF",
+          "#50E3C2",
           "#39CD1A",
-          // "#B8E986",
+          "#B8E986",
           "#F8E71C",
-          // "#FF9F00",
+          "#FF9F00",
           "#EC576A",
         ],
         legend: {
@@ -254,14 +273,8 @@ export default {
               name: item.name,
               stack: "total",
               type: this.chartType,
-              // barWidth: 24,
               barMaxWidth: 30,
               itemStyle: {
-                // color: (params) => {
-                //   console.log(params);
-                //   const { color } = this.colorConfig.find((c) => c.code == item.code);
-                //   if (!!color) return color;
-                // },
                 normal: {
                   opacity: 0.8,
                 },
@@ -270,6 +283,9 @@ export default {
                 },
               },
               data: item.data,
+              markPoint: {
+                data: item.markPointData,
+              },
             };
           } else {
             return {
@@ -284,6 +300,9 @@ export default {
                 },
               },
               data: item.data,
+              markPoint: {
+                data: item.markPointData,
+              },
             };
           }
         }),

src/views/components/dialog/PipeMileageDialog.vue

@@ -0,0 +1,300 @@
+<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 "@/views/components/chart";
+import { mapGetters } from "vuex";
+export default {
+  name: "PipeMileageDialog",
+  components: { BaseDragBgDialog, DateTimeBar },
+  watch: {
+    "pipeMileageDialog.show": {
+      handler(newVal) {
+        this.baseDialogConfig.show = newVal;
+      },
+      // deep: true,
+      immediate: true,
+    },
+  },
+  data() {
+    return {
+      BASE_URL,
+      baseDialogConfig: {
+        dialogId: "pipeMileage",
+        show: false,
+        title: "陕京四线高程图",
+        width: 1560,
+        height: 460,
+        center: true,
+        zIndex: 10,
+      },
+      statisticData: {
+        date: [
+          319820.7, 319941.7, 320040.1, 320149.9, 320248.8, 320334.5, 320435.5,
+          320538.9, 320648.7, 320770.1, 320890.2, 321009.4, 321127.3, 321222.8,
+          321307.6, 321412.7, 321533.1, 321640.9, 321761.1, 321869.4, 321945.6,
+          321997.2, 322082.9, 322202.9, 322321.8, 322442.9, 322535.9, 322651.4,
+          322770.6, 322875.1, 322985.9,
+        ],
+        seriesData: [
+          {
+            data: [
+              1446.7, 1428.5, 1428.7, 1442.3, 1427.5, 1429.3, 1420.8, 1432.8,
+              1442.6, 1446.8, 1447.9, 1447.8, 1439.9, 1441.1, 1443.7, 1444.8,
+              1443.8, 1440.8, 1437.3, 1437.8, 1437.8, 1434.5, 1433.3, 1424.8,
+              1420, 1418.6, 1410.6, 1396.5, 1394.8, 1399.5, 1396.8,
+            ],
+            name: "高程",
+            code: "100006",
+            markPointData: [],
+          },
+        ],
+        chartType: "line",
+        limitNumber: 0,
+      },
+    };
+  },
+  computed: {
+    ...mapGetters(["pipeMileageDialog"]),
+  },
+  created() {
+    this.getMileageList();
+  },
+  mounted() {},
+  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();
+      }
+    },
+  },
+};
+</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/components/dialog/VideoImageWindow copy.vue

@@ -272,8 +272,8 @@ export default {
     init(str) {
       // this.socketList[`ws_${this.cameraId}`];
       this.ws = new WebSocket(
-        // VUE_APP_BASE_WS() + "/VideoOverWebSocket"
-        "wss://" + window.location.host + BASE_URL + "/VideoOverWebSocket"
+        VUE_APP_BASE_WS() + "/VideoOverWebSocket"
+        // "wss://" + window.location.host + BASE_URL + "/VideoOverWebSocket"
       );
       this.ws.onmessage = (evt) => {
         if (typeof evt.data === "string") {

src/views/components/dialog/VideoImageWindow.vue

@@ -131,8 +131,8 @@ export default {
     // 放大缩小
     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 = 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)

src/views/stationMapTKT/components/BaseImgMap/StationPoint.vue

@@ -19,7 +19,7 @@
           }"
         >
           <div class="title">{{ dialogConfig.name }}</div>
-          <div class="pic">
+          <div class="pic" v-if="stationMapLayer.type">
             <img
               class="pic_yx"
               :id="`station_${dialogConfig.id}`"
@@ -27,16 +27,18 @@
               @click="openStation(dialogConfig)"
             />
           </div>
-          <!-- <div class="content">
+          <div class="content" v-else>
             <div class="row" v-for="item of dialogConfig.data" :key="item.name">
               <span class="label">{{ item.name }}：</span>
               <span class="value">{{ item.value }}</span>
               <span class="unit">{{ item.unit }}</span>
             </div>
-          </div> -->
+          </div>
         </base-pop>
         <div :id="`startPoint_${dialogConfig.id}`" class="startPoint"></div>
-        <div class="station_title">{{ dialogConfig.name }}</div>
+        <div class="station_title" @click="openStation(dialogConfig)">
+          {{ dialogConfig.name }}
+        </div>
         <img
           class="station_icon"
           :id="`station_${dialogConfig.id}`"
@@ -56,7 +58,7 @@
           }"
         >
           <div class="title">{{ dialogConfig.name }}</div>
-          <div class="pic">
+          <div class="pic" v-if="stationMapLayer.type">
             <img
               class="pic_yx"
               :id="`station_${dialogConfig.id}`"
@@ -64,6 +66,13 @@
               @click="openStation(dialogConfig)"
             />
           </div>
+          <div class="content" v-else>
+            <div class="row" v-for="item of dialogConfig.data" :key="item.name">
+              <span class="label">{{ item.name }}：</span>
+              <span class="value">{{ item.value }}</span>
+              <span class="unit">{{ item.unit }}</span>
+            </div>
+          </div>
         </base-pop>
         <div :id="`startPoint_${dialogConfig.id}`" class="valuePoint"></div>
         <img
@@ -79,6 +88,7 @@
 
 <script>
 import BasePop from "@/views/components/panelBase/BasePop.vue";
+import { mapGetters } from "vuex";
 import { jsPlumb } from "jsplumb";
 import {
   flyToPerspective,
@@ -106,6 +116,9 @@ export default {
   data() {
     return {};
   },
+  computed: {
+    ...mapGetters(["stationMapLayer"]),
+  },
   mounted() {
     this.$nextTick(() => {
       this.createPlumb();
@@ -151,9 +164,11 @@ export default {
         setTimeout(() => {
           this.setBuildInfoByBuildId(c.buildId);
         }, 600);
+      } else if (c.type =='stationFS'){
+        this.jumpRoute("/videoMonitorType?did=" + c.departmentId + "&screenType=9");
       } else {
-        this.jumpRoute("/videoMonitor?did=" + c.departmentId);
-      }
+        this.jumpRoute("/videoMonitorType?did=" + c.departmentId + "&screenType=1");
+      } 
     },
   },
 };

src/views/stationMapTKT/components/Fold.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="fold transition">
+    <div
+      class="openFold"
+      :class="[stationMapLayer.type ? 'isno' : 'isyes']"
+      @click="clickOpen"
+    >
+      <span>
+        {{ stationMapLayer.type ? "高程标注" : "场站分布" }}
+      </span>
+    </div>
+    <div class="openFoldLine" :class="['isno']" @click="clickOpenLine">
+      <span> 管线高程图 </span>
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from "vuex";
+export default {
+  props: { positionFold: Object },
+  data() {
+    return {
+      position: {
+        left: 490,
+        right: 490,
+        isopen: true,
+        issprh: false,
+      },
+    };
+  },
+  computed: {
+    ...mapGetters(["stationMapLayer"]),
+  },
+  watch: {
+    stationMapLayer: {
+      handler(val, oldVal) {
+        // console.log("stationMapLayer", val.value, oldVal.value);
+        this.updateStyle();
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    updateStyle() {
+      this.position.isopen = !this.position.isopen;
+      let main = document.querySelector(".fold");
+      main.style.transform = `translateX(0px)`;
+      main.style.transition = "transform 1s ease";
+      var param = {
+        isopen: this.position.isopen,
+        issprh: this.position.issprh,
+      };
+      this.$emit("position", param);
+    },
+    clickOpen() {
+      if (this.stationMapLayer) {
+        if (this.stationMapLayer.type) {
+          this.$store.dispatch("globalConfig/setStationMapLayer", { type: 0 });
+        } else {
+          this.$store.dispatch("globalConfig/setStationMapLayer", { type: 1 });
+        }
+      }
+    },
+    clickOpenLine() {
+      this.$store.dispatch("dialog/setPipeMileageDialog", {
+        show: true,
+        dialogMsg: {},
+        type: "",
+      });
+    },
+  },
+  mounted() {
+    this.position = this.positionFold;
+    let main = document.querySelector(".fold");
+    main.style.transform = `translateX(0px)`;
+    main.style.transition = "transform 1s ease";
+  },
+  updated() {
+    this.position = this.positionFold;
+  },
+};
+</script>
+<style lang="less" scoped>
+.fold {
+  position: absolute;
+  z-index: 99;
+  width: 140px;
+  // height: 200px;
+  top: 106px;
+  right: 460px;
+  //   background: #000;
+  .openFold {
+    pointer-events: auto;
+    cursor: pointer;
+    width: 140px;
+    height: 45px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    text-align: center;
+    line-height: 45px;
+    span {
+      font-size: 14px;
+      font-weight: 700;
+      background-image: linear-gradient(180deg, #ffffff, #419aff);
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+    }
+  }
+  .openFoldLine {
+    pointer-events: auto;
+    cursor: pointer;
+    width: 140px;
+    height: 45px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    text-align: center;
+    line-height: 45px;
+    span {
+      font-size: 14px;
+      font-weight: 700;
+      background-image: linear-gradient(180deg, #ffffff, #419aff);
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+    }
+  }
+}
+.isno {
+  background-image: url(~@/assets/imgs/fold/button_收起面板_sel.png);
+}
+.isyes {
+  background-image: url(~@/assets/imgs/fold/button_收起面板_pre.png);
+}
+</style>

src/views/stationMapTKT/index.vue

@@ -33,6 +33,13 @@
         <risk-hint />
       </div>
     </transition>
+    <!-- 中右侧面板 -->
+    <transition
+      enter-active-class="animated fadeInRight"
+      leave-active-class="animated fadeOutRight"
+    >
+      <fold :positionFold="position" @position="getPosition" />
+    </transition>
     <!-- 右侧面板 -->
     <transition enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutRight">
       <div class="panel_box right_panel">
@@ -50,6 +57,7 @@
 
 <script>
 import BaseImgMap from './components/BaseImgMap/index.vue'
+import Fold from "./components/Fold";
 // import Overview from './components/Overview.vue'
 import StationStatistics from './components/StationStatistics.vue'
 import AlarmTrend from './components/AlarmTrend/index.vue'
@@ -76,7 +84,7 @@ export default {
     Weather,
     PersonStatistics,
     IntelligentVideo,
-
+    Fold,
     BaseImgMap,
     StationStatistics,
     AlarmTrend,
@@ -89,6 +97,10 @@ export default {
   data() {
     return {
       panelShow: true,
+      position: {
+        isopen: true,
+        issprh: false,
+      },
     }
   },
   computed: {
@@ -108,6 +120,9 @@ export default {
     })
   },
   methods: {
+    getPosition(data) {
+      this.position = data;
+    },
     startMqtt(departmentId) {
       const subKey = 'stationMap'
       if (!departmentId) {

src/views/videoMonitor/components/videoContent.vue

@@ -52,8 +52,8 @@ export default {
   methods: {
     init(str) {
       // this.socketList[`ws_${this.cameraData.id}`];
-      // const host = VUE_APP_BASE_WS() + '/VideoOverWebSocket'
-      const host = 'wss://' + window.location.host + BASE_URL + '/VideoOverWebSocket'
+      const host = VUE_APP_BASE_WS() + '/VideoOverWebSocket'
+      // const host = 'wss://' + window.location.host + BASE_URL + '/VideoOverWebSocket'
       this.ws = new WebSocket(host)
       this.ws.onmessage = evt => {
         if (typeof evt.data === 'string') {

src/views/videoMonitor/index.vue

@@ -111,6 +111,7 @@ export default {
           listOrder: ["ip,asc"],
           departmentId: this.$route.query.did, //按照部门筛选
           useType: this.$route.query.type, //按照用途类型筛选
+          name: this.$route.query.name, //按照名称筛选
         });
         const content = res.data?.content || [];
         // 暂时屏蔽掉没信号的摄像头，否则会导致服务崩溃

src/views/videoMonitorType/components/videoContent.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="img-container">
     <!-- <img :src="url" v-if="url" /> -->
-    <canvas class="canvas_box" ref="canvas" v-if="url" width="960" height="540" />
+    <canvas
+      class="canvas_box"
+      ref="canvas"
+      v-if="url"
+      width="960"
+      height="540"
+    />
     <div class="image-slot" v-else>
       <i class="el-icon-video-camera"></i>
       <span>无信号</span>
@@ -10,7 +16,7 @@
   </div>
 </template>
 <script>
-import { debounce, throttle } from 'lodash-es'
+import { debounce, throttle } from "lodash-es";
 export default {
   props: {
     cameraData: {
@@ -20,18 +26,18 @@ export default {
   },
   data() {
     return {
-      url: '',
+      url: "",
       ws: null,
       startTime: null,
       speed: 4,
       presetIndex: 1,
-    }
+    };
   },
   watch: {
     cameraData: {
       handler(val) {
         if (val.id) {
-          this.updateEvent({ id: val.id }, true)
+          this.updateEvent({ id: val.id }, true);
         }
       },
       deep: true,
@@ -39,99 +45,111 @@ export default {
     },
   },
   mounted() {
-    this.$EventBus.$off('updateSendParam')
-    this.$EventBus.$on('updateSendParam', (data, state) => {
+    this.$EventBus.$off("updateSendParam");
+    this.$EventBus.$on("updateSendParam", (data, state) => {
       if (data.id === this.cameraData.id) {
-        this.updateEvent(data, state)
+        this.updateEvent(data, state);
       }
-    })
+    });
   },
   beforeDestroy() {
-    this.closeHandler()
+    this.closeHandler();
   },
   methods: {
     init(str) {
       // this.socketList[`ws_${this.cameraData.id}`];
-      // const host = VUE_APP_BASE_WS() + '/VideoOverWebSocket'
-      const host = 'wss://' + window.location.host + BASE_URL + '/VideoOverWebSocket'
-      this.ws = new WebSocket(host)
-      this.ws.onmessage = evt => {
-        if (typeof evt.data === 'string') {
-          console.log(JSON.parse(evt.data).Msg)
+      const host = VUE_APP_BASE_WS() + "/VideoOverWebSocket";
+      // const host = 'wss://' + window.location.host + BASE_URL + '/VideoOverWebSocket'
+      this.ws = new WebSocket(host);
+      this.ws.onmessage = (evt) => {
+        if (typeof evt.data === "string") {
+          console.log(JSON.parse(evt.data).Msg);
         } else {
-          this.url = URL.createObjectURL(evt.data)
+          this.url = URL.createObjectURL(evt.data);
           this.$nextTick(() => {
-            this.updateUrl()
-          })
+            this.updateUrl();
+          });
         }
-      }
-      this.handleSend(str)
+      };
+      this.handleSend(str);
       // console.log(window);
     },
     updateUrl() {
-      const canvas = this.$refs.canvas
-      const ctx = canvas.getContext('2d')
-      const img = new Image()
+      const canvas = this.$refs.canvas;
+      const ctx = canvas.getContext("2d");
+      const img = new Image();
       // console.log('canvas', canvas.width, canvas.height)
 
-      img.src = this.url
+      img.src = this.url;
       img.onload = () => {
         // console.log('img', img.width, img.height)
-        const canvasRatio = canvas.width / canvas.height
-        const imgRatio = img.width / img.height
+        const canvasRatio = canvas.width / canvas.height;
+        const imgRatio = img.width / img.height;
         if (imgRatio > canvasRatio) {
           // 图片宽高比大于画布宽高比，以宽度为基准进行缩放
-          const newWidth = canvas.width
-          const newHeight = newWidth / canvasRatio
-          ctx.clearRect(0, 0, newWidth, newHeight)
-          ctx.drawImage(img, 0, (canvas.height - newHeight) / 2, newWidth, newHeight)
+          const newWidth = canvas.width;
+          const newHeight = newWidth / canvasRatio;
+          ctx.clearRect(0, 0, newWidth, newHeight);
+          ctx.drawImage(
+            img,
+            0,
+            (canvas.height - newHeight) / 2,
+            newWidth,
+            newHeight
+          );
         } else {
           // 图片宽高比小于等于画布宽高比，以高度为基准进行缩放
-          const newHeight = canvas.height
-          const newWidth = newHeight * canvasRatio
-          ctx.clearRect(0, 0, newWidth, newHeight)
-          ctx.drawImage(img, (canvas.width - newWidth) / 2, 0, newWidth, newHeight)
+          const newHeight = canvas.height;
+          const newWidth = newHeight * canvasRatio;
+          ctx.clearRect(0, 0, newWidth, newHeight);
+          ctx.drawImage(
+            img,
+            (canvas.width - newWidth) / 2,
+            0,
+            newWidth,
+            newHeight
+          );
         }
-      }
+      };
     },
     // 100),
     handleSend(str) {
       if (this.ws.readyState === WebSocket.OPEN) {
-        this.ws.send(str)
+        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))
+        this.ws.addEventListener("open", () => this.handleSend(str));
       } else {
         // etc.
       }
     },
     updateEvent(data, state) {
-      const param = JSON.stringify(data)
+      const param = JSON.stringify(data);
       if (this.ws && this.ws.readyState == 1) {
-        this.handleSend(param)
+        this.handleSend(param);
       } else {
-        this.init(param)
+        this.init(param);
       }
       if (state) {
         setTimeout(() => {
-          this.url = ''
-        }, 500)
+          this.url = "";
+        }, 500);
       }
     },
     closeHandler() {
-      this.ws && this.ws.close()
+      this.ws && this.ws.close();
       setTimeout(() => {
-        if (this.url) URL.revokeObjectURL(this.url)
-        this.url = ''
-        this.ws.onclose = evt => {
-          this.ws = null
-          console.log('websocket已关闭')
-        }
-      }, 500)
+        if (this.url) URL.revokeObjectURL(this.url);
+        this.url = "";
+        this.ws.onclose = (evt) => {
+          this.ws = null;
+          console.log("websocket已关闭");
+        };
+      }, 500);
     },
   },
-}
+};
 </script>
 
 <style lang="less" scoped>

src/views/videoMonitorType/index.vue

@@ -82,6 +82,7 @@ export default {
       query: {
         departmentId: "",
         useType: "",
+        name: "",
       },
     };
   },
@@ -116,6 +117,7 @@ export default {
         this.query = {
           departmentId: "",
           useType: "",
+          name: "",
         };
         this.getCameraList();
       }
@@ -135,7 +137,19 @@ export default {
     } else {
       this.query.useType = "";
     }
-    this.getCameraList();
+    if (!!this.$route.query.name) {
+      this.query.name = this.$route.query.name;
+    } else {
+      this.query.name = "";
+    }
+    if (!!this.$route.query.screenType) {
+      this.configOptions.splitScreenType = this.$route.query.screenType;
+    } else {
+      this.configOptions.splitScreenType = "9";
+    }
+    setTimeout(() => {
+      this.getCameraList();
+    }, 100);
   },
   beforeDestroy() {
     this.stopLoop();
@@ -155,6 +169,7 @@ export default {
           listOrder: ["ip,asc"],
           departmentId: this.query.departmentId, //按照部门筛选
           useType: this.query.useType, //按照用途类型筛选
+          name: this.query.name, //按照名称筛选
         });
         const content = res.data?.content || [];
         // 暂时屏蔽掉没信号的摄像头，否则会导致服务崩溃
@@ -162,7 +177,8 @@ export default {
         //   // return true
         //   return !NO_SINGLE_CAMERA.includes(c?.name)
         // })
-        this.videoList = content.filter((c) => {//过滤首页轮播显示
+        this.videoList = content.filter((c) => {
+          //过滤首页轮播显示
           return c.homeCarouselEnable > 0;
         });
         // this.sortVideoList()

vue.config.js

@@ -9,7 +9,6 @@ module.exports = {
   productionSourceMap: false,
   lintOnSave: false, // 是否开启eslint
   devServer: {
-    // https: true,
     open: true,
     port: 8091,
     overlay: {
@@ -18,8 +17,8 @@ module.exports = {
     },
     proxy: {
       '/yapi': {
-        // target: 'http://172.168.0.62:8080/prod-api/', // 托克托现场
-        target: 'http://192.168.195.136:8080/prod-api/', // 托克托本地虚拟机
+        target: 'http://172.168.0.62:8080/prod-api/', // 托克托现场
+        // target: 'http://192.168.195.136:8080/prod-api/', // 托克托本地虚拟机
 
         // target: "http://localhost:5002", // 远程服务器-赵哥
         changeOrigin: true,
@@ -28,8 +27,8 @@ module.exports = {
         },
       },
       '/model': {
-        // target: 'http://172.168.0.62:8081/model/', //托克托模型现场服务器
-        target: 'http://192.168.195.136:8081/model/', //托克托模型虚拟机
+        target: 'http://172.168.0.62:8081/model/', //托克托模型现场服务器
+        // target: 'http://192.168.195.136:8081/model/', //托克托模型虚拟机
         changeOrigin: true,
         pathRewrite: {
           '^/model': '/',