From 863a692c58b95ee172b39938c1fe2a827d971948 Mon Sep 17 00:00:00 2001
From: lukeyan <1727408482@qq.com>
Date: Wed, 6 Sep 2023 19:43:34 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A6=81=E7=B4=A0=E8=B5=84=E6=BA=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../counterfraud/components/counterDialog.vue |   3 +-
 .../applySupermarket/counterfraud/index.vue   |  11 +-
 .../policeReport/components/reportDialog.vue  |   3 +-
 src/views/factor/components/factorMap.vue     | 178 ++++++-
 src/views/factor/index.vue                    | 442 +++++++++++++++++-
 .../components/warnCompany.vue                |   2 -
 .../realtimeWarning/components/warnMap.vue    |   2 +
 7 files changed, 621 insertions(+), 20 deletions(-)

diff --git a/src/views/applySupermarket/counterfraud/components/counterDialog.vue b/src/views/applySupermarket/counterfraud/components/counterDialog.vue
index 7f6042a..c93a3ef 100644
--- a/src/views/applySupermarket/counterfraud/components/counterDialog.vue
+++ b/src/views/applySupermarket/counterfraud/components/counterDialog.vue
@@ -8,7 +8,7 @@
     @close="close"
   >
     <div class="text">
-      <div style="color: #fff" v-html="this.text"></div>
+      <div v-html="this.text"></div>
     </div>
   </el-dialog>
 </template>
@@ -65,6 +65,7 @@ export default {
       overflow-y: scroll;
     //   border: 0.1px solid #28847e;
       height: 600px;
+      background: #fff;
     }
     .text::-webkit-scrollbar {
       width: 6px;
diff --git a/src/views/applySupermarket/counterfraud/index.vue b/src/views/applySupermarket/counterfraud/index.vue
index 72ffc4e..8d8d52b 100644
--- a/src/views/applySupermarket/counterfraud/index.vue
+++ b/src/views/applySupermarket/counterfraud/index.vue
@@ -41,7 +41,7 @@
                 <div class="icon_green"></div>
               </div>
               <div class="counterfraud_glossary_text">警情简要:</div>
-              <div class="counterfraud_glossary_value">
+              <div :title="item.title" class="counterfraud_glossary_value">
                 {{ item.title }}
               </div>
             </div>
@@ -167,9 +167,9 @@ export default {
         this.total = res.total;
       });
     },
