111

package.json

@@ -47,6 +47,9 @@
     "element-ui": "2.15.13",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
+    "highcharts": "^7.2.2",
+    "highcharts-more": "^0.1.7",
+    "highcharts-vue": "^1.4.3",
     "highlight.js": "9.18.5",
     "html2canvas": "^1.4.1",
     "js-beautify": "1.13.0",

src/api/map.js

+import request from '@/utils/request'
+import qs from 'querystring'
+// 项目信息列表
+export const projectList = (params) => {
+    return request({
+        url: '/system/bigScreen/selectLedgerProjectList',
+        method: 'get',
+        params
+    })
+}
+
+
+// 项目，楼宇，楼层统计
+export const leftEvaluation = (params) => {
+    return request({
+        url: '/system/bigScreen/evaluationDataStatistics',
+        method: 'get',
+        params
+    })
+}
+
+
+// 全国风险，年度新增
+export const centerStatistic = (params) => {
+    return request({
+        url: '/system/bigScreen/nationalRiskStatistics',
+        method: 'get',
+        params
+    })
+}
+
+
+// 总体风险指数排名
+export const leftRiskSort = (params) => {
+    return request({
+        url: '/system/bigScreen/riskIndexRanking',
+        method: 'get',
+        params
+    })
+}
+
+
+// 年度风险数量统计
+export const leftAnnualSort = (params) => {
+    return request({
+        url: '/system/bigScreen/annualRiskStatistics',
+        method: 'get',
+        params
+    })
+}
+// 
+// 年度风险数量统计
+export const rightlevelStatic = (params) => {
+    return request({
+        url: '/system/bigScreen/riskLevelStatistics',
+        method: 'get',
+        params
+    })
+}
+
+// 项目风险级别排名
+export const rightAccessLevel = (params) => {
+    return request({
+        url: '/system/bigScreen/riskProjectRanking',
+        method: 'get',
+        params
+    })
+}
+
+export const rightAccidentType = (params) => {
+    return request({
+        url: '/system/bigScreen/accidentTypeStatistics',
+        method: 'get',
+        params
+    })
+}
+
+export const topProjectDetail = (params) => {
+    return request({
+        url: '/system/bigScreen/projectStatisticsDetail',
+        method: 'get',
+        params
+    })
+}
+
+
+// 获取项目下的楼宇
+export const detailBuilding = (id) => {
+    return request({
+        url: '/system/bigScreen/building/list/' + id,
+        method: 'get',
+    })
+}
+
+// 根据楼宇id获取楼层列表
+export const detailFloor = (id) => {
+    return request({
+        url: '/system/bigScreen/floor/list/' + id,
+        method: 'get',
+    })
+}
+
+// 项目风险信息
+export function detailProjectRisk(params) {
+    return request({
+        url: '/system/bigScreen/projectRiskInformation',
+        method: 'get',
+        params
+    })
+}
+
+// 项目风险信息
+export function detailDictList(params) {
+    return request({
+        url: '/system/dict/data/list/all',
+        method: 'get',
+        params
+    })
+}
+
+// 获取地图统计数据
+export function centerMap(params) {
+    return request({
+        url: '/system/bigScreen/getRiskMapStatistics',
+        method: 'get',
+        params
+    })
+}
\ No newline at end of file

src/assets/map/tooltip-bg.svg

