update

public/baiduapi.js

@@ -1740,7 +1740,7 @@ window.BMAP_AUTHENTIC_KEY = "iSZit9hpxlgGq28nmIyFk8lQQ21widby";
     B.url = B.N0[B.xz];
     B.Rp = B.url.proto + B.url.domain.baidumap + "/";
     B.jc = B.url.proto + ("2" == B.xz ? B.url.domain.main_domain_nocdn.other : B.url.domain.main_domain_nocdn.baidu) + "/";
-    B.la = bmapcfg.home
+    B.la = bmapcfg&&bmapcfg.home
     // B.la = B.url.proto + ("2" == B.xz ? B.url.domain.main_domain_cdn.other[0] : B.url.domain.main_domain_nocdn.baidu) + "/";
     B.gj = B.url.proto + B.url.domain.main_domain_cdn.webmap[0] + "/";
     B.ZN = B.url.proto + B.url.domain.panoVerify + "/";

public/index.html

@@ -4,13 +4,17 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <script src="./static/config.js"></script>
+    <script>
+      document.title = window.$SYSTEMCONFIG.SYS_NAME || "镇海平安企业（园区）";
+    </script>
     <script src="<%= BASE_URL %>baiduapi.js"></script>
     <script src="<%= BASE_URL %>TextIconOverlay_min.js"></script>
     <script src="<%= BASE_URL %>MarkerClusterer_min.js"></script>
     <script src="<%= BASE_URL %>map_load.js"></script>
     <script src="<%= BASE_URL %>liveplayer-lib.min.js"></script>
-    <!-- <title>镇海平安企业（园区）</title> -->
+    <!-- <title></title> -->
-    <title>vue</title>
+    <title></title>
   </head>
   <style>
     body {
@@ -24,9 +28,5 @@
     </noscript> -->
     <div id="app"></div>
     <!-- built files will be auto injected -->
-    <script src="./static/config.js"></script>
-    <script>
-      console.log(window.mapCfg);
-    </script>
   </body>
 </html>

public/map_load.js

@@ -1,10 +1,12 @@
+console.log(window.$mapCfg);
+
 let bmapcfg = {
-  'imgext': '.png',   //瓦片图的后缀 ------ 根据需要修改，一般是 .png .jpg
+  imgext: ".png", //瓦片图的后缀 ------ 根据需要修改，一般是 .png .jpg
-  'tiles_dir': 'roadmap',       //普通瓦片图的地址，为空默认在 offlinemap/tiles/ 目录
+  tiles_dir: "roadmap", //普通瓦片图的地址，为空默认在 offlinemap/tiles/ 目录
   //'tiles_path': `http://${window.location.host}`,
-  'tiles_path': `http://172.18.113.50:8118`,
+  tiles_path: window.$mapCfg.tiles_path || "",
-  'tiles_hybrid': '',       //卫星瓦片图的地址，为空默认在 offlinemap/tiles_hybrid/ 目录
+  tiles_hybrid: window.$mapCfg.tiles_hybrid || "", //卫星瓦片图的地址，为空默认在 offlinemap/tiles_hybrid/ 目录
-  'tiles_self': ''        //自定义图层的地址，为空默认在 offlinemap/tiles_self/ 目录
+  tiles_self: window.$mapCfg.tiles_self || "", //自定义图层的地址，为空默认在 offlinemap/tiles_self/ 目录
 };
 
 //////////////////下面的保持不动///////////////////////////////////
@@ -12,8 +14,12 @@ var scripts = document.getElementsByTagName("script");
 var JS__FILE__ = scripts[scripts.length - 1].getAttribute("src"); //获得当前js文件路径
 bmapcfg.home = JS__FILE__.substr(0, JS__FILE__.lastIndexOf("/") + 1); //地图API主目录
 (function () {
-  window.BMap_loadScriptTime = (new Date).getTime();
+  window.BMap_loadScriptTime = new Date().getTime();
   //加载地图API主文件
-  document.write('<script type="text/javascript" src="' + bmapcfg.home + 'baiduapi.js"></script>')
+  document.write(
+    '<script type="text/javascript" src="' +
+      bmapcfg.home +
+      'baiduapi.js"></script>'
+  );
 })();
 ///////////////////////////////////////////////////////////////////

public/static/config.js

@@ -1,8 +1,13 @@
-window.mapCfg = {
+window.$mapCfg = {
-  type: "onLine",//离线地图；地图类型 onLine:在线地图
   lgt: "", //经度
   lat: "", //纬度
-  center: [],
+  center: [121.619992, 30.025703],
   zoom: 12,
-  tiles_dir: "" + "/static/newTiles/{z}/{x}/{y}.png", //瓦片地址
+  tiles_path: "http://172.18.113.50:8118",
+  tiles_hybrid: "", //卫星瓦片图的地址，为空默认在 offlinemap/tiles_hybrid/ 目录
+  tiles_self: "", //自定义图层的地址，为空默认在 offlinemap/tiles_self/ 目录
+};
+
+window.$SYSTEMCONFIG = {
+  SYS_NAME: "镇海平安企业（园区）", //系统名称
 };

public/static/map.html

@@ -17,27 +17,12 @@
       }
     </style>
     <!-- <script src="https://unpkg.com/mapv-three@1.0.10/dist/mapvthree.umd.js"></script> -->
-    <!-- <script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=CSfWwqFqSVkQaqcAAMxKyXg6Moe9UUqA"></script> -->
+    <script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=CSfWwqFqSVkQaqcAAMxKyXg6Moe9UUqA"></script>
   </head>
 
   <body>
     <div id="container"></div>
     <script>
-      let mapCfg = window.parent.mapCfg;
-      if (mapCfg.type === "offLine") {
-      }
-      if (mapCfg.type === "onLine") {
-        loadScript();
-      }
-
-      // map.setHeading(64.5);
-      // map.setTilt(73);
-      // 禁止地图旋转和倾斜可以通过配置项进行设置
-      // var map = new BMapGL.Map("allmap", {
-      //     enableRotate: false,
-      //     enableTilt: false
-      // });
-      function initMap() {
       // 创建地图实例
       var map = new BMapGL.Map("container"); // 创建地图实例
       var point = new BMapGL.Point(121.619992, 30.025703); // 创建点坐标
@@ -148,15 +133,6 @@
       map.centerAndZoom(point, 14); // 初始化地图，设置中心点坐标和地图级别
       map.enableScrollWheelZoom();
       map.setMapType(BMAP_SATELLITE_MAP); // 卫星地图模式
-      }
-
-      function loadScript() {
-        var script = document.createElement("script");
-        script.type = "text/javascript";
-        script.src =
-          "//api.map.baidu.com/api?type=webgl&v=1.0&ak=CSfWwqFqSVkQaqcAAMxKyXg6Moe9UUqA&callback=initMap";
-        document.body.appendChild(script);
-      }
     </script>
   </body>
 </html>

src/loveflow/assets/index.less

@@ -25,6 +25,12 @@
 .mr6 {
   margin-right: 6px;
 }
+.mr18 {
+  margin-right: 18px;
+}
+.mb18 {
+  margin-bottom: 18px;
+}
 /* 间距 END*/
 
 /* 字体 START */

src/loveflow/components/echart/bar/one.vue

@@ -0,0 +1,122 @@
+<template>
+  <div style="height: 100%; width: 100%">
+    <g-chart :echartdata="option"></g-chart>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    chartObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      option: {},
+    };
+  },
+  mounted() {
+    this.setOption();
+  },
+  methods: {
+    setOption() {
+      this.option = {
+        legend: {
+          show: false,
+        },
+        grid: {
+          top: "20%",
+          bottom: "10%",
+          left: "6%",
+          right: "5%",
+        },
+        tooltip: {
+          show: true,
+        },
+        xAxis: {
+          type: "category",
+          data: this.chartObj.xData,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#6C8097",
+            },
+          },
+          axisLabel: {
+            color: "#D0DEEE",
+            fontSize: 12,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed",
+              color: "#6C8097",
+            },
+          },
+          axisLabel: {
+            color: "#6C8097",
+            fontSize: 12,
+            interval: 0,
+          },
+        },
+        series: [
+          {
+            name: this.chartObj.name,
+            type: "bar",
+            barWidth: 20,
+            color: "#5ED0A3",
+            data: this.chartObj.yData,
+            label: {
+              show: false,
+              position: "top",
+            },
+            itemStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "#66E1DF",
+                },
+                {
+                  offset: 1,
+                  color: " rgba(0,89,84,0)",
+                },
+              ]),
+            },
+          },
+
+          {
+            name: "外圆",
+            type: "scatter",
+            emphasis: {
+              scale: false,
+            },
+            symbol: "roundRect",
+            symbolSize: [26, 4], // 进度条白点
+            itemStyle: {
+              show: true,
+              barBorderRadius: [10, 10, 10, 10],
+              color: "#FFF",
+              shadowColor: "rgba(255, 255, 255, 1)",
+              shadowBlur: 8,
+              borderWidth: 1,
+              opacity: 1,
+            },
+            z: 2,
+            data: this.chartObj.yData,
+            animationDelay: 500,
+          },
+        ],
+      };
+    },
+  },
+};
+</script>