-     // 点击查看详情
+    // 点击查看详情
     check_item(val) {
-      this.$refs.counterDialog.open(val)
+      this.$refs.counterDialog.open(val);
     },
     // 分页--每页多少条
     size_change(val) {
@@ -367,11 +367,14 @@ export default {
             text-align: center;
           }
           .counterfraud_glossary_value {
-            width: 15.7vw;
+            width: 15.5vw;
             height: 5vh;
             line-height: 5vh;
             color: #fff;
             text-align: left;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
           }
         }
         .counterfraud_time {
diff --git a/src/views/applySupermarket/policeReport/components/reportDialog.vue b/src/views/applySupermarket/policeReport/components/reportDialog.vue
index 20c72d7..c22fb23 100644
--- a/src/views/applySupermarket/policeReport/components/reportDialog.vue
+++ b/src/views/applySupermarket/policeReport/components/reportDialog.vue
@@ -8,7 +8,7 @@
     @close="close"
   >
     <div class="text">
-      <div style="color: #fff" v-html="this.text"></div>
+      <div v-html="this.text"></div>
     </div>
   </el-dialog>
 </template>
@@ -65,6 +65,7 @@ export default {
       overflow-y: scroll;
     //   border: 0.1px solid #28847e;
       height: 600px;
+      background: #fff;
     }
     .text::-webkit-scrollbar {
       width: 6px;
diff --git a/src/views/factor/components/factorMap.vue b/src/views/factor/components/factorMap.vue
index 298f438..1b4b12c 100644
--- a/src/views/factor/components/factorMap.vue
+++ b/src/views/factor/components/factorMap.vue
@@ -1,15 +1,179 @@
 <!-- 要素资源地图 -->
 <template>
-    <div></div>
+  <div class="map" id="container"></div>
 </template>
 <script>
+import styleJson from "../../../../public/custom_map_config.json";
+import MapLine from "../../../../public/zhenhaiLine.json";
+import MapPoint from "../../../../public/zhenhaiPoint.json";
 export default {
-    name:'FactorMap',
-    data() {
-        return {}
-    }
-}
+  name: "FactorMap",
+  props: {
+    company_list: {
+      type: Array,
+      default: () => [],
+    },
+    video_list: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      center_point: [121.604192, 29.977299],
+    };
+  },
+  mounted() {
+    this.init_map();
+  },
+  methods: {
+    // 创建地图
+    init_map() {
+      let BMap = window.BMap;
+      let map = new BMap.Map("container", {
+        style: {
+          styleJson,
+        },
+      });
+      let that = this; // 不改指向后面很多函数无法执行
+      let label = new BMap.Label();
+      setTimeout(() => {
+        // 公司点位上图
+        that.company_list.forEach((item) => {
+          var point = new BMap.Point(item.longitude, item.latitude);
+          // 自定义图标;
+          var myIcon = {};
+          myIcon = new BMap.Icon(
+            require("@/assets/factor/factor02.png"),
+            new BMap.Size(20, 40),
+            {
+              imageOffset: new BMap.Size(0, 0, 5), // 设置图片偏移
+            }
+          );
+          var marker = new BMap.Marker(point, { icon: myIcon }); // 创建点位
+          map.addOverlay(marker);
+          marker.addEventListener("click",function() {
+            that.$emit('get_company_text',item)
+          })
+        });
+        // 监控点位上图
+        that.video_list.forEach((item) => {
+            var video_ponit = new BMap.Point(item.longitude, item.latitude);
+            // 自定义图标;
+          var video_icon = {};
+          video_icon = new BMap.Icon(
+            require("@/assets/factor/factor01.png"),
+            new BMap.Size(20, 40),
+            {
+              imageOffset: new BMap.Size(0, 0, 5), // 设置图片偏移
+            }
+          );
+          var video_marker = new BMap.Marker(video_ponit, { icon: video_icon }); // 创建点位
+          map.addOverlay(video_marker);
+          });
+      }, 500);
+      map.centerAndZoom(
+        new BMap.Point(this.center_point[0], this.center_point[1]),
+        13
+      ); // 创建点坐标
+      map.setMinZoom(12); // 初始化地图，设置中心点坐标和地图级别
+      map.setMaxZoom(19);
+      map.enableScrollWheelZoom(true);
+      showPoint();
+      for (var i = 0, n = MapLine.features.length; i < n; i++) {
+        showBoundaryEx(MapLine.features[i]);
+      }
+      //////////////// 创造边界--多边形 /////////////////
+      function showBoundaryEx(city) {
+        var paths = [];
+        var list = city.geometry.coordinates;
+        var polygon = {};
+        if (list.length > 1) {
+          for (let a = 0; a < list.length; a++) {
+            paths = [];
+            for (let i = 0; i < list[a][0].length; i++) {
+              let lat = list[a][0][i][1],
+                lng = list[a][0][i][0];
+              paths.push(new BMap.Point(lng, lat));
+            }
+            polygon = new BMap.Polygon(paths, {
+              fillColor: "#3b4c44",
+              strokeColor: "#0f1423",
+              fillOpacity: 0.6,
+              strokeWeight: 1,
+            }); //创建多边形
+            polygon.disableMassClear();
+            map.addOverlay(polygon); //增加多边形
+          }
+        } else {
+          for (let i = 0; i < list[0].length; i++) {
+            let lat = list[0][i][1],
+              lng = list[0][i][0];
+            paths.push(new BMap.Point(lng, lat));
+          }
+          polygon = new BMap.Polygon(paths, {
+            fillColor: "#3b4c44",
+            strokeColor: "#0f1423",
+            fillOpacity: 0.6,
+            strokeWeight: 1,
+          }); //创建多边形
+          polygon.disableMassClear();
+          map.addOverlay(polygon); //增加多边形
+        }
+        polygon.infowindow = new BMap.InfoWindow();
+        polygon.infowindow.name = city.properties.name;
+        polygon.addEventListener("mouseover", function () {
+          polygon.setFillColor("#ffa500");
+        });
+        polygon.addEventListener("mouseout", function () {
+          map.removeOverlay(label);
+          polygon.setFillColor("#3b4c44");
+        });
+      }
+      //////////////// 分区区名 /////////////////
+      function showPoint() {
+        for (let i = 0; i < MapPoint.features.length; i++) {
+          var opts = {
+            position: new BMap.Point(
+              MapPoint.features[i].geometry.coordinates[0],
+              MapPoint.features[i].geometry.coordinates[1]
+            ), // 指定文本标注所在的地理位置
+            offset: new BMap.Size(-30, -30), // 设置文本偏移量
+          };
+
+          // 创建文本标注对象
+          var unit_name = new BMap.Label(
+            MapPoint.features[i].properties.name,
+            opts
+          );
+          // 自定义文本标注样式
+          unit_name.setStyle({
+            color: "orange",
+            borderRadius: "5px",
+            borderColor: "#ccc",
+            padding: "10px",
+            fontSize: "16px",
+            height: "20px",
+            lineHeight: "20px",
+            backgroundColor: "rgba(0,0,0,0)",
+            border: "0",
+            fontFamily: "微软雅黑",
+          });
+          unit_name.disableMassClear();
+          map.addOverlay(unit_name);
+        }
+      }
+    },
+  },
+};
 </script>
 <style lang="less" scoped>
