Merge remote-tracking branch 'origin/visu_environment_01_siping_2.5d' into visu_environment_01_siping_2.5d

src/api/components/supermap.js

@@ -6,7 +6,13 @@ export function getSuperMap(codes) {
     method: 'get'
   })
 }
-
+export function getDeviceList(param) {
+  return request({
+    url: '/center-data/level/getDeviceList',
+    method: 'get',
+    params:param
+  })
+}
 export const iconList = {
   'marker': require('@/assets/images/cameraType/marker.png'),
   'big-horn': require('@/assets/images/cameraType/big-horn.png'),

src/assets/styles/base.scss

@@ -250,7 +250,23 @@ ul {
     color: #153d6c;
   }
 }
+// 下拉
+.el-select-dropdown {
+  border: none;
+  background-color: rgba(1, 28, 82, 0.8);
+}
+.el-select-dropdown__item{
+  color: $white;
+}
+.el-select-dropdown{
+  background-color: #00335c;
+  border: solid 1px #56dfff;
+  color: $white;
+}
+.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
+  background-color: #035faa;
 
+}
 //tips样式
 .js-tps{
 

src/components/TVWalls.vue

@@ -2,6 +2,7 @@
   <div>
     <el-dialog :title="title" :visible.sync="TVWallVisible" v-if="TVWallVisible" customClass="TVWallCustomWidth"
                @close="cancelEventLocationShow()">
+
       <!--<div @click="findCameraByEventCoordinate()">视频联动</div>-->
       <!--<div class="forthis" style="width: 22%; position: absolute;left: 0;z-index: 9999999999999;">-->
       <!--<div class="i-list-con" style="height: 46vh; overflow-y: scroll;">-->
@@ -21,8 +22,15 @@
       <!--&lt;!&ndash;视频窗口展示-&#45;&#45;海康&ndash;&gt;-->
       <!--<div id="playWnd" class="playWnd" style="left: 0px; top: 0px;"></div>-->
       <!--</div>-->
-
-      <div id="dom1" class="dom1"></div>
+      <div style="display: flex;" >
+        <div id="dom1" class="dom1"></div>
+        <div class="leader-info-container" v-if="userDataShow">
+          <div class="leader-info-list-con" v-for="user in userData">
+            <h4 style="">{{user.position}}：{{user.name}}</h4>
+            <h4>电话：{{user.phone}}</h4>
+          </div>
+        </div>
+      </div>
     </el-dialog>
   </div>
 
@@ -43,77 +51,7 @@ export default {
   data() {
     return {
       title:['365','369','371','373','372','370'].includes(Cookies.get("deptId"))?"电视墙":"电视墙\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000您的所有操作痕迹已被后台记录，请谨慎操作。",
-      tvListJson: [
-        {
-          'switchTab': '1',
-          'treeLabels': [
-            {
-              'labelCode': '123456',
-              'labelName': '视频场景',
-              'parentLabelCode': null
-            },
-            {
-              'labelCode': '5a81d1bd499b4940a21fc63ca51f4dfa',
-              'labelName': '标签2',
-              'parentLabelCode': 123456
-            },
-            {
-              'labelCode': 'd941adbbd3e64dac92cc448dec5293cd',
-              'labelName': '标签1',
-              'parentLabelCode': 123456
-            }
-          ],
-          'labelChannels': [{
-            'channelDates': [{
-              'channelCode': '6044981090191552',
-              'channelName': '复兴大桥中段-交通事故',
-              'channelSn': null,
-              'cameraType': 0,
-              'online': 1
-            },
-              {
-                'channelCode': 'ZgVzqsjwA1DTF561VGHK5E',
-                'channelName': '北京7青羊东二路77号2通道1',
-                'channelSn': null,
-                'cameraType': 1,
-                'online': 1
-              }
-            ],
-            'labelCode': 'd941adbbd3e64dac92cc448dec5293cd'
-          },
-            {
-              'channelDates': [{
-                'channelCode': 'ZgVzqsjwA1DTF561VGHKK7',
-                'channelName': '北京7青羊东二路77号2通道2',
-                'channelSn': null,
-                'cameraType': 2,
-                'online': 0
-              }],
-              'labelCode': '5a81d1bd499b4940a21fc63ca51f4dfa'
-            }
-          ]
-        },
-        {
-          'switchTab': '2',
-          'labelChannels': [{
-            'channelDates': [{
-              'channelCode': 'ZgVzqsjwA1DTF561VGHK5E',
-              'channelName': '北京7青羊东二路77号2通道1',
-              'channelSn': null,
-              'cameraType': 1,
-              'online': 1
-            },
-              {
-                'channelCode': 'ZgVzqsjwA1DTF561VGHKK7',
-                'channelName': '北京7青羊东二路77号2通道2',
-                'channelSn': null,
-                'cameraType': 2,
-                'online': 0
-              }
-            ]
-          }]
-        }
-      ],
+      tvListJson: [],
       TVWallVisible: false,
       activeName: 'tv',
       channelId: ['ZgVzqsjwA1DTF561VHG69F'],
@@ -263,7 +201,9 @@ export default {
       cameraList: [],
       initCount: 0,
       pubKey: '',
-      oWebControl: null
+      oWebControl: null,
+      userData:[],
+      userDataShow:false,
     }
   },
   created() {
@@ -273,6 +213,7 @@ export default {
   methods: {
     cancelEventLocationShow() {
       // this.activeName = 'tv'
+      this.userData = []
       this.TVWallVisible = false
       this.destroy()
 
@@ -284,7 +225,8 @@ export default {
           })
       }
     },
-    showTVWall(data, val) {
+    showTVWall(data, val, item) {
+debugger
       selectConfigKey("DssVersion").then(res => {
         if(this.ws.getLocalDssVersion()!=res.data){
           this.$modal.confirm('系统检测到新客户端版本，请更新后使用', '系统提示', {
@@ -299,11 +241,15 @@ export default {
           });
           return
         }else{
+          if(item != null){
+            this.userData = item;
+            this.userDataShow = true;
+          }
           this.tvListJson = data
           this.data = val
           this.autoList = []
           this.stringList = []
-          let length = data[0].treeLabels.length >= 4 ? 5 : data[0].treeLabels.length
+          let length = data[0].treeLabels.length > 4 ? 5 : data[0].treeLabels.length
           for (let i = 1; i < length; i++) {
             this.autoList.push({"channelId": data[0].treeLabels[i].labelCode})
             this.stringList.push(data[0].treeLabels[i].labelCode)
@@ -332,9 +278,9 @@ export default {
           // }, 5000)
           // /** ----------------------------------海康摄像头预览结束------------------------------------- */
           this.TVWallVisible = true
+
         }
       })
-
     },
     /** ----------------------------------大华摄像头预览开始------------------------------------- */
     alertLogin: function () {
@@ -396,6 +342,14 @@ export default {
         }
       })
     },
+    realTimeVideoDialog(cameraParams) {
+      // 调用弹窗实时播放接口
+      if (!this.isLogin) {
+        this.$Message.info("正在登陆客户端，请稍等......");
+        return false;
+      }
+      this.ws.openVideo(cameraParams);
+    },
     create(tvListJson) { // 调用创建控件接口
       let _this = this
       const params = [
@@ -404,7 +358,7 @@ export default {
           'ctrlCode': 'ctrl1',
           'ctrlProperty': {
             'displayMode': 1,
-            'splitNum': (this.autoList.length==1?1:4),
+            'splitNum': (this.autoList.length == 1 ? 1 : 4),
             'channelList': [
               {
                 'channelId': ''
@@ -417,8 +371,12 @@ export default {
       ]
       this.setPos()
       this.customizeTree(tvListJson);
+      // if(_this.stringList.length == 1){
+      //   _this.realTimeVideoDialog([_this.stringList[0]]);
+      // }else{
       _this.ws.createCtrl(params);
       _this.playRealMonitorVideo();
+      // }
       if (_this.data != undefined && _this.data != null) {
         setTimeout( _this.rotation(_this.data.longitude, _this.data.latitude, _this.stringList),5000)
       }
@@ -762,4 +720,53 @@ html, body {
   margin-top: 100px;
   margin-left: 80px;
 }
+//电视墙视频摄像头预览弹层样式
+.TVWallCustomWidth {
+  width: 1500px !important;
+  height: 750px !important;
+  background: #04080c !important;
+  box-shadow: $barShadow !important;
+  border: 1px $barBorder !important;
+  .el-dialog__header {
+    padding: 15px 20px !important;
+    background-image: -moz-linear-gradient($GradualGreen) !important;
+    background-image: -webkit-linear-gradient($GradualGreen) !important;
+    background-image: linear-gradient($GradualGreen) !important;
+    box-shadow: $shadowTitle !important;
+
+    .el-dialog__title {
+      font-weight: bolder !important;
+      color: #3cd7ef !important;
+    }
+  }
+  .leader-info-container{
+    // padding: .5rem;
+    display: flex;
+    height: 650px;
+    width: 20rem;
+    overflow-y: scroll;
+    flex-direction: column;
+    padding: 0 1rem;
+    .leader-info-list-con{
+      width: 100%;
+      padding: 1rem;
+      margin-bottom: .5rem;
+      background-image: -moz-linear-gradient($GradualGreen)!important;
+      background-image: -webkit-linear-gradient($GradualGreen) !important;
+      background-image: linear-gradient($GradualGreen)!important;
+      border: solid 1px #7dc2eb;
+      box-shadow: $shadowListHover !important;
+      border-radius: 5px;
+      h4{
+        margin: .4rem 0;
+        color: $white;
+      }
+    }
+    .leader-info-list-con:hover{
+      background-image: -moz-linear-gradient($popupBG)!important;
+      background-image: -webkit-linear-gradient($popupBG) !important;
+      background-image: linear-gradient($popupBG)!important;
+    }
+  }
+}
 </style>

src/components/supermap-2.5d.vue

@@ -68,6 +68,7 @@
           mapData: null,
           mapName: null
         },
+        showLayer:null,
         clickTime: new Date().getTime(),
         cacheData: {
           ProvinceRoad: "",
@@ -205,8 +206,12 @@
     watch: {},
     created() {
     },
-    mounted() {},
-    props: {},
+    mounted() {
+      this.showLayer = this.showLayer != undefined ? this.showLayer:false;
+    },
+    props: {
+      showLayer: [Boolean],
+    },
     methods: {
       //初始化地图数据
       removeAllviewer(num, index) {
@@ -679,15 +684,21 @@
         //开始加载专题图等数据，8秒后开始执行
         setTimeout(function() {
           //3.水系
-          let shuixi = that.superMapRootUrl + withinData[2];
-          that.mvtMap0 = that.scene.addVectorTilesMap({
-            url: shuixi,
-            canvasWidth: 512,
-            name: 'mvt_map0',
-            viewer: that.viewer
-          });
-          that.mvtMap0.selectedColor = new Cesium.Color(6, 169, 254, 0.5);
-          that.mvtMap0.show = false;
+          if(that.showLayer){
+            let shuixi = that.superMapRootUrl + withinData[2];
+            that.mvtMap0 = that.scene.addVectorTilesMap({
+              url: shuixi,
+              canvasWidth: 512,
+              name: 'mvt_map0',
+              viewer: that.viewer
+            });
+            that.mvtMap0.selectedColor = new Cesium.Color(6, 169, 254, 0.5);
+            // 8.添加水系NAME
+            let shuixi_name_url = that.superMapRootUrl + withinData[10];
+            that.shuixi_name = that.scene.open(shuixi_name_url);
+            that.cacheData.ShuiXi = withinData[11]
+          }
+
 
           // //4.林地
           // let lindi = that.superMapRootUrl+"/map-mvt-lindi/restjsr/v1/vectortile/maps/lindi";
@@ -725,17 +736,7 @@
           // let road_name_url = that.superMapRootUrl+'/3D-road_Name_S/rest/realspace';
           // that.road_name = that.scene.open(road_name_url);
           //
-          // 8.添加水系NAME
-          let shuixi_name_url = that.superMapRootUrl + withinData[10];
-          that.shuixi_name = that.scene.open(shuixi_name_url);
-          that.cacheData.ShuiXi = withinData[11]
-          that.shuixi_name.then(function (layers) {
-            let textlayer = that.scene.layers.find(withinData[11]);//文字图层
-            //加载后隐藏
-            textlayer.visible = false;
-            //关闭避让
-            textlayer.isOverlapDisplayed = true;
-          });
+
 
           //9.添加县界和乡镇界
           let layer_xianjie = that.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({

src/views/forest.vue

@@ -98,7 +98,7 @@
         </div>
       </div>
       <!-- 地图 -->
-      <supermap ref="supermap" style="width: 100%;height: 100vh;" @showEventDialog="showEventDialog" ></supermap>
+      <supermap ref="supermap" style="width: 100%;height: 100vh;" @showEventDialog="showEventDialog" :showLayer="true" @fatherMethod="fatherMethod"></supermap>
       <!-- 右侧 -->
       <div class="rightbar rightbar-index" ref="right">
         <div class="right-item1">
@@ -425,6 +425,7 @@
                 @showDialog="showDialog"></firespread>
     <eventLocation ref="eventLocation"></eventLocation>
     <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
   </div>
 </template>
 
@@ -457,6 +458,7 @@
   import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
   import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
   import TVWall from '@/components/TVWall.vue' //电视墙弹窗
+  import TVWalls from '@/components/TVWalls.vue' //电视墙弹窗
   import eventdetailsdialog from '@/views/eventdetailsdialog.vue' //事件详情弹窗
   import firespread from '@/views/firespread.vue' //事件详情弹窗
   import Firespread from "./firespread";
@@ -476,6 +478,7 @@
       vBottomMenu,
       eventLocation,
       TVWall,
+      TVWalls,
       dateChoose,
       eventdetailsdialog,
       firespread
@@ -671,7 +674,15 @@
       //     }
       //   })
       // },
-
+      fatherMethod(dianshiqiang, longitude, latitude, item) {
+        this.$refs.TVWalls.showTVWall(
+          dianshiqiang, {
+            longitude: longitude,
+            latitude: latitude,
+          },
+          item
+        );
+      },
       dropLocation(lat, lng,eventCode) {
         this.$refs.supermap.dropLocation(lat, lng,18)
         this.showEventDialog(eventCode)