src/loveflow/components/echart/bar/two.vue

@@ -0,0 +1,123 @@
+<template>
+  <div style="height: 100%; width: 100%">
+    <g-chart :echartdata="option"></g-chart>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    chartObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      option: {},
+    };
+  },
+  mounted() {
+    this.setOption();
+  },
+  methods: {
+    setOption() {
+      this.option = {
+        legend: {
+          show: false,
+        },
+        grid: {
+          top: "8%",
+          bottom: "10%",
+          left: "6%",
+          right: "5%",
+        },
+        tooltip: {
+          show: true,
+        },
+        xAxis: {
+          type: "category",
+          data: this.chartObj.xData,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#6C8097",
+            },
+          },
+          axisLabel: {
+            color: "#D0DEEE",
+            fontSize: 12,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          name: "单位：件",
+          type: "value",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed",
+              color: "#6C8097",
+            },
+          },
+          axisLabel: {
+            color: "#6C8097",
+            fontSize: 12,
+            interval: 0,
+          },
+        },
+        series: [
+          {
+            name: this.chartObj.name,
+            type: "bar",
+            barWidth: 20,
+            color: "#5ED0A3",
+            data: this.chartObj.yData,
+            label: {
+              show: false,
+              position: "top",
+            },
+            itemStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "#66E1DF",
+                },
+                {
+                  offset: 1,
+                  color: " rgba(0,89,84,0)",
+                },
+              ]),
+            },
+          },
+
+          {
+            name: "外圆",
+            type: "scatter",
+            emphasis: {
+              scale: false,
+            },
+            symbol: "roundRect",
+            symbolSize: [26, 4], // 进度条白点
+            itemStyle: {
+              show: true,
+              barBorderRadius: [10, 10, 10, 10],
+              color: "#FFF",
+              shadowColor: "rgba(255, 255, 255, 1)",
+              shadowBlur: 8,
+              borderWidth: 1,
+              opacity: 1,
+            },
+            z: 2,
+            data: this.chartObj.yData,
+            animationDelay: 500,
+          },
+        ],
+      };
+    },
+  },
+};
+</script>

src/loveflow/components/echart/line/one.vue

@@ -0,0 +1,118 @@
+<template>
+  <div style="height: 100%; width: 100%">
+    <g-chart :echartdata="option"></g-chart>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    chartObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      option: {},
+    };
+  },
+  mounted() {
+    this.setOption();
+  },
+  methods: {
+    setOption() {
+      let seriesArr = [];
+
+      for (let i = 0; i < this.chartObj.legend.length; i++) {
+        seriesArr.push({
+          name: this.chartObj.legend[i],
+          type: "line",
+          smooth: true, //是否平滑曲线显示
+          symbolSize: 0,
+          showSymbol: false,
+          lineStyle: {
+            width: 2,
+            color: this.chartObj.color[i][0], // 线条颜色
+          },
+          areaStyle: {
+            color: new this.$echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                { offset: 0, color: this.chartObj.color[i][1] },
+                { offset: 1, color: this.chartObj.color[i][2] },
+              ],
+              false
+            ),
+          },
+          data: this.chartObj.yData[i],
+        });
+      }
+
+      this.option = {
+        legend: {
+          data: this.chartObj.legend,
+          icon: "rect",
+          right: "5%",
+          top: "2%",
+          itemWidth: 8, // 设置宽度
+          itemHeight: 8, // 设置高度
+          itemGap: 16, // 设置间距
+          textStyle: {
+            //图例文字的样式
+            color: "#D0DEEE",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          top: "20%",
+          bottom: "10%",
+          left: "6%",
+          right: "5%",
+        },
+        tooltip: {
+          show: true,
+          trigger: "axis",
+        },
+        xAxis: {
+          type: "category",
+          data: this.chartObj.xData,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#6C8097",
+            },
+          },
+          axisLabel: {
+            color: "#D0DEEE",
+            fontSize: 12,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed",
+              color: "#6C8097",
+            },
+          },
+          axisLabel: {
+            color: "#6C8097",
+            fontSize: 12,
+            interval: 0,
+          },
+        },
+        series: seriesArr,
+      };
+    },
+  },
+};
+</script>