-
+/* 去除百度地图logo */
+.anchorBL {
+  display: none;
+}
+.map {
+  width: 100%;
+  height: 100%;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/factor/index.vue b/src/views/factor/index.vue
index 56c90ff..c0e1671 100644
--- a/src/views/factor/index.vue
+++ b/src/views/factor/index.vue
@@ -3,22 +3,258 @@
     <div class="factor_body">
       <div class="factor_title">要素资源</div>
       <div class="factor_map">
+        <!-- 要素资源地图 -->
         <div class="map_body">
-            <FactorMap ref="factorMap"></FactorMap>
+          <FactorMap
+            ref="factorMap"
+            :company_list="company_list"
+            :video_list="video_list"
+            @get_company_text="get_company_text"
+          ></FactorMap>
+          <!-- 右上方查询部分 -->
+          <div class="right_search">
+            <el-form :model="search" class="search_form">
+              <el-form-item>
+                <el-select v-model="search.select">
+                  <el-option
+                    v-for="item in select_list"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.label"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-input
+                  v-model="search.word"
+                  placeholder="请选择关键词"
+                ></el-input>
+              </el-form-item>
+              <el-form-item>
+                <el-button icon="el-icon-search" @click="search_map"
+                  >搜索</el-button
+                >
+                <el-button icon="el-icon-refresh-right" @click="reset_map"
+                  >重置</el-button
+                >
+              </el-form-item>
+            </el-form>
+          </div>
+          <!-- 左上方查询部分 -->
+          <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_video()">{{
+                this.btn_video
+              }}</el-button>
+              <el-button size="small" @click="get_item()">{{
+                this.btn_item
+              }}</el-button>
+            </div>
+          </div>
+          <!-- 公司信息文本展示 -->
+          <div v-if="company_flag" class="company_text">
+            <!-- 伪弹窗头部 -->
+            <div class="text_head">
+              <div class="title" :title="text_company">{{ text_company }}</div>
+              <div class="text_icon" @click="close_company">
+                <i class="el-icon-close"></i>
+              </div>
+            </div>
+            <div class="text_content">
+              <div class="text_content_types">
+                <div class="types_text">企业类型:</div>
+                <div class="types_value"></div>
+              </div>
+              <div class="text_content_item">
+                <div class="item_text">企业地址:</div>
+                <div class="item_value">{{ company_address }}</div>
+              </div>
+              <div class="text_content_item">
+                <div class="item_text">企业性质:</div>
+                <div class="item_value">{{ company_nature }}</div>
+              </div>
+              <div class="text_content_item">
+                <div class="item_text">成立日期:</div>
+                <div class="item_value">{{ start_date }}</div>
+              </div>
+              <div class="text_content_item">
+                <div class="item_text">营业期限:</div>
+                <div class="item_value">{{ time_limit }}</div>
+              </div>
+              <div class="text_content_item">
+                <div class="item_text">登记机关:</div>
+                <div class="item_value">{{ sign_organ }}</div>
+              </div>
+              <div class="text_content_item">
+                <div class="item_text">企业法人:</div>
+                <div class="item_value">{{ legal_person }}</div>
+              </div>
+              <div class="text_content_item">
+                <div class="item_text">安全责任人:</div>
+                <div class="item_value">{{ safe_person }}</div>
+              </div>
+              <div class="text_content_item">
+                <div class="item_text">责任人电话:</div>
+                <div class="item_value">{{ person_phone }}</div>
+              </div>
+              <div class="text_content_item">
+                <div class="item_text">经营范围:</div>
+                <div class="item_value">{{ company_scope }}</div>
+              </div>
+            </div>
+            <!-- 跳转 -->
+            <div class="text_footer" @click="turn()">
+              {{ footer_text }}
+            </div>
+          </div>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script>
-import FactorMap from "./components/factorMap"
+import FactorMap from "./components/factorMap";
+import { statistic, queryCompany, queryVideo } from "@/api/factorResources";
 export default {
   name: "factor",
-  components:{
-    FactorMap
+  components: {
+    FactorMap,
   },
   data() {
-    return {};
+    return {
+      company_list: [], // 七个区域所有的企业
+      video_list: [], // 七个区域所有监控单位
+      search: {
+        word: "",
+        select: "企业",
+      },
+      select_list: [
+        { label: "企业", value: "1" },
+        { label: "监控", value: "2" },
+      ],
+      btn_video: "", // 复选框文字
+      btn_item: "", // 复选框文字
+      company_flag: false, // 公司详情框展示
+      /////////// 以下范围公司详情框所需对应变量声明
+      text_company: "",
+      company_address: "",
+      company_nature: "",
+      start_date: "",
+      time_limit: "",
+      sign_organ: "",
+      legal_person: "",
+      safe_person: "",
+      company_scope: "",
+      footer_text: "查看企业档案>>",
+      id: "",
+      ///////////
+    };
+  },
+  created() {
+    this.get_list();
+  },
+  methods: {
+    // 七个区域所有的企业
+    get_list() {
+      statistic().then((res) => {
+        this.company_list = res.data.companyInfoList;
+        this.btn_item = `园区企业(${res.data.companyInfoList.length})`;
+        this.video_list = res.data.deviceVideoInfoList;
+        this.btn_video = `视频监控(${res.data.deviceVideoInfoList.length})`;
+      });
+    },
+    // 展示所有点位
+    get_all() {
+      statistic().then((res) => {
+        this.company_list = res.data.companyInfoList;
+        this.video_list = res.data.deviceVideoInfoList;
+        // 重新在地图打点
+        this.$refs.factorMap.init_map();
+      });
+    },
+    // 展示园区企业
+    get_item() {
+      let param = {
+        name: "",
+      };
+      queryCompany(param).then((res) => {
+        this.company_list = res.data;
+        this.video_list = [];
+        // 重新在地图打点
+        this.$refs.factorMap.init_map();
+      });
+    },
+    // 展示视频监控
+    get_video() {
+      let param = {
+        name: "",
+      };
+      queryVideo(param).then((res) => {
+        this.video_list = res.data;
+        this.company_list = [];
+        // 重新在地图打点
+        this.$refs.factorMap.init_map();
+      });
+    },
+    // 查询企业
+    search_map() {
+      let param = {
+        name: this.search.word,
+      };
+      // 判断时企业查询还是监控查询
+      if (this.search.select == "企业") {
+        queryCompany(param).then((res) => {
+          this.company_list = res.data;
+          this.video_list = [];
+          // 重新在地图打点
+          this.$refs.factorMap.init_map();
+        });
+      } else {
+        queryVideo(param).then((res) => {
+          this.video_list = res.data;
+          this.company_list = [];
+          // 重新在地图打点
+          this.$refs.factorMap.init_map();
+        });
+      }
+    },
+    // 地图点位点击展开公司详情弹窗
+    get_company_text(item) {
+      this.company_flag = true;
+      console.log("item111", item);
+      this.text_company = item.companyName;
+      this.company_address = item.companyAddress;
+      this.company_nature = item.companyNature;
+      this.start_date = item.establishDate;
+      this.time_limit = item.businessTermDate;
+      this.sign_organ = item.registerAuthority;
+      this.legal_person = item.legalPerson;
+      this.safe_person = item.emergencyContact;
+      this.person_phone = item.emergencyContactPhone;
+      this.company_scope = item.businessScope;
+      this.id = item.id;
+    },
+    // 点击跳转企业档案详情页面
+    turn() {
+      sessionStorage.setItem("companyID", this.id);
+      sessionStorage.setItem("companyName", this.text_company);
+      this.$router.push({
+        name: "archives",
+      });
+    },
+    // 点击关闭公司详情弹窗
+    close_company() {
+      this.company_flag = false;
+    },
+    // 重置点位
+    reset_map() {
+      this.search.select = "企业";
+      this.search.word = "";
+      this.get_all();
+    },
   },
 };
 </script>
@@ -57,6 +293,202 @@ export default {
         width: 98%;
         height: 82vh;
         border: 0.1px solid #28847e;
+        position: relative;
+        .right_search {
+          top: 20px;
+          right: 20px;
+          position: absolute;
+          width: 50%;
+          display: flex;
+          flex-direction: row-reverse;
+          z-index: 10;
+          /deep/.el-form {
+            display: flex;
+            .el-form-item {
+              display: flex;
+              margin-left: 0.5vw;
+            }
+            .el-form-item__label {
+              text-align: center;
+              color: #fff;
+            }
+            .el-form-item__content {
+              .el-input__inner {
+                background: #1c2528;
+                border: 0.1px solid #28847e;
+                color: #fff;
+              }
+              .el-select {
+                width: 100px;
+              }
+              //  .el-scrollbar__view .el-select-dropdown__list {
+              //   background: #1c2528;
+              //  }
+              /* 查询框点击颜色变化 */
+              .el-input__inner:focus,
+              .el-input__inner:hover {
+                border-color: #2a968f;
+              }
+              .el-range-input {
+                color: #fff;
+                background: #283436;
+              }
+            }
+            .el-button {
+              border: 0.1px solid #28847e;
+              color: #fff;
+              background: #1c2528;
+              position: relative;
+              overflow: hidden;
+              &:before {
+                content: "";
+                position: absolute;
+                top: -100%;
+                left: -50%;
+                width: 150%;
+                height: 2px;
+                background-color: #fff;
+                box-shadow: 0 0 4px 1px #fff;
+                transform: rotateZ(-45deg);
+              }
+              &:hover::before {
+                transition: 0.7s;
+                top: 200%;
+                left: 50%;
+              }
+            }
+            .el-button:hover {
+              color: #34e1b3;
+              background: #4d8f89;
+              border: 0.1px solid #137868;
+            }
+          }
+        }
+        .left_check {
+          width: 13vw;
+          height: 18vh;
+          border: 0.1px solid #28847e;
+          background: #1c2528;
+          border-radius: 4px;
+          position: absolute;
+          z-index: 20;
+          top: 20px;
+          left: 20px;
+          .check_title {
+            width: 13vw;
+            height: 4vh;
+            text-align: center;
+            line-height: 4vh;
+            color: aliceblue;
+          }
+          .check_body {
+            margin-top: 1vh;
+            margin-left: 1vw;
+            width: 11vw;
+            height: 13vh;
+            display: flex;
+            flex-direction: column;
+            .el-button {
+              width: 7vw;
+              margin-left: 20px;
+              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;
+            }
+            .el-button:focus,
+            .el-button:hover {
+              background: #4d8f89;
+              text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+            }
+          }
+        }
+        .company_text {
+          width: 18vw;
+          height: 60vh;
+          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: 50vh;
+            margin-top: 1vh;
+            overflow-y: scroll;
+            .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_content::-webkit-scrollbar {
+            width: 6px;
+            background-color: rgba(0, 0, 0, 0);
+            border-radius: 4px;
+          }
+          .text_content::-webkit-scrollbar-thumb {
+            width: 5px;
+            background-color: #28847e;
+            border-radius: 4px;
+          }
+          .text_footer {
+            width: 18vw;
+            height: 4vh;
+            line-height: 4vh;
+            text-align: center;
+            color: #34e1b3;
+            cursor: pointer;
+          }
+        }
       }
     }
   }