+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="231px" height="141px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <mask fill="white" id="clip99">
+      <path d="M 8.14464262531554 0.992426716141013  C 8.14464262531554 0.992426716141013  0.168227190768121 11.1871280148423  0.168227190768121 11.1871280148423  C 0.168227190768121 11.1871280148423  0.168227190768121 127.682348794063  0.168227190768121 127.682348794063  C 0.168227190768121 127.682348794063  12.7971157591057 140.788998144712  12.7971157591057 140.788998144712  C 12.7971157591057 140.788998144712  219.49872989542 140.788998144712  219.49872989542 140.788998144712  C 219.49872989542 140.788998144712  230.133514605121 127.682348794063  230.133514605121 127.682348794063  C 230.133514605121 127.682348794063  230.133514605121 17.01246567718  230.133514605121 17.01246567718  C 230.133514605121 17.01246567718  220.827260728453 9.73115398886828  220.827260728453 9.73115398886828  C 220.827260728453 9.73115398886828  98.5435816804904 9.73115398886828  98.5435816804904 9.73115398886828  C 98.5435816804904 9.73115398886828  89.2386354129102 0.992426716141013  89.2386354129102 0.992426716141013  C 89.2386354129102 0.992426716141013  8.14464262531554 0.992426716141013  8.14464262531554 0.992426716141013  Z " fill-rule="evenodd" />
+    </mask>
+  </defs>
+  <g transform="matrix(1 0 0 1 -610 -722 )">
+    <path d="M 8.14464262531554 0.992426716141013  C 8.14464262531554 0.992426716141013  0.168227190768121 11.1871280148423  0.168227190768121 11.1871280148423  C 0.168227190768121 11.1871280148423  0.168227190768121 127.682348794063  0.168227190768121 127.682348794063  C 0.168227190768121 127.682348794063  12.7971157591057 140.788998144712  12.7971157591057 140.788998144712  C 12.7971157591057 140.788998144712  219.49872989542 140.788998144712  219.49872989542 140.788998144712  C 219.49872989542 140.788998144712  230.133514605121 127.682348794063  230.133514605121 127.682348794063  C 230.133514605121 127.682348794063  230.133514605121 17.01246567718  230.133514605121 17.01246567718  C 230.133514605121 17.01246567718  220.827260728453 9.73115398886828  220.827260728453 9.73115398886828  C 220.827260728453 9.73115398886828  98.5435816804904 9.73115398886828  98.5435816804904 9.73115398886828  C 98.5435816804904 9.73115398886828  89.2386354129102 0.992426716141013  89.2386354129102 0.992426716141013  C 89.2386354129102 0.992426716141013  8.14464262531554 0.992426716141013  8.14464262531554 0.992426716141013  Z " fill-rule="nonzero" fill="#0d1a28" stroke="none" fill-opacity="0.8" transform="matrix(1 0 0 1 610 722 )" />
+    <path d="M 8.14464262531554 0.992426716141013  C 8.14464262531554 0.992426716141013  0.168227190768121 11.1871280148423  0.168227190768121 11.1871280148423  C 0.168227190768121 11.1871280148423  0.168227190768121 127.682348794063  0.168227190768121 127.682348794063  C 0.168227190768121 127.682348794063  12.7971157591057 140.788998144712  12.7971157591057 140.788998144712  C 12.7971157591057 140.788998144712  219.49872989542 140.788998144712  219.49872989542 140.788998144712  C 219.49872989542 140.788998144712  230.133514605121 127.682348794063  230.133514605121 127.682348794063  C 230.133514605121 127.682348794063  230.133514605121 17.01246567718  230.133514605121 17.01246567718  C 230.133514605121 17.01246567718  220.827260728453 9.73115398886828  220.827260728453 9.73115398886828  C 220.827260728453 9.73115398886828  98.5435816804904 9.73115398886828  98.5435816804904 9.73115398886828  C 98.5435816804904 9.73115398886828  89.2386354129102 0.992426716141013  89.2386354129102 0.992426716141013  C 89.2386354129102 0.992426716141013  8.14464262531554 0.992426716141013  8.14464262531554 0.992426716141013  Z " stroke-width="4" stroke="#02a7f0" fill="none" transform="matrix(1 0 0 1 610 722 )" mask="url(#clip99)" />
+  </g>
+</svg>
\ No newline at end of file

src/layout/components/AppMain.vue

@@ -35,7 +35,7 @@ export default {
   overflow: hidden;
 }
 