src/loveflow/components/echart/line/three.vue

@@ -0,0 +1,117 @@
+<template>
+  <div style="height: 100%; width: 100%">
+    <g-chart :echartdata="option"></g-chart>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    chartObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      option: {},
+    };
+  },
+  mounted() {
+    this.setOption();
+  },
+  methods: {
+    setOption() {
+      this.option = {
+        legend: {
+          show: false,
+        },
+        grid: {
+          top: "10%",
+          bottom: "10%",
+          left: "6%",
+          right: "5%",
+        },
+        tooltip: {
+          show: true,
+          trigger: "axis",
+        },
+        xAxis: {
+          type: "category",
+          data: this.chartObj.xData,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#6C8097",
+            },
+          },
+          axisLabel: {
+            color: "#D0DEEE",
+            fontSize: 12,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed",
+              color: "#6C8097",
+            },
+          },
+          axisLabel: {
+            color: "#6C8097",
+            fontSize: 12,
+            interval: 0,
+          },
+        },
+        series: [
+          {
+            name: this.chartObj.name,
+            type: "line",
+            smooth: false, //是否平滑曲线显示
+            symbolSize: 8,
+            showSymbol: true,
+            itemStyle: {
+              borderWidth: 1,
+              shadowColor: "rgba(255,255,255,0.4)",
+              shadowBlur: 6,
+            },
+            lineStyle: {
+              width: 2,
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                {
+                  offset: 0,
+                  color: this.chartObj.color[0],
+                },
+                {
+                  offset: 1,
+                  color: this.chartObj.color[3],
+                },
+              ]),
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0,
+                0,
+                1,
+                0,
+                [
+                  { offset: 0, color: this.chartObj.color[1] },
+                  { offset: 1, color: this.chartObj.color[2] },
+                ],
+                false
+              ),
+            },
+            data: this.chartObj.yData,
+          },
+        ],
+      };
+    },
+  },
+};
+</script>

src/loveflow/components/echart/line/two.vue

@@ -0,0 +1,104 @@
+<template>
+  <div style="height: 100%; width: 100%">
+    <g-chart :echartdata="option"></g-chart>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    chartObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      option: {},
+    };
+  },
+  mounted() {
+    this.setOption();
+  },
+  methods: {
+    setOption() {
+      this.option = {
+        legend: {
+          show: false,
+        },
+        grid: {
+          top: "10%",
+          bottom: "10%",
+          left: "6%",
+          right: "5%",
+        },
+        tooltip: {
+          show: true,
+          trigger: "axis",
+        },
+        xAxis: {
+          type: "category",
+          data: this.chartObj.xData,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#6C8097",
+            },
+          },
+          axisLabel: {
+            color: "#D0DEEE",
+            fontSize: 12,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          name: "单位：件",
+          type: "value",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed",
+              color: "#6C8097",
+            },
+          },
+          axisLabel: {
+            color: "#6C8097",
+            fontSize: 12,
+            interval: 0,
+          },
+        },
+        series: [
+          {
+            name: this.chartObj.name,
+            type: "line",
+            smooth: true, //是否平滑曲线显示
+            symbolSize: 0,
+            showSymbol: false,
+            lineStyle: {
+              width: 2,
+              color: this.chartObj.color[0], // 线条颜色
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  { offset: 0, color: this.chartObj.color[1] },
+                  { offset: 1, color: this.chartObj.color[2] },
+                ],
+                false
+              ),
+            },
+            data: this.chartObj.yData,
+          },
+        ],
+      };
+    },
+  },
+};
+</script>

src/loveflow/components/echart/radar/one.vue

@@ -0,0 +1,111 @@
+<template>
+  <div style="height: 100%; width: 100%">
+    <g-chart :echartdata="option"></g-chart>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    chartObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      option: {},
+    };
+  },
+  mounted() {
+    this.setOption();
+  },
+  methods: {
+    setOption() {
+      this.option = {
+        legend: {
+          show: false,
+        },
+        tooltip: {
+          show: false,
+        },
+        radar: {
+          center: ["50%", "55%"], // 外圆的位置
+          radius: "60%",
+          name: {
+            textStyle: {
+              color: "#D0DEEE",
+              fontSize: 18,
+            },
+          },
+          axisName: {
+            color: "#D0DEEE",
+          },
+          indicator: this.chartObj.indicator,
+          splitArea: {
+            // 坐标轴在 grid 区域中的分隔区域，默认不显示。
+            show: true,
+            areaStyle: {
+              // 分隔区域的样式设置。
+              color: ["#22403d"], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
+            },
+          },
+          axisLine: {
+            // 指向外圈文本的分隔线样式
+            lineStyle: {
+              color: "#728AE4",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              type: "solid",
+              color: "#445857", // 分隔线颜色
+              width: 1, // 分隔线线宽
+            },
+          },
+        },
+        series: [
+          {
+            type: "radar",
+            symbolSize: 0,
+            itemStyle: {
+              borderColor: "rgba(66, 242, 185, 1)",
+              color: "#D0DEEE",
+              borderWidth: 0.2,
+            },
+            lineStyle: {
+              width: 3,
+              color: "#71D59A",
+            },
+            data: [
+              {
+                value: [80, 80, 80, 70, 60, 50],
+                name: "男",
+                areaStyle: {
+                  color: "transparent",
+                },
+              },
+              {
+                value: [40, 70, 50, 60, 30, 80],
+                name: "女",
+                itemStyle: {
+                  borderColor: "rgba(245, 196, 85, 1)",
+                  color: "#fff",
+                  borderWidth: 0.2,
+                },
+                lineStyle: {
+                  color: "#2B82F3",
+                },
+                areaStyle: {
+                  color: "transparent",
+                },
+              },
+            ],
+          },
+        ],
+      };
+    },
+  },
+};
+</script>

src/loveflow/components/menu/head.vue