diff --git a/src/views/realtimeWarning/components/warnCompany.vue b/src/views/realtimeWarning/components/warnCompany.vue
index 065f651..7532094 100644
--- a/src/views/realtimeWarning/components/warnCompany.vue
+++ b/src/views/realtimeWarning/components/warnCompany.vue
@@ -209,7 +209,6 @@ export default {
     },
     // 通知蓝色tab页查询
     blue_warn_search() {
-      console.log("222222");
       this.$refs.blueWarn.search();
     },
     // 整体刷新
@@ -221,7 +220,6 @@ export default {
       this.yellow_warn_search();
       this.green_warn_search();
       this.blue_warn_search();
-      console.log('1231231231231');
     },
     dealWithData(data) {
       let c = [];
diff --git a/src/views/realtimeWarning/components/warnMap.vue b/src/views/realtimeWarning/components/warnMap.vue
index 81b32ed..c37585e 100644
--- a/src/views/realtimeWarning/components/warnMap.vue
+++ b/src/views/realtimeWarning/components/warnMap.vue
@@ -46,8 +46,10 @@ export default {
       setTimeout(() => {
         let list_item = [];
         if (!this.is_flag) {
+          // 全点位预览
           list_item = this.company_list;
         } else {
+          // 选中点位查看
           list_item = this.trans_list;
         }
         list_item.forEach((item) => {