Merge pull request '要素资源危化品车辆点位' (#142) from lukeyan into master

Reviewed-on: #142

src/api/factorResources/index.js

@@ -30,4 +30,12 @@ export function statistic(params) {
         method: 'get',
         params
     })
+}
+// 车辆点位数据
+export function car_point(params) {
+    return request({
+        url:'/SafeCompanyVehicleTrack/list',
+        method:'get',
+        params
+    })
 }

src/utils/request.js

@@ -6,7 +6,7 @@ axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 const request = axios.create({
   //baseURL: 'http://172.18.113.50:8080/zhapi',
   //baseURL: 'http://172.18.113.13:8080/zhapi', // 孙强
-  //baseURL: 'http://172.18.113.8:8080/zhapi', // 刘建
+  //baseURL: 'http://172.18.100.57:8080/zhapi', // 刘建
   //baseURL: 'http://192.168.0.188:8888/zhapi',
   //baseURL: 'http://121.41.91.94:12002/zhapi',
   baseURL: `http://${window.location.host}/zhapi`,
@@ -53,7 +53,7 @@ request.interceptors.response.use(
 
         case 401:
           if (vm.$route.name !== 'login') {
-            vm.$Message.warning({
+            vm.$message.warning({
               content: '身份认证信息已失效，请重新登录。',
               duration: 2,
               onClose: () => {
@@ -65,14 +65,14 @@ request.interceptors.response.use(
           }
           break
         case 403:
-          vm.$Message.warning({
+          vm.$message.warning({
             content: response.data.msg,
             duration: 3
           })
           break
         case 500:
           // 如果是返回的文件
-          vm.$Message.warning({
+          vm.$message.warning({
             content: response.data.msg,
             duration: 3
           })

src/views/factor/components/factorMap.vue

@@ -9,18 +9,25 @@ import MapPoint from "../../../../public/zhenhaiPoint.json";
 export default {
   name: "FactorMap",
   props: {
+    // 园区企业
     company_list: {
       type: Array,
       default: () => [],
     },
+    // 车辆监控
     video_list: {
       type: Array,
       default: () => [],
     },
+    // 危化品车辆
+    car_list: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
-      center_point: [121.604192, 29.977299],
+      center_point: [121.619992, 30.025703],
     };
   },
   mounted() {
@@ -52,14 +59,14 @@ export default {
           );
           var marker = new BMap.Marker(point, { icon: myIcon }); // 创建点位
           map.addOverlay(marker);
-          marker.addEventListener("click",function() {
+          marker.addEventListener("click", function () {
-            that.$emit('get_company_text',item)
+            that.$emit("get_company_text", item);
-          })
+          });
         });
         // 监控点位上图
         that.video_list.forEach((item) => {
-            var video_ponit = new BMap.Point(item.longitude, item.latitude);
+          var video_ponit = new BMap.Point(item.longitude, item.latitude);
-            // 自定义图标;
+          // 自定义图标;
           var video_icon = {};
           video_icon = new BMap.Icon(
             require("@/assets/factor/factor01.png"),
@@ -70,19 +77,45 @@ export default {
           );
           var video_marker = new BMap.Marker(video_ponit, { icon: video_icon }); // 创建点位
           map.addOverlay(video_marker);
+          video_marker.addEventListener("click", function () {
+            // 视频监控详情弹窗点击打开
+            that.$emit("get_video_text", item);
           });
+        });
+        // 危化品车辆点位上图
+        that.car_list.forEach((item) => {
+          var car_point = new BMap.Point(item.longitude, item.latitude);
+          // 自定义图标;
+          var car_icon = {};
+          car_icon = new BMap.Icon(
+            require("@/assets/factor/factor03.png"),
+            new BMap.Size(20, 40),
+            {
+              imageOffset: new BMap.Size(0, 0, 5), // 设置图片偏移
+            }
+          );
+          var car_marker = new BMap.Marker(car_point, { icon: car_icon }); // 创建点位
+          map.addOverlay(car_marker);
+          car_marker.addEventListener("click",function() {
+            // 查看车辆轨迹
+            // 查看轨迹的点击事件是要重新创建地图的，以该车坐标为中心
+            that.$emit('get_car_text',item)
+          })
+        });
       }, 500);
       map.centerAndZoom(
         new BMap.Point(this.center_point[0], this.center_point[1]),
-        13
+        14
       ); // 创建点坐标
       map.setMinZoom(12); // 初始化地图，设置中心点坐标和地图级别
       map.setMaxZoom(19);
       map.enableScrollWheelZoom(true);
-      showPoint();
+      showPoint(); // 分区区名
-      for (var i = 0, n = MapLine.features.length; i < n; i++) {
+      // for (var i = 0, n = MapLine.features.length; i < n; i++) {
-        showBoundaryEx(MapLine.features[i]);
+      //   showBoundaryEx(MapLine.features[i]);
-      }
+      // }
+      // 只需要懈浦镇区域展示
+      showBoundaryEx(MapLine.features[5]); // 传入懈浦镇边界数据，准备创造懈浦镇多边形
       //////////////// 创造边界--多边形 /////////////////
       function showBoundaryEx(city) {
         var paths = [];
@@ -164,6 +197,39 @@ export default {
         }
       }
     },
+    // 根据车辆点位重新创建地图
+    cause_car_line_map(item) {
+      let BMap = window.BMap;
+      let map = new BMap.Map("container", {
+        style: {
+          styleJson,
+        },
+      });
+      //let that = this; // 不改指向后面很多函数无法执行
+      //let label = new BMap.Label();
+      setTimeout(() => {
+        var point = new BMap.Point(item.longitude, item.latitude)
+        // 自定义图标;
+          var myIcon = {};
+          myIcon = new BMap.Icon(
+            require("@/assets/factor/factor03.png"),
+            new BMap.Size(20, 40),
+            {
+              imageOffset: new BMap.Size(0, 0, 5), // 设置图片偏移
+            }
+          );
+          var marker = new BMap.Marker(point, { icon: myIcon }); // 创建点位
+          map.addOverlay(marker);
+      },500)
+
+      map.centerAndZoom(
+        new BMap.Point(item.longitude, item.latitude),
+        16
+      ); // 创建点坐标
+      map.setMinZoom(12); // 初始化地图，设置中心点坐标和地图级别
+      map.setMaxZoom(19);
+      map.enableScrollWheelZoom(true);
+    },
   },
 };
 </script>

src/views/factor/index.vue

@@ -9,7 +9,10 @@
             ref="factorMap"
             :company_list="company_list"
             :video_list="video_list"
+            :car_list="car_list"
             @get_company_text="get_company_text"
+            @get_video_text="get_video_text"
+            @get_car_text="get_car_text"
           ></FactorMap>
           <!-- 右上方查询部分 -->
           <div class="right_search">
@@ -45,17 +48,20 @@
           <div class="left_check">
             <div class="check_title">图层</div>
             <div class="check_body">
-              <el-button size="small" @click="get_all()">全部</el-button>
+              <!-- <el-button size="small" @click="get_all()">全部</el-button> -->
               <el-button size="small" @click="get_video()">{{
                 this.btn_video
               }}</el-button>
               <el-button size="small" @click="get_item()">{{
                 this.btn_item
               }}</el-button>
+              <el-button size="small" @click="get_car()">{{
+                this.btn_car
+              }}</el-button>
             </div>
           </div>
           <!-- 公司信息文本展示 -->
-          <div v-if="company_flag" class="company_text">
+          <div v-if="company_flag == '1'" class="company_text">
             <!-- 伪弹窗头部 -->
             <div class="text_head">
               <div class="title" :title="text_company">{{ text_company }}</div>
@@ -110,6 +116,36 @@
               {{ footer_text }}
             </div>
           </div>
+          <!-- 监控文本展示 -->
+          <div v-else-if="company_flag == '2'" class="video_text">
+            <!-- 伪弹窗头部 -->
+            <div class="text_head">
+              <div class="title" :title="video.video_name">
+                {{ video.video_name }}
+              </div>
+              <div class="text_icon" @click="close_video">
+                <i class="el-icon-close"></i>
+              </div>
+            </div>
+            <div class="text_content">
+              <div class="text_content_item">
+                <div class="item_text">隶属企业:</div>
+                <div class="item_value">{{ video.company_name }}</div>
+              </div>
+              <div class="text_content_item">
+                <div class="item_text">监控:</div>
+                <div class="item_value">{{ video.video_name }}</div>
+              </div>
+              <div class="text_content_item">
+                <div class="item_text">监控状态:</div>
+                <div class="item_value">{{ video.video_status }}</div>
+              </div>
+            </div>
+            <!-- 跳转 -->
+            <div class="text_footer" @click="turn_video()">
+              {{ video_footer_text }}
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -117,7 +153,12 @@
 </template>
 <script>
 import FactorMap from "./components/factorMap";
-import { statistic, queryCompany, queryVideo } from "@/api/factorResources";
+import {
+  statistic,
+  queryCompany,
+  queryVideo,
+  car_point,
+} from "@/api/factorResources";
 export default {
   name: "factor",
   components: {
@@ -127,6 +168,7 @@ export default {
     return {
       company_list: [], // 七个区域所有的企业
       video_list: [], // 七个区域所有监控单位
+      car_list:[], // 车辆点位
       search: {
         word: "",
         select: "企业",
@@ -137,7 +179,8 @@ export default {
       ],
       btn_video: "", // 复选框文字
       btn_item: "", // 复选框文字
-      company_flag: false, // 公司详情框展示
+      btn_car:'', // 危化品车辆文字
+      company_flag: "0", // 公司详情框展示
       /////////// 以下范围公司详情框所需对应变量声明
       text_company: "",
       company_address: "",
@@ -149,20 +192,30 @@ export default {
       safe_person: "",
       company_scope: "",
       footer_text: "查看企业档案>>",
+      video_footer_text: "查看实时监控>>",
       id: "",
       ///////////
+      ////////// 以下范围视频监控框所需对应变量声明
+      video: {
+        video_name: "", // 监控设备名
+        company_name: "", // 隶属企业名
+        video_status: "", // 监控状态
+      },
     };
   },
   created() {
     this.get_list();
+    // 默认地图打开展示视频监控
+    this.get_video();
+    this.get_car_point();
   },
   methods: {
     // 七个区域所有的企业
     get_list() {
       statistic().then((res) => {
-        this.company_list = res.data.companyInfoList;
+        // this.company_list = res.data.companyInfoList;
         this.btn_item = `园区企业(${res.data.companyInfoList.length})`;
-        this.video_list = res.data.deviceVideoInfoList;
+        // this.video_list = res.data.deviceVideoInfoList;
         this.btn_video = `视频监控(${res.data.deviceVideoInfoList.length})`;
       });
     },
@@ -177,28 +230,48 @@ export default {
     },
     // 展示园区企业
     get_item() {
+      this.company_flag = "0";
       let param = {
         name: "",
       };
       queryCompany(param).then((res) => {
         this.company_list = res.data;
         this.video_list = [];
+        this.car_list = [];
         // 重新在地图打点
         this.$refs.factorMap.init_map();
       });
     },
     // 展示视频监控
     get_video() {
+      this.company_flag = "0";
       let param = {
         name: "",
       };
       queryVideo(param).then((res) => {
         this.video_list = res.data;
         this.company_list = [];
+        this.car_list = []
         // 重新在地图打点
         this.$refs.factorMap.init_map();
       });
     },
+    // 展示危化品车辆点位
+    async get_car() {
+      this.company_flag = '0'
+      let res = await car_point();
+      console.log("resss", res);
+      if(res.code == 200) {
+        this.car_list = res.data
+        this.company_list = [];
+        this.video_list = []
+         // 重新在地图打点
+        this.$refs.factorMap.init_map();
+        // this.btn_car = `危化品车辆(${res.data.length})`;
+      } else if (res.code == 500) {
+        this.$message.warning(res.msg)
+      }
+    },
     // 查询企业
     search_map() {
       let param = {
@@ -223,7 +296,7 @@ export default {
     },
     // 地图点位点击展开公司详情弹窗
     get_company_text(item) {
-      this.company_flag = true;
+      this.company_flag = 1;
       console.log("item111", item);
       this.text_company = item.companyName;
       this.company_address = item.companyAddress;
@@ -237,6 +310,35 @@ export default {
       this.company_scope = item.businessScope;
       this.id = item.id;
     },
+    // 地图点位点击展开视频弹窗
+    get_video_text(item) {
+      this.company_flag = 2;
+      console.log("item222", item);
+      this.video.video_name = item.deviceName;
+      this.video.company_name = item.companyName;
+      if (item.isOnline == "1") {
+        this.video.video_status = "在线";
+      } else if (item.isOnline == "2") {
+        this.video.video_status = "离线";
+      }
+    },
+    // 查看危化品车辆轨迹
+    get_car_text(item) {
+      // 查看轨迹的点击事件是要重新创建地图的，以该车坐标为中心
+      console.log('item',item);
+      this.$refs.factorMap.cause_car_line_map(item)
+    },
+
+    async get_car_point() {
+      let res = await car_point();
+      console.log("resss", res);
+      if(res.code == 200) {
+        // this.car_list = res.data
+        this.btn_car = `危化品车辆(${res.data.length})`;
+      } else if (res.code == 500) {
+        this.$message.warning(res.msg)
+      }
+    },
     // 点击跳转企业档案详情页面
     turn() {
       sessionStorage.setItem("companyID", this.id);
@@ -245,15 +347,19 @@ export default {
         name: "archives",
       });
     },
+    turn_video() {},
     // 点击关闭公司详情弹窗
     close_company() {
-      this.company_flag = false;
+      this.company_flag = 0;
+    },
+    close_video() {
+      this.company_flag = 0;
     },
     // 重置点位
     reset_map() {
       this.search.select = "企业";
       this.search.word = "";
-      this.get_all();
+      this.get_video();
     },
   },
 };
@@ -314,7 +420,7 @@ export default {
             }
             .el-form-item__content {
               .el-input__inner {
-                background: #1c2528;
+                background: #212f30;
                 border: 0.1px solid #28847e;
                 color: #fff;
               }
@@ -337,7 +443,7 @@ export default {
             .el-button {
               border: 0.1px solid #28847e;
               color: #fff;
-              background: #1c2528;
+              background: #212f30;
               position: relative;
               overflow: hidden;
               &:before {
@@ -368,7 +474,7 @@ export default {
           width: 13vw;
           height: 18vh;
           border: 0.1px solid #28847e;
-          background: #1c2528;
+          background: #212f30;
           border-radius: 4px;
           position: absolute;
           z-index: 20;
@@ -389,14 +495,14 @@ export default {
             display: flex;
             flex-direction: column;
             .el-button {
-              width: 7vw;
+              width: 11vw;
-              margin-left: 20px;
+              margin-left: 0px;
               margin-bottom: 5px;
               color: #fff;
               background: rgba(0, 0, 0, 0);
               border: 0.1px solid rgba(0, 0, 0, 0);
               border-radius: 4px;
-              text-align: left;
+              text-align: center;
             }
             .el-button:focus,
             .el-button:hover {
@@ -489,6 +595,79 @@ export default {
             cursor: pointer;
           }
         }
+        .video_text {
+          width: 18vw;
+          height: 30vh;
+          position: absolute;
+          top: 90px;
+          right: 20px;
+          border: 0.1px solid #28847e;
+          border-radius: 4px;
+          background: #283436;
+          .text_head {
+            width: 18vw;
+            height: 4vh;
+            display: flex;
+            justify-content: space-around;
+            .title {
+              margin-left: 8px;
+              width: 15vw;
+              height: 4vh;
+              line-height: 4vh;
+              text-align: left;
+              color: aliceblue;
+              text-shadow: 0 0 9px #86d49d;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              overflow: hidden;
+              letter-spacing: 2px;
+              cursor: pointer;
+            }
+            .text_icon {
+              width: 2vw;
+              height: 4vh;
+              text-align: center;
+              line-height: 4vh;
+              color: #e55b5b;
+              cursor: pointer;
+            }
+            .text_icon:hover {
+              text-shadow: 0 0 9px #86d49d;
+            }
+          }
+          .text_content {
+            margin-left: 1vw;
+            width: 16vw;
+            height: 20vh;
+            margin-top: 1vh;
+            .text_content_types {
+              margin-bottom: 5px;
+              .types_text {
+                color: antiquewhite;
+              }
+            }
+            .text_content_item {
+              margin-bottom: 5px;
+              display: flex;
+              .item_text {
+                width: 5vw;
+                color: antiquewhite;
+              }
+              .item_value {
+                width: 11vw;
+                color: #fff;
+              }
+            }
+          }
+          .text_footer {
+            width: 18vw;
+            height: 4vh;
+            line-height: 4vh;
+            text-align: center;
+            color: #34e1b3;
+            cursor: pointer;
+          }
+        }
       }
     }
   }

src/views/factorResources/index.vue

@@ -388,7 +388,7 @@ export default {
                     right: 14px;
                     width: 18px;
                     height: 18px;
-                    background: url('../../../public/pbImg/关闭.png') no-repeat;
+                    background: url('../../../public/pbImg/close.png') no-repeat;
                     background-size: 100% 100%;
                     cursor: pointer;
                 }
@@ -581,7 +581,7 @@ export default {
                     right: 14px;
                     width: 18px;
                     height: 18px;
-                    background: url('../../../public/pbImg/关闭.png') no-repeat;
+                    background: url('../../../public/pbImg/close.png') no-repeat;
                     background-size: 100% 100%;
                     cursor: pointer;
                 }

src/views/realtimeWarning/components/warnMap.vue

@@ -137,7 +137,7 @@ export default {
             point_text.setStyle({
               width: "340px",
               height: "238px",
-              background: "url(pbImg/气泡弹窗1.png) no-repeat",
+              background: "url(pbImg/dialogback.png) no-repeat",
               backgroundSize: "100% 100%",
               border: "0",
               color: "#fff",
@@ -146,7 +146,7 @@ export default {
             point_text.setContent(`
                      <div style='width:100%;display:flex;justify-content: space-between;align-items: center;'>
                      <h4 style='margin:12px;font-size: 14px;color: #FFE6D9;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; cursor: pointer;'>${item.companyName}</h4>
-                     <div class='closeBtn' style='background: url(pbImg/关闭.png)  no-repeat;width:20px;height:20px;background-size: 100% 100%;margin-right:10px; cursor: pointer;"'></div></div>
+                     <div class='closeBtn' style='background: url(pbImg/close.png)  no-repeat;width:20px;height:20px;background-size: 100% 100%;margin-right:10px; cursor: pointer;"'></div></div>
                      <div style='margin:0 auto;font-size: 14px;width:316px;height:108px;padding:0 12px;background: rgba(108,128,151,0.20);border: 1px solid rgba(73,84,97,1);'>
                      <h4 style='height:33%;opacity: 0.8;margin:0;line-height:38px;font-weight:300;'><span style="color:#D0DEEE;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">一级指标：</span>${item.levelIndexOne}</h4>
                      <div title="${item.levelIndexThree}" style='height:33%;opacity: 0.8;margin:0;line-height:38px;font-weight:300;overflow:hidden; text-overflow: ellipsis;white-space: nowrap'><span style="color:#D0DEEE;">预警指标：</span>"${item.levelIndexThree}"异常</div>