@@ -199,6 +199,8 @@ export default {
     width: 22vw;
   }
   .time_box {
+    position: absolute;
+    right: 10vw;
     width: 12vw;
     height: 5vh;
     margin-left: 1vw;

src/main.js

@@ -19,6 +19,7 @@ import { registerPlugins } from '@/loveflow/plugins/index'
 import FormDialog from '@/loveflow/components/modal/formDialog.vue'
 import gMainTable from '@/loveflow/components/data/table.vue'
 import gDict from '@/loveflow/components/data/dict.vue'
+import gChart from '@/loveflow/components/echart/chart.vue'
 
 import * as echarts from "echarts";
 Vue.prototype.$echarts = echarts;
@@ -35,6 +36,7 @@ Vue.component('lkyPagination',lkyPagination)
 Vue.component('FormDialog', FormDialog)
 Vue.component('gMainTable', gMainTable)
 Vue.component('gDict', gDict)
+Vue.component('gChart', gChart)
 const vm = new Vue({
   el: '#app',
   router,

src/views/compositeIndex/components/mapWrap.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="map" id="container"></div>
+</template>
+<script>
+import { topRanking } from "@/api/safetyIndex";
+//import styleJson from "../../../../public/custom_map_config.json";
+//import MapPoint from "../../../../public/zhenhaiPoint.json";
+//import MapLine from "../../../../public/zhenhaiLine.json";
+export default {
+  name: "mapWrap",
+  data() {
+    return {
+      center_point: window.$mapCfg.center,
+    };
+  },
+  mounted() {
+    this.get_rank();
+  },
+  methods: {
+    async get_rank() {
+      let params = {
+        scoreType: "month",
+      };
+      let res = await topRanking(params);
+      this.initMap(res.data);
+    },
+    initMap(data) {
+      // 创建地图实例
+      let BMapGL = window.BMap;
+      let map = new BMapGL.Map("container"); // 创建地图实例
+      let company_list = data;
+
+      console.log("data01", company_list);
+
+      company_list.forEach((item) => {
+        let company_point = new BMapGL.Point(item.longitude, item.latitude);
+        // 根据公司排名打点
+        let myIcon = new BMapGL.Icon(
+          require("@/assets/images/map/top0" + item.areaRank + ".png"),
+          new BMapGL.Size(40, 60),
+          {
+            imageOffset: new BMapGL.Size(0, 0, 5),
+          }
+        );
+
+        myIcon.setImageSize(new BMapGL.Size(40, 60)); //设置图标大小
+
+        let marker = new BMapGL.Marker(company_point, {
+          icon: myIcon,
+        }); // 创建点位
+        marker.disableMassClear();
+        map.addOverlay(marker);
+
+        // 公司名
+        let content = item.companyName;
+        let label = new BMapGL.Label(content, {
+          position: company_point, // 设置标注的地理位置
+          offset: new BMapGL.Size(-20, -50), // 设置标注的偏移量
+        });
+        label.setStyle({
+          backgroundColor: "#f9d2e4",
+          border: "0",
+          color: "#01847f",
+          fontSize: "16px",
+          cursor: "pointer",
+        });
+        label.disableMassClear();
+        map.addOverlay(label);
+        // 文本点击
+        label.addEventListener("click", function () {
+          map.clearOverlays(); // 为保证始终只有一个文本覆盖物弹出，每次创造文本覆盖物时，先清楚所有的文本覆盖物
+          // 注意 ！ clearOverlays会清除地图所有的覆盖物，所以要给不想清除的覆盖物加上disableMassClear以做到禁止删除
+          var point_text = new BMapGL.Label(); // 创建公司详情文本覆盖物
+          point_text.setStyle({
+            color: "blue",
+            borderRadius: "5px",
+            borderColor: "#ccc",
+            padding: "10px",
+            fontSize: "16px",
+            fontFamily: "微软雅黑",
+            backgroundColor: "#b5ebff",
+            transform: "translateX(-50%) translateY(calc(-100% - 10px))",
+          });
+          // 点位点击转处置弹窗
+          point_text.setPosition(
+            new BMapGL.Point(item.longitude, item.latitude)
+          );
+          point_text.setOffset(new BMapGL.Size(130, -10));
+          point_text.setStyle({
+            width: "340px",
+            height: "238px",
+            background: "url(../pbImg/dialogback.png) no-repeat",
+            backgroundSize: "100% 100%",
+            border: "0",
+            color: "#fff",
+            zIndex: 2000000000,
+          });
+          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/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.companyAddress}</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.emergencyContact}</div>
+                         <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.score}</h4>
+                                  `);
+          map.addOverlay(point_text);
+          let closebtn = document.querySelector(".closeBtn");
+          closebtn.addEventListener("click", () => {
+            map.removeOverlay(point_text);
+          });
+        });
+      });
+
+      map.centerAndZoom(
+        new BMapGL.Point(this.center_point[0], this.center_point[1]),
+        14
+      ); // 创建点坐标
+      map.setMinZoom(12); // 初始化地图，设置中心点坐标和地图级别
+      map.setMaxZoom(19);
+      map.enableScrollWheelZoom(true);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+/* 去除百度地图logo */
+.anchorBL {
+  display: none;
+}
+.map {
+  width: 100vw;
+  height: 91vh;
+}
+</style>

src/views/compositeIndex/index.vue

@@ -4,7 +4,7 @@
     <!-- 最底层地图框 -->
     <div class="map_box">
       <!-- 嵌入在线地图 -->
-      <iframe
+      <!-- <iframe
         name="zhenhaimap"
         id="iframeMap"
         class="iframeMap"
@@ -14,7 +14,10 @@
         frameborder="0"
         scrolling="no"
         ref="iframeDom"
-      ></iframe>
+      ></iframe> -->
+      <div class="map_body">
+        <mapWrap ref="mapWrap"></mapWrap>
+      </div>
       <!-- <div class="map_body">
         <HomeMap ref="homeMap"></HomeMap>
       </div> -->
@@ -65,7 +68,8 @@ import Notification from "./components/notification";
 import Endanger from "./components/endanger";
 // import HomeMap from "./components/homeMap";
 // import LineMap from "./components/lineMap"
-import { topRanking } from '@/api/safetyIndex'
+import mapWrap from "./components/mapWrap";
+import { topRanking } from "@/api/safetyIndex";
 export default {
   name: "CompositeIndex",
   components: {
@@ -75,12 +79,13 @@ export default {
     CompanyService,
     Notification,
     Endanger,
+    mapWrap,
     // HomeMap,
     // LineMap
   },
   data() {
     return {
-      getPageUrl:'static/map.html', // 引入在线地图
+      getPageUrl: "static/map.html", // 引入在线地图
       options: [
         {
           value: "1",
@@ -92,10 +97,11 @@ export default {
         },
       ],
       select_value: "地图",
+      mapData: [],
     };
   },
   mounted() {
-    this.get_rank()
+    //this.get_rank();
   },
   methods: {
     change_map(val) {
@@ -109,13 +115,12 @@ export default {
     // 排名查询
     async get_rank() {
       let params = {
-        scoreType: 'month'
+        scoreType: "month",
-      }
+      };
-      let res = await topRanking(params)
+      let res = await topRanking(params);
       //console.log('restop',res);
-      let iframe_window = this.$refs.iframeDom.contentWindow
+      let iframe_window = this.$refs.iframeDom.contentWindow;
-      let data = res.data
+      iframe_window.postMessage(res.data, "*");
-      iframe_window.postMessage(data,'*')
     },
   },
 };

src/views/enterpriseRiskIndex/abnormal.vue

@@ -1,3 +1,593 @@
 <template>
-  <div>异常图表</div>
+  <div class="abnormalWrap">
+    <div class="riskRow mb18">
+      <div class="riskCol leftCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">风险监测项评分排行</div>
+        </div>
+        <div class="riskTotal">
+          <div>今日企业风险项量</div>
+          <div class="totalText">10000</div>
+        </div>
+        <div class="chartPanel" style="height: calc(100% - 136px)">
+          <div class="chartOpt">
+            <div
+              @click="changeTime('day')"
+              :class="{ active: curTime == 'day' }"
+            >
+              当日
+            </div>
+            <div
+              @click="changeTime('month')"
+              :class="{ active: curTime == 'month' }"
+            >
+              近三月
+            </div>
+            <div
+              @click="changeTime('year')"
+              :class="{ active: curTime == 'year' }"
+            >
+              本年度
+            </div>
+          </div>
+          <barOne :chartObj="tlObj"></barOne>
+        </div>
+      </div>
+      <div class="riskCol rightCol">
+        <div class="riskLine" v-for="(line, index) in dataList" :key="index">
+          <div class="riskItem" v-for="item in line" :key="item.name">
+            <div class="riskItemLeft">
+              <div class="icon">
+                <img :src="item.icon" />
+              </div>
+            </div>
+            <div class="riskItemRight">
+              <div class="riskItemName">{{ item.name }}</div>
+              <div class="riskItemValue">{{ item.value }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="riskRow mb18">
+      <div class="riskCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">流动人口管理异常</div>
+        </div>
+        <div class="chartPanel">
+          <lineThree :chartObj="tmlObj"></lineThree>
+        </div>
+      </div>
+      <div class="riskCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">人员背景审核异常分析</div>
+        </div>
+        <div class="chartPanel">
+          <lineThree :chartObj="tmmObj"></lineThree>
+        </div>
+      </div>
+      <div class="riskCol">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">重点岗位资质核查异常分析</div>
+        </div>
+        <div class="chartPanel">
+          <lineThree :chartObj="tmrObj"></lineThree>
+        </div>
+      </div>
+    </div>
+    <div class="riskRow mb18">
+      <div class="riskCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">人员涉警(案)情况异常分析</div>
+        </div>
+        <div class="chartPanel">
+          <lineTwo :chartObj="mtlObj"></lineTwo>
+        </div>
+      </div>
+      <div class="riskCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">装卸量差异分析</div>
+        </div>
+        <div class="chartPanel">
+          <lineTwo :chartObj="mtmObj"></lineTwo>
+        </div>
+      </div>
+      <div class="riskCol">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">运输车辆背景异常分析</div>
+        </div>
+        <div class="chartPanel">
+          <lineTwo :chartObj="mtrObj"></lineTwo>
+        </div>
+      </div>
+    </div>
+    <div class="riskRow mb18">
+      <div class="riskCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">运输车辆异常预警</div>
+        </div>
+        <div class="chartPanel">
+          <barTwo :chartObj="mlObj"></barTwo>
+        </div>
+      </div>
+      <div class="riskCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">驾驶员押运员资质异常分析</div>
+        </div>
+        <div class="chartPanel">
+          <barTwo :chartObj="mmObj"></barTwo>
+        </div>
+      </div>
+      <div class="riskCol">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">单位检查情况异常分析</div>
+        </div>
+        <div class="chartPanel">
+          <barTwo :chartObj="mrObj"></barTwo>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
+<script>
+import barOne from "@/loveflow/components/echart/bar/one.vue";
+import barTwo from "@/loveflow/components/echart/bar/two.vue";
+import lineTwo from "@/loveflow/components/echart/line/two.vue";
+import lineThree from "@/loveflow/components/echart/line/three.vue";
+export default {
+  components: { barOne, barTwo, lineTwo, lineThree },
+  data() {
+    return {
+      curTime: "day",
+
+      dataList: [
+        [
+          {
+            name: "流动人口管理异常",
+            value: 1321,
+            icon: require("@/assets/images/screen/11.png"),
+          },
+          {
+            name: "人员背景审核异常分析",
+            value: 1321,
+            icon: require("@/assets/images/screen/12.png"),
+          },
+          {
+            name: "重点岗位资质核查异常分析",
+            value: 1321,
+            icon: require("@/assets/images/screen/13.png"),
+          },
+        ],
+        [
+          {
+            name: "人员涉警(案)情况异常分析",
+            value: 1321,
+            icon: require("@/assets/images/screen/21.png"),
+          },
+          {
+            name: "装卸量差异分析",
+            value: 1321,
+            icon: require("@/assets/images/screen/22.png"),
+          },
+          {
+            name: "运输车辆背景异常分析",
+            value: 1321,
+            icon: require("@/assets/images/screen/23.png"),
+          },
+        ],
+        [
+          {
+            name: "运输车辆异常预警",
+            value: 1321,
+            icon: require("@/assets/images/screen/31.png"),
+          },
+          {
+            name: "驾驶员押运员资质异常分析",
+            value: 1321,
+            icon: require("@/assets/images/screen/32.png"),
+          },
+          {
+            name: "单位检查情况异常分析",
+            value: 1321,
+            icon: require("@/assets/images/screen/33.png"),
+          },
+        ],
+      ],
+
+      tlObj: {
+        xData: [
+          "人员安全",
+          "危化品运输",
+          "防攻击管理",
+          "消防安全",
+          "列管物品",
+          "道路安全",
+          "内部治安",
+          "网络安全",
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14, 12],
+        name: "风险标签排行",
+      },
+      tmlObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
+        name: "流动人口管理异常",
+        color: [
+          "rgba(20,246,62,0.5)",
+          "rgba(30,147,255,0)",
+          "rgba(30,147,255,0.3)",
+          "#1E93FF",
+        ],
+      },
+      tmmObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
+        name: "人员背景审核异常分析",
+        color: [
+          "rgba(20,246,62,0.5)",
+          "rgba(30,147,255,0)",
+          "rgba(30,147,255,0.3)",
+          "#1E93FF",
+        ],
+      },
+      tmrObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
+        name: "重点岗位资质核查异常分析",
+        color: [
+          "rgba(20,246,62,0.5)",
+          "rgba(30,147,255,0)",
+          "rgba(30,147,255,0.3)",
+          "#1E93FF",
+        ],
+      },
+
+      mtlObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
+        name: "人员涉警(案)情况异常分析",
+        color: [
+          "rgba(255,193,77,0.9)",
+          "rgba(255,61,61,0.8)",
+          "rgba(255,61,61,0)",
+        ],
+      },
+      mtmObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
+        name: "装卸量差异分析",
+        color: [
+          "rgba(255,193,77,0.9)",
+          "rgba(255,61,61,0.8)",
+          "rgba(255,61,61,0)",
+        ],
+      },
+      mtrObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
+        name: "运输车辆背景异常分析",
+        color: [
+          "rgba(255,193,77,0.9)",
+          "rgba(255,61,61,0.8)",
+          "rgba(255,61,61,0)",
+        ],
+      },
+      mlObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
+        name: "运输车辆异常预警",
+      },
+      mmObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
+        name: "驾驶员押运员资质异常分析",
+      },
+      mrObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
+        name: "单位检查情况异常分析",
+      },
+    };
+  },
+  methods: {
+    changeTime(val) {
+      this.curTime = val;
+    },
+  },
+};
+</script>
+<style lang="less">
+.abnormalWrap {
+  height: 100%;
+  padding: 18px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  .riskRow {
+    flex: 1;
+    display: flex;
+    .riskCol {
+      position: relative;
+      padding-left: 8px;
+      height: 456px;
+      flex: 1;
+      background: url("~@/assets/images/screen/line.png") no-repeat center
+        center;
+      background-size: 100% 100%;
+
+      .riskName {
+        height: 40px;
+        display: flex;
+        margin-top: 6px;
+        color: #d9e7ff;
+
+        .riskIcon {
+          width: 24px;
+          height: 24px;
+          background: url("~@/assets/images/screen/riskIcon.png") no-repeat
+            center center;
+          background-size: 100% 100%;
+        }
+      }
+
+      .riskTotal {
+        margin-top: 40px;
+        margin-left: 2%;
+        width: 93%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 46px;
+        background: url("~@/assets/images/screen/total.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+        font-size: 18px;
+        font-weight: 500;
+        color: #d0deee;
+        .totalText {
+          margin-left: 16px;
+          font-size: 26px;
+          color: #ebf9ff;
+          line-height: 25px;
+          letter-spacing: 3px;
+          text-shadow: 0px 0px 9px #159aff;
+        }
+      }
+      .chartOpt {
+        position: absolute;
+        z-index: 12;
+        right: 5%;
+        top: 46px;
+        display: flex;
+        div {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 68px;
+          height: 30px;
+          color: #8fabbf;
+          font-size: 14px;
+          background: linear-gradient(
+            0deg,
+            rgba(122, 163, 204, 0.3) 0%,
+            rgba(122, 163, 204, 0) 100%
+          );
+          &:hover {
+            cursor: pointer;
+            background: linear-gradient(
+              0deg,
+              #3cc7b0 0%,
+              rgba(51, 204, 204, 0) 100%
+            );
+          }
+          &.active {
+            color: #ffffff;
+            border-bottom: solid 2px #33cccc;
+            background: linear-gradient(
+              0deg,
+              rgba(60, 199, 176, 0.3) 0%,
+              rgba(51, 204, 204, 0) 100%
+            );
+          }
+        }
+      }
+      .chartPanel {
+        height: calc(100% - 50px);
+      }
+    }
+    .leftCol {
+      flex: auto;
+      width: calc(33.33% - 18px);
+    }
+    .rightCol {
+      padding: 24px 4px 8px 24px;
+      flex: auto;
+      width: calc(66.66% - 12px);
+      background: url("~@/assets/images/screen/right.png") no-repeat center
+        center;
+      background-size: 100% 100%;
+
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+
+      .riskLine {
+        display: flex;
+        .riskItem {
+          display: flex;
+          flex: 1;
+          margin-right: 18px;
+          padding-left: 10px;
+          align-items: center;
+          height: 122px;
+          background: url("~@/assets/images/screen/error.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+          .riskItemLeft {
+            margin-right: 10px;
+            .icon {
+              width: 90px;
+              height: 70px;
+              img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+          }
+          .riskItemRight {
+            flex: 1;
+            .riskItemName {
+              font-size: 18px;
+              font-family: PingFangSC, PingFang SC;
+              font-weight: 500;
+              color: #c4e5ff;
+              line-height: 25px;
+            }
+            .riskItemValue {
+              font-size: 28px;
+              font-family: PingFangSC, PingFang SC;
+              font-weight: 500;
+              color: #ebf9ff;
+              line-height: 37px;
+              letter-spacing: 1px;
+              text-shadow: 0px 0px 9px #159aff;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/enterpriseRiskIndex/analysis.vue

@@ -1,3 +1,279 @@
 <template>
-  <div>风险分析</div>
+  <div class="analysisWrap">
+    <div class="riskRow mb18">
+      <div class="riskCol leftCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">风险监测项评分排行</div>
+        </div>
+        <div class="chartPanel">
+          <div class="chartOpt">
+            <div
+              @click="changeTime('day')"
+              :class="{ active: curTime == 'day' }"
+            >
+              当日
+            </div>
+            <div
+              @click="changeTime('month')"
+              :class="{ active: curTime == 'month' }"
+            >
+              近三月
+            </div>
+            <div
+              @click="changeTime('year')"
+              :class="{ active: curTime == 'year' }"
+            >
+              本年度
+            </div>
+          </div>
+          <barOne :chartObj="tlObj"></barOne>
+        </div>
+      </div>
+      <div class="riskCol midCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">频繁变化风险监测信息近一年变化趋势图</div>
+        </div>
+        <div class="chartPanel">
+          <lineOne :chartObj="tmObj"></lineOne>
+        </div>
+      </div>
+      <div class="riskCol rightCol">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">异常风险项得分占比</div>
+        </div>
+      </div>
+    </div>
+    <div class="riskRow">
+      <div class="riskCol leftCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">风险标签排行</div>
+        </div>
+        <div class="chartPanel">
+          <barOne :chartObj="blObj"></barOne>
+        </div>
+      </div>
+      <div class="riskCol midCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">风险总量分析变化趋势图</div>
+        </div>
+        <div class="chartPanel">
+          <lineOne :chartObj="mmObj"></lineOne>
+        </div>
+      </div>
+      <div class="riskCol rightCol">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">风险标签排行</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
+<script>
+import barOne from "@/loveflow/components/echart/bar/one.vue";
+import lineOne from "@/loveflow/components/echart/line/one.vue";
+export default {
+  components: { barOne, lineOne },
+  data() {
+    return {
+      curTime: "day",
+      tlObj: {
+        xData: [
+          "流动人员",
+          "重点人员",
+          "违章事故",
+          "源头检查",
+          "企业整改",
+          "危险化学品",
+          "民爆物品",
+        ],
+        yData: [12, 13, 14, 15, 11, 14],
+        name: "风险监测项评分排行",
+      },
+      tmObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [
+          [18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
+          [8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8],
+          [11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11],
+        ],
+        name: "频繁变化风险监测信息近一年变化趋势图",
+        legend: ["违规事故", "重点人员", "流动人员"],
+        color: [
+          ["#09C8F5", "rgba(9,200,245,0.1)", "rgba(9,200,245,0.1)"],
+          ["#48EEBD", "rgba(72,238,189,0.1)", "rgba(72,238,189,0.1)"],
+          ["#FFD16A", "rgba(255,209,106,0.1)", "rgba(255,209,106,0.1)"],
+        ],
+      },
+      blObj: {
+        xData: [
+          "人员安全",
+          "危化品运输",
+          "防攻击管理",
+          "消防安全",
+          "列管物品",
+          "道路安全",
+          "内部治安",
+          "网络安全",
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14, 12],
+        name: "风险标签排行",
+      },
+      mmObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [
+          [18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
+          [8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8],
+          [11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11],
+          [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5],
+        ],
+        name: "风险总量分析变化趋势图",
+        legend: [
+          "企业风险总量",
+          "企业风险标签总量",
+          "企业风险得分",
+          "风险预警提醒总量",
+        ],
+        color: [
+          ["#09C8F5", "rgba(9,200,245,0.1)", "rgba(9,200,245,0.1)"],
+          ["#48EEBD", "rgba(72,238,189,0.1)", "rgba(72,238,189,0.1)"],
+          ["#FFD16A", "rgba(255,209,106,0.1)", "rgba(255,209,106,0.1)"],
+          ["#FF3B3B", "rgba(255,59,59,0.1)", "rgba(255,59,59,0.1)"],
+        ],
+      },
+    };
+  },
+  methods: {
+    changeTime(val) {
+      this.curTime = val;
+    },
+  },
+};
+</script>
+<style lang="less">
+.analysisWrap {
+  height: 100%;
+  padding: 18px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  .riskRow {
+    flex: 1;
+    display: flex;
+    .riskCol {
+      background: url("~@/assets/images/screen/line.png") no-repeat center
+        center;
+      background-size: 100% 100%;
+
+      .chartPanel {
+        position: relative;
+        height: calc(100% - 50px);
+        .chartOpt {
+          position: absolute;
+          z-index: 12;
+          right: 5%;
+          display: flex;
+          div {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 68px;
+            height: 30px;
+            color: #8fabbf;
+            font-size: 14px;
+            background: linear-gradient(
+              0deg,
+              rgba(122, 163, 204, 0.3) 0%,
+              rgba(122, 163, 204, 0) 100%
+            );
+            &:hover {
+              cursor: pointer;
+              background: linear-gradient(
+                0deg,
+                #3cc7b0 0%,
+                rgba(51, 204, 204, 0) 100%
+              );
+            }
+            &.active {
+              color: #ffffff;
+              border-bottom: solid 2px #33cccc;
+              background: linear-gradient(
+                0deg,
+                rgba(60, 199, 176, 0.3) 0%,
+                rgba(51, 204, 204, 0) 100%
+              );
+            }
+          }
+        }
+      }
+    }
+    .rightCol {
+      flex: 1;
+    }
+    .midCol {
+      flex: 1.4;
+      margin-right: 18px;
+    }
+    .leftCol {
+      flex: 1.2;
+      margin-right: 18px;
+    }
+  }
+}
+</style>
+<style lang="scss">
+@import "@/loveflow/assets/index.scss";
+.analysisWrap {
+  .riskCol {
+    padding-left: vw(8);
+    font-size: vh(16);
+
+    .riskName {
+      height: 40px;
+      display: flex;
+      margin-top: vh(6);
+      color: #d9e7ff;
+
+      .riskIcon {
+        width: vw(24);
+        height: vh(24);
+        background: url("~@/assets/images/screen/riskIcon.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+</style>

src/views/enterpriseRiskIndex/components/timeSelect.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="chartOpt">
+    <div @click="changeTime('day')" :class="{ active: curTime == 'day' }">
+      当日
+    </div>
+    <div @click="changeTime('month')" :class="{ active: curTime == 'month' }">
+      近三月
+    </div>
+    <div @click="changeTime('year')" :class="{ active: curTime == 'year' }">
+      本年度
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      curTime: "day",
+    };
+  },
+  methods: {
+    changeTime(val) {
+      this.curTime = val;
+      this.$emit("ok", val);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.chartOpt {
+  position: absolute;
+  z-index: 12;
+  right: 5%;
+  display: flex;
+  div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 68px;
+    height: 30px;
+    color: #8fabbf;
+    font-size: 14px;
+    background: linear-gradient(
+      0deg,
+      rgba(122, 163, 204, 0.3) 0%,
+      rgba(122, 163, 204, 0) 100%
+    );
+    &:hover {
+      cursor: pointer;
+      background: linear-gradient(0deg, #3cc7b0 0%, rgba(51, 204, 204, 0) 100%);
+    }
+    &.active {
+      color: #ffffff;
+      border-bottom: solid 2px #33cccc;
+      background: linear-gradient(
+        0deg,
+        rgba(60, 199, 176, 0.3) 0%,
+        rgba(51, 204, 204, 0) 100%
+      );
+    }
+  }
+}
+</style>

src/views/enterpriseRiskIndex/synthetical.vue

@@ -1,3 +1,251 @@
 <template>
-  <div>综合风险</div>
+  <div class="syntheticalWrap">
+    <div class="riskRow mb18">
+      <div class="riskCol leftCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">企业综合风险雷达图</div>
+        </div>
+        <div class="chartPanel">
+          <radarOne :chartObj="tlObj"></radarOne>
+        </div>
+      </div>
+      <div class="riskCol midCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">企业综合风险趋势图</div>
+        </div>
+        <div class="chartPanel">
+          <time-select @ok="tmTime"></time-select>
+          <lineOne :chartObj="tmObj"></lineOne>
+        </div>
+      </div>
+      <div class="riskCol rightCol">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">全区企业风险标签增长趋势</div>
+        </div>
+        <div class="chartPanel">
+          <time-select @ok="trTime"></time-select>
+        </div>
+      </div>
+    </div>
+    <div class="riskRow">
+      <div class="riskCol leftCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">全区企业风险预警总量</div>
+        </div>
+        <div class="chartPanel">
+          <time-select @ok="blTime"></time-select>
+          <barOne :chartObj="blObj"></barOne>
+        </div>
+      </div>
+      <div class="riskCol midCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">全区企业风险标签数量变化趋势</div>
+        </div>
+        <div class="chartPanel">
+          <time-select @ok="bmTime"></time-select>
+          <lineOne :chartObj="mmObj"></lineOne>
+        </div>
+      </div>
+      <div class="riskCol rightCol">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">全区企业风险标签增长趋势</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
+<script>
+import timeSelect from "./components/timeSelect.vue";
+import barOne from "@/loveflow/components/echart/bar/one.vue";
+import lineOne from "@/loveflow/components/echart/line/one.vue";
+import radarOne from "@/loveflow/components/echart/radar/one.vue";
+export default {
+  components: { barOne, lineOne, timeSelect, radarOne },
+  data() {
+    return {
+      tlObj: {
+        indicator: [
+          {
+            name: "人员安全",
+            max: 100,
+          },
+          {
+            name: "道路安全",
+            max: 100,
+          },
+          {
+            name: "列管物品",
+            max: 100,
+          },
+          {
+            name: "消防安全",
+            max: 100,
+          },
+          {
+            name: "危化品运输",
+            max: 100,
+          },
+        ],
+        yData: [12, 13, 14, 15, 11, 14],
+        name: "风险监测项评分排行",
+      },
+      tmObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [
+          [18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
+          [8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8],
+          [11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11],
+        ],
+        name: "频繁变化风险监测信息近一年变化趋势图",
+        legend: ["违规事故", "重点人员", "流动人员"],
+        color: [
+          ["#09C8F5", "rgba(9,200,245,0.1)", "rgba(9,200,245,0.1)"],
+          ["#48EEBD", "rgba(72,238,189,0.1)", "rgba(72,238,189,0.1)"],
+          ["#FFD16A", "rgba(255,209,106,0.1)", "rgba(255,209,106,0.1)"],
+        ],
+      },
+      blObj: {
+        xData: [
+          "人员安全",
+          "危化品运输",
+          "防攻击管理",
+          "消防安全",
+          "列管物品",
+          "道路安全",
+          "内部治安",
+          "网络安全",
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14, 12],
+        name: "风险标签排行",
+      },
+      mmObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [
+          [18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
+          [8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8],
+          [11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11],
+          [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5],
+        ],
+        name: "风险总量分析变化趋势图",
+        legend: [
+          "企业风险总量",
+          "企业风险标签总量",
+          "企业风险得分",
+          "风险预警提醒总量",
+        ],
+        color: [
+          ["#09C8F5", "rgba(9,200,245,0.1)", "rgba(9,200,245,0.1)"],
+          ["#48EEBD", "rgba(72,238,189,0.1)", "rgba(72,238,189,0.1)"],
+          ["#FFD16A", "rgba(255,209,106,0.1)", "rgba(255,209,106,0.1)"],
+          ["#FF3B3B", "rgba(255,59,59,0.1)", "rgba(255,59,59,0.1)"],
+        ],
+      },
+    };
+  },
+  methods: {
+    tmTime(val) {
+      console.log("tmTime:" + val);
+    },
+    trTime(val) {
+      console.log("trTime:" + val);
+    },
+    blTime(val) {
+      console.log("blTime:" + val);
+    },
+    bmTime(val) {
+      console.log("bmTime:" + val);
+    },
+  },
+};
+</script>
+<style lang="less">
+.syntheticalWrap {
+  height: 100%;
+  padding: 18px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  .riskRow {
+    flex: 1;
+    display: flex;
+    .riskCol {
+      background: url("~@/assets/images/screen/line.png") no-repeat center
+        center;
+      background-size: 100% 100%;
+
+      .chartPanel {
+        position: relative;
+        height: calc(100% - 50px);
+      }
+    }
+    .rightCol {
+      flex: 1;
+    }
+    .midCol {
+      flex: 1.3;
+      margin-right: 18px;
+    }
+    .leftCol {
+      flex: 1;
+      margin-right: 18px;
+    }
+  }
+}
+</style>
+<style lang="scss">
+@import "@/loveflow/assets/index.scss";
+.analysisWrap {
+  .riskCol {
+    padding-left: vw(8);
+    font-size: vh(16);
+
+    .riskName {
+      height: 40px;
+      display: flex;
+      margin-top: vh(6);
+      color: #d9e7ff;
+
+      .riskIcon {
+        width: vw(24);
+        height: vh(24);
+        background: url("~@/assets/images/screen/riskIcon.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+</style>

src/views/factor/components/factorMap.vue

@@ -37,10 +37,11 @@ export default {
   },
   data() {
     return {
-      center_point: [121.619992, 30.025703],
+      center_point: window.$mapCfg.center,
     };
   },
   mounted() {
+    console.log(this.center_point)
     this.init_map();
   },
   methods: {