-.fixed-header + .app-main {
+.fixed-header+.app-main {
   padding-top: 50px;
 }
 
@@ -45,7 +45,7 @@ export default {
     min-height: calc(100vh - 84px);
   }
 
-  .fixed-header + .app-main {
+  .fixed-header+.app-main {
     padding-top: 84px;
   }
 }

src/main.js

@@ -39,6 +39,14 @@ import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
 
+import Highchart from "highcharts/highcharts";
+import HighchartsVue from "highcharts-vue";
+import highchartsMore from 'highcharts/highcharts-more';
+import highcharts3d from 'highcharts/highcharts-3d'
+highchartsMore(Highchart);
+highcharts3d(Highchart)
+Vue.use(HighchartsVue);
+
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey

src/utils/request.js

@@ -29,13 +29,13 @@ service.interceptors.request.use(config => {
   if (getToken() && !isToken) {
     config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
   }
-  // get请求映射params参数
-  if (config.method === 'get' && config.params) {
-    let url = config.url + '?' + tansParams(config.params);
-    url = url.slice(0, -1);
-    config.params = {};
-    config.url = url;
-  }
+  // // get请求映射params参数
+  // if (config.method === 'get' && config.params) {
+  //   let url = config.url + '?' + tansParams(config.params);
+  //   url = url.slice(0, -1);
+  //   config.params = {};
+  //   config.url = url;
+  // }
   if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
     const requestObj = {
       url: config.url,

src/views/map/components/map-item-pie.vue

@@ -5,9 +5,11 @@
 <script>
 import * as echarts from "echarts";
 import "echarts-gl";
+import { rightlevelStatic } from '@/api/map'
 export default {
   data() {
     return {
+      colors: ["rgba(32,159,237,1)", "rgba(255,159,32,1)", "rgba(159,255,237,1)", "rgba(159,255,32,1)"],
       chartData: [
         {
           name: "重大风险",
@@ -57,8 +59,9 @@ export default {
     };
   },
   mounted() {
-    this.myMap = echarts.init(this.$refs.myEchart);
-    this.myMap.setOption(this.getPie3D(this.chartData, 0.71));
+    this.getData()
+
+
   },
   methods: {
     getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
@@ -328,11 +331,9 @@ export default {
         tooltip: {
           formatter: (params) => {
             if (params.seriesName !== "mouseoutSeries") {
-              return `${
-                params.seriesName
-              }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
-                params.color
-              };"></span>${option.series[params.seriesIndex].pieData.number}`;
+              return `${params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                };"></span>${option.series[params.seriesIndex].pieData.number}`;
             }
           },
         },
@@ -381,9 +382,32 @@ export default {
       };
       return option;
     },
+
+    getData() {
+      rightlevelStatic({ name: '' }).then(res => {
+        const list = res.data.map((val, index) => {
+          return {
+            name: val.levelName,
+            value: val.levelNum,
+            number: index * 10,
+            itemStyle: {
+              // 透明度
+              opacity: 0.7,
+              // 扇形颜色
+              color: this.colors[index % 4],
+            },
+          }
+        })
+        this.myMap = echarts.init(this.$refs.myEchart);
+        this.myMap.setOption(this.getPie3D(list, 0.71));
+      })
+    }
   },
 };
 </script>
 
 <style lang="scss" scoped>
+.a {
+  background: transparent;
+}
 </style>
\ No newline at end of file

src/views/map/components/map-table.vue

-<template>
-  <div class="map-table-container" ref="mapTableContainer">
-    <div><slot name="header" /></div>
-    <div class="map-table-container-box">
-      <ul class="map-table-list" ref="mapTableList">
-        <li
-          class="map-table-list-item"
-          v-for="(item, index) in tableList"
-          :key="index"
-        >
-          <div class="serial">{{ index + 1 }}</div>
-          <div
-            v-for="(key, value) of item"
-            :key="value + index"
-            class="map-table-list-item-value"
-            :style="[{ '--text-color': key.color, '--text-w': key.width }]"
-          >
-            {{ key.name }}
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -30,6 +5,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    columns: {
+      type: Array,
+      default: () => []
+    }
   },
   data() {
     return {
@@ -49,13 +28,14 @@ export default {
     getHeight() {
       // 获取map-table-list的高度
       let mapTableContainer = this.$refs.mapTableContainer;
-      this.mapTableContainerHeight = mapTableContainer.offsetHeight - 50;
+      if (mapTableContainer) {
+        this.mapTableContainerHeight = mapTableContainer.offsetHeight - 50;
+      }
       let mapTableList = this.$refs.mapTableList;
       this.mapTableListHeight = mapTableList.offsetHeight;
     },
     // 比较map-table-list高度
     compareH() {
-      console.log(this.mapTableContainerHeight, this.mapTableListHeight);
       if (this.mapTableContainerHeight < this.mapTableListHeight) {
         // 添加定时器滚动map-table-list-item
         setInterval(() => {
@@ -66,11 +46,41 @@ export default {
           ) {
             this.h = 0;
           }
-          this.$refs.mapTableList.style.transform = `translateY(${this.h}px) `;
+          if (this.$refs.mapTableList) {
+            this.$refs.mapTableList.style.transform = `translateY(${this.h}px) `;
+          }
         }, 1500);
       }
     },
   },
+  render() {
+    return <div class="map-table-container" ref="mapTableContainer">
+      <div>
+        {this.$slots.header}
+      </div>
+      <div class="map-table-container-box">
+        <ul class="map-table-list" ref="mapTableList">
+          {
+            this.tableList.map((item, index) => {
+              return <li class="map-table-list-item">
+                {
+                  this.columns.map((key, keyIndex) => {
+                    return <div class="map-table-list-item-value" style={{
+                      '--text-color': key.color, '--text-w': key.width
+                    }}>
+                      {key.props == 'index' && <div class="serial">{index + 1}</div>}
+                      {key.render && key.render()}
+                      {<span>{item[key.props]}</span>}
+                    </div>
+                  })
+                }
+              </li>
+            })
+          }
+        </ul>
+      </div>
+    </div>
+  }
 };
 </script>
 
@@ -79,15 +89,18 @@ export default {
   --text-w: 20%;
   height: 100%;
   overflow: hidden;
+
   &-box {
     height: calc(100% - 20px);
     overflow: auto;
   }
 }
+
 .map-table-list {
   transition: all 1s;
   margin: 0;
   padding: 0;
+
   &-item {
     display: flex;
     height: 30px;
@@ -95,14 +108,13 @@ export default {
     line-height: 30px;
     color: #fff;
     text-align: center;
-    background: linear-gradient(
-      180deg,
-      rgba(0, 102, 153, 1) 0%,
-      rgba(0, 102, 153, 1) 17%,
-      rgba(9, 60, 106, 1) 100%,
-      rgba(9, 60, 106, 1) 100%
-    );
+    background: linear-gradient(180deg,
+        rgba(0, 102, 153, 1) 0%,
+        rgba(0, 102, 153, 1) 17%,
+        rgba(9, 60, 106, 1) 100%,
+        rgba(9, 60, 106, 1) 100%);
     font-size: 14px;
+
     .serial {
       width: 40px;
       height: 100%;
@@ -112,6 +124,7 @@ export default {
       color: #fff;
       font-weight: bold;
       font-size: 16px;
+
       &::after {
         position: absolute;
         right: -14px;
@@ -123,50 +136,63 @@ export default {
         border-left: 16px solid #2a719d;
       }
     }
-    .name {
+
+    .map-table-list-item-value {
       width: 30%;
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
-      margin-left: 18px;
+      margin-right: 18px;
       font-weight: bold;
     }
-    .province,
-    .city,
-    .num {
-      width: 20%;
+
+    .map-table-list-item-value {
+      width: var(--text-w);
+      color: var(--text-color);
     }
-    .province {
+
+    .map-table-list-item-value:nth-child(3) {
       color: #02a7f0;
     }
-    // #FFEA00
-    .city {
+
+    .map-table-list-item-value:nth-child(4) {
       color: #ffea00;
     }
-    .num {
+
+    .map-table-list-item-value:nth-child(5) {
       color: rgba(217, 0, 27, 0.9);
       font-size: 12px;
     }
-    &-value {
-      width: var(--text-w);
-      color: var(--text-color);
-    }
+
+    .province {}
+
+    // #FFEA00
+    .city {}
+
+    .num {}
+
+
   }
+
   &-item:hover {
     background: rgba(255, 166, 0, 0.802);
     color: #000;
+
     .province,
     .city {
       color: #000;
     }
+
     .serial {
       background: linear-gradient(#ff6048 0%, #ff7346 100%);
+
       &::after {
         border-left-color: #ff7346;
       }
     }
   }
 }
+
 ::-webkit-scrollbar {
   display: none;
 }

src/views/map/map-layout.vue

 <template>
   <div class="map-layout">
     <div class="map-header">
-      <!-- <div ><el-input /></div> -->
+      <div class="map-header-search">
+        <el-input placeholder="请输入关键字" v-model="searchValue" @focus="onFoucs" />
+        <transition name="fade">
+          <ul class="header-search-group" ref="headerSearchGroup" v-show="showHeaderList">
+            <li class="header-search-list" @click="toDetail(item)" v-for="item in searchList" :key="item.id">
+              <div>
+                <p class="list-name">{{ item.name }}</p>
+                <p>{{ item.address }}</p>
+              </div>
+              <div class="list-area">{{ item.deptName }}</div>
+            </li>
+          </ul>
+        </transition>
+      </div>
       <div class="map-header-center">
         <div class="map-header-center-title">融通地产危险源辨识系统</div>
-        <div class="map-header-center-tip">
+        <!-- <div class="map-header-center-tip">
           Rongtong Real Estate Hazard Identification System
-        </div>
+        </div> -->
+      </div>
+      <div class="map-header-right">
+        <span @click="toBack"><i class="el-icon-back"></i>返回</span>
+        <span><i class="el-icon-s-home"></i>管理端</span>
+        <!-- <span><i class="el-icon-switch-button"></i> 退出</span> -->
       </div>
     </div>
     <div class="map-content">
       <div class="map-content-left"></div>
       <mapDetail v-if="$route.name == 'mapDetail'" />
-      <mapIndex v-if="$route.name == 'mapIndex'" />
+      <mapIndex ref="mapIndex" v-if="$route.name == 'mapIndex'" />
       <div class="map-content-right"></div>
     </div>
 
@@ -23,18 +41,120 @@
 <script>
 import mapIndex from "./map-index.vue";
 import mapDetail from "./map-detail.vue";
+import { projectList } from '@/api/map'
 export default {
   name: "echarts",
   components: { mapIndex, mapDetail },
   data() {
-    return {};
+    return {
+      showHeaderList: false,
+      searchValue: "",
+      searchList: []
+    };
+  },
+  mounted() {
+    this.getProjectList()
+    document.addEventListener('click', e => {
+      if (this.showHeaderList) {
+        const headerSearchGroup = document.querySelector('.map-header-search')
+        if (!headerSearchGroup.contains(e.target)) {
+          this.showHeaderList = false
+        }
+      }
+    })
+  },
+  watch: {
+    searchValue() {
+      this.getProjectList()
+    }
+  },
+  methods: {
+    toBack() {
+      // if (this.$route.name == 'mapDetail') {
+      this.$router.go(-1)
+      // } else {
+      // }
+    },
+    onFoucs() {
+      this.showHeaderList = true
+    },
+    getProjectList() {
+      projectList({ name: this.searchValue.trim() }).then(res => {
+        this.searchList = res.data.rows;
+      })
+    },
+    toDetail(item) {
+      if (this.$route.name == 'mapDetail') {
+        this.$router.replace({
+          name: 'mapDetail',
+          query: {
+            projectId: item.id
+          }
+        })
+
+      } else {
+        this.$router.push({
+          name: 'mapDetail',
+          query: {
+            projectId: item.id
+          }
+        })
+      }
+      this.showHeaderList = false
+    }
   },
-  mounted() {},
-  methods: {},
 };
 </script>
 
 <style lang="scss" scoped>
+.header-search-group {
+  width: 110%;
+  height: 350px;
+  position: absolute;
+  background: #001525;
+  padding: 20px 10px;
+  z-index: 10;
+  overflow: auto;
+  top: 30px;
+  left: 10px;
+
+  .header-search-list {
+    background: #003863;
+    width: 100%;
+    display: flex;
+    padding: 10px 16px;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    margin-bottom: 5px;
+    border-radius: 5px;
+
+    &>div:first-child {
+      flex: 1;
+      overflow: hidden;
+
+      p {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        margin: 0;
+        width: 90%;
+        overflow: hidden;
+      }
+
+      .list-name {
+        font-size: 16px;
+        font-weight: 500;
+        margin-bottom: 5px;
+      }
+
+    }
+
+    .list-area {
+      color: orange;
+    }
+  }
+}
+
 .map-layout {
   width: 100%;
   height: 100%;
@@ -50,29 +170,85 @@ export default {
     background: url("../../assets/map/top.png") no-repeat;
     background-size: 100% 100%;
     box-shadow: border-box;
+    display: flex;
+
+    .map-header-search {
+      width: 20%;
+      position: relative;
+      margin-top: 3px;
+
+      .el-input {
+        ::v-deep input {
+          height: 30px;
+          background: transparent;
+          border-color: #005495;
+          border-radius: 30px;
+          color: #fff;
+
+          &::placeholder {
+            color: rgb(125, 125, 125);
+            font-size: 12px;
+          }
+        }
+      }
+    }
+
     &-center {
       text-align: center;
+      flex: 1;
+
       &-title {
         text-shadow: 0px 0px 10px rgba(21, 203, 249, 1);
         font-weight: 700;
-        font-size: 24px;
+        font-size: 30px;
+        line-height: 53px;
+        height: 100%;
       }
+
       &-tip {
         font-family: "微软雅黑", sans-serif;
         font-size: 16px;
         color: rgba(215, 215, 215, 0.4);
       }
     }
+
+    .map-header-right {
+      width: 20%;
+      font-size: 12px;
+      vertical-align: middle;
+      margin-top: 8px;
+      color: #2391FF;
+      display: flex;
+      justify-content: flex-end;
+
+      span {
+        margin-left: 20px;
+      }
+
+      i {
+        width: 23px;
+        height: 23px;
+        border-radius: 100%;
+        border: 1px solid #2391FF;
+        display: inline-block;
+        text-align: center;
+        line-height: 22px;
+        margin-right: 6px;
+      }
+    }
   }
+
   .map-footer {
     background: url("../../assets/map/bottom.png") no-repeat;
     background-size: 100% 100%;
     height: 44px;
   }
+
   .map-content {
     width: 100%;
     height: calc(100% - 128px);
     position: relative;
+
     &-left::after,
     &-right::after {
       content: "";
@@ -86,6 +262,7 @@ export default {
       z-index: 10;
       transform: translateY(-52%);
     }
+
     &-right::after {
       background-image: url("../../assets/map/hud-right.png");
       position: absolute;
@@ -94,6 +271,7 @@ export default {
     }
   }
 }
+
 ::-webkit-scrollbar {
   display: none;
 }