修改页面

src/assets/scss/dataBoard/dialog.scss

@@ -45,4 +45,10 @@
     color: #ffffff;
     font-weight: 600;
   }
+}
+.main-title2 {
+  position: absolute;
+  top: -30px;
+  left: 15px;
+  min-width: 400px;
 }

src/assets/scss/dataBoard/tree.scss

@@ -0,0 +1,40 @@
+.tree {
+  background: rgba(10, 35, 81, 0.66);
+  border: 1px solid #488CC5;
+  border-radius: 2px;
+  height: 600px;
+  overflow-y: auto;
+
+  .el-tree {
+    background: none;
+    color: #FFFFFF;
+    font-size: 14px;
+  }
+}
+
+/deep/ .el-tree-node__content {
+  height: 42px;
+  background: none;
+  border-bottom: 1px solid;
+  border-image: linear-gradient(to right, #000 0%, #4eafd5 50%, #000 100%);
+  border-image-slice: 1;
+  position: relative;
+  text-indent: 2em;
+}
+/deep/ .el-tree-node:focus>.el-tree-node__content,
+/deep/ .el-tree-node__content:hover {
+  background: linear-gradient(90deg, #2aadff80 0%, #8fd4ff0f 50%) !important;
+  &:after {
+    content: "";
+    background: #1487ff;
+    width: 5px;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    color: #6FF3FF;
+  }
+}
+/deep/ .el-tree-node__expand-icon {
+  position: absolute;
+  right: 0;
+}

src/views/dataBoard/cpts/Tabs.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="title">
+      <span v-for="(item, index) in list"
+            :key="item.value"
+            :class="value2 === item.value ? 'cur' : ''"
+            class="text"
+            @click="tabClick(index)"
+      >
+        <span class="txt">{{ item.label }}</span>
+      </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Tabs",
+  props: {
+    list: {
+      type: Array,
+      default: () => [],
+    },
+    value: {
+      type: [String, Number],
+      default: "",
+    },
+  },
+  data() {
+    return {
+      value2: this.value,
+    };
+  },
+  mounted() {
+    this.value2 = this.value;
+  },
+  methods: {
+    tabClick(index) {
+      this.value2 = this.list[index].value;
+      this.$emit("changeVal", this.value2);
+      this.$emit("changeLabel", this.list[index].label);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.title {
+  // width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+  padding: 8px 16px 8px 29px;
+  background: url(@/assets/images/shuju/overview/title-small-bg.png) no-repeat;
+  background-size: 100% 100%;
+
+  .text {
+    font-size: 18px;
+    font-weight: 400;
+    //   font-family: HYShuYuanHeiJ;
+    position: relative;
+    color: #fff;
+    line-height: 30px;
+    padding-left: 11px;
+    opacity: .4;
+    &.cur {
+      background: url("@/assets/images/overview/tab_cur.png") no-repeat;
+      opacity: 1;
+    }
+
+    .txt {
+      font-family: PingFang SC;
+      position: relative;
+      // -webkit-text-fill-color: transparent;
+      z-index: 2;
+      -webkit-background-clip: text;
+    }
+  }
+}
+
+.no-bg {
+  background: none;
+}
+</style>
+  

src/views/dataBoard/cpts/map/index.vue

@@ -1,20 +1,20 @@
 <template>
-  <div class="m-map" :class="{ 'z-td': mapType == 'td' }">
+  <div :class="{ 'z-td': mapType == 'td' }" class="m-map">
-    <div id="map" ></div>
+    <div id="map"></div>
-    <div class="btn" v-if="mapStyleType == 'light'" v-show="false" @click="shiftMapStyle('dark')">切换深色模式</div>
+    <div v-if="mapStyleType == 'light'" v-show="false" class="btn" @click="shiftMapStyle('dark')">切换深色模式</div>
-    <div class="btn" v-show="false" v-else @click="shiftMapStyle('light')">切换浅色模式</div>
+    <div v-else v-show="false" class="btn" @click="shiftMapStyle('light')">切换浅色模式</div>
     <!-- :style="{ transform: `scale(${zoom})` }" -->
-    <cpt-popup ref="popup" @clickListItem="handleClickDotListItem" @operate="handleClickDotBtn" />
+    <cpt-popup ref="popup" @clickListItem="handleClickDotListItem" @operate="handleClickDotBtn"/>
   </div>
 </template>
 
 <script>
-import { requestPost } from "@/js/dai/request";
+import {requestPost} from "@/js/dai/request";
 import nextTick from "dai-js/tools/nextTick";
-import { Scene, PolygonLayer, LineLayer, MarkerLayer, RasterLayer, PointLayer, Marker, Popup } from "@antv/l7";
+import {Scene, PolygonLayer, LineLayer, MarkerLayer, RasterLayer, PointLayer, Marker, Popup} from "@antv/l7";
-import { GaodeMap, Map } from "@antv/l7-maps";
+import {GaodeMap, Map} from "@antv/l7-maps";
-import { spliceIntoChunks } from "@/utils/index";
+import {spliceIntoChunks} from "@/utils/index";
-import { mapType, searchNearby } from "@/utils/dai-map";
+import {mapType, searchNearby} from "@/utils/dai-map";
 import tdtWp from "@/utils/tdt-wp";
 import tdtWpZw from "@/utils/tdt-wp-zw";
 import cptPopup from "./popup";
@@ -145,108 +145,108 @@ export default {
 
   computed: {
     polygonData() {
-      const { srcGridData } = this;
+      const {srcGridData} = this;
       if (!srcGridData || !srcGridData.children || !Array.isArray(srcGridData.children)) {
-        return { type: "FeatureCollection", features: [] };
+        return {type: "FeatureCollection", features: []};
       }
       const polygon = [
         ...srcGridData.children
-          .filter((item) => item.coordinates.length > 0)
+            .filter((item) => item.coordinates.length > 0)
-          .map((item) => ({
+            .map((item) => ({
-            type: "Feature",
+              type: "Feature",
-            properties: {
+              properties: {
-              //   id: item.id,
+                //   id: item.id,
-              //   name: item.name,
+                //   name: item.name,
-              //   level: item.level,
+                //   level: item.level,
-              center: [item.longitude, item.latitude],
+                center: [item.longitude, item.latitude],
-              ...item,
+                ...item,
-              parentName: srcGridData.name || "",
+                parentName: srcGridData.name || "",
-            },
+              },
-            geometry: {
+              geometry: {
-              type: "Polygon",
+                type: "Polygon",
-              coordinates: [
+                coordinates: [
-                spliceIntoChunks(
+                  spliceIntoChunks(
-                  item.coordinates.split(",").map((item) => parseFloat(item)),
+                      item.coordinates.split(",").map((item) => parseFloat(item)),
-                  2
+                      2
-                ).filter((item) => item.length == 2),
+                  ).filter((item) => item.length == 2),
-              ],
+                ],
-            },
+              },
-          })),
+            })),
       ];
-      return { type: "FeatureCollection", features: polygon };
+      return {type: "FeatureCollection", features: polygon};
     },
 
     polygonDotData() {
-      const { srcGridData } = this;
+      const {srcGridData} = this;
       if (!srcGridData || !srcGridData.children || !Array.isArray(srcGridData.children)) {
-        return { type: "FeatureCollection", features: [] };
+        return {type: "FeatureCollection", features: []};
       }
       const polygon = [
         ...srcGridData.children
-          .filter((item) => item.coordinates.length > 0)
+            .filter((item) => item.coordinates.length > 0)
-          .map((item) => ({
-            type: "Feature",
-            properties: {
-              //   id: item.id,
-              //   name: item.name,
-              //   level: item.level,
-              center: [item.longitude, item.latitude],
-              ...item,
-            },
-            geometry: {
-              type: "Polygon",
-              coordinates: [
-                item.latitude
-                  ? [[item.longitude, item.latitude]]
-                  : spliceIntoChunks(
-                      item.coordinates.split(",").map((item) => parseFloat(item)),
-                      2
-                    ).filter((item) => item.length == 2),
-              ],
-            },
-          })),
-      ];
-      return { type: "FeatureCollection", features: polygon };
-    },
-
-    dotData() {
-      const { dotList } = this;
-      return {
-        type: "FeatureCollection",
-        features: [
-          ...dotList
-            .filter((item) => item.latitude)
             .map((item) => ({
               type: "Feature",
               properties: {
+                //   id: item.id,
+                //   name: item.name,
+                //   level: item.level,
+                center: [item.longitude, item.latitude],
                 ...item,
               },
               geometry: {
-                type: "Point",
+                type: "Polygon",
-                coordinates: [parseFloat(item.longitude), parseFloat(item.latitude)],
+                coordinates: [
+                  item.latitude
+                      ? [[item.longitude, item.latitude]]
+                      : spliceIntoChunks(
+                          item.coordinates.split(",").map((item) => parseFloat(item)),
+                          2
+                      ).filter((item) => item.length == 2),
+                ],
               },
             })),
+      ];
+      return {type: "FeatureCollection", features: polygon};
+    },
+
+    dotData() {
+      const {dotList} = this;
+      return {
+        type: "FeatureCollection",
+        features: [
+          ...dotList
+              .filter((item) => item.latitude)
+              .map((item) => ({
+                type: "Feature",
+                properties: {
+                  ...item,
+                },
+                geometry: {
+                  type: "Point",
+                  coordinates: [parseFloat(item.longitude), parseFloat(item.latitude)],
+                },
+              })),
         ],
       };
     },
 
     dotData2() {
-      const { dotList2 } = this;
+      const {dotList2} = this;
       return {
         type: "FeatureCollection",
         features: [
           ...dotList2
-            .filter((item) => item.latitude)
+              .filter((item) => item.latitude)
-            .map((item) => ({
+              .map((item) => ({
-              type: "Feature",
+                type: "Feature",
-              properties: {
+                properties: {
-                ...item,
+                  ...item,
-              },
+                },
-              geometry: {
+                geometry: {
-                type: "Point",
+                  type: "Point",
-                coordinates: [parseFloat(item.longitude), parseFloat(item.latitude)],
+                  coordinates: [parseFloat(item.longitude), parseFloat(item.latitude)],
-              },
+                },
-            })),
+              })),
         ],
       };
     },
@@ -298,7 +298,7 @@ export default {
     },
 
     iniMap() {
-      const { darkStyle, lightStyle, srcGridData } = this;
+      const {darkStyle, lightStyle, srcGridData} = this;
       if (!srcGridData) return false;
 
       let styleConfig = darkStyle;
@@ -358,36 +358,36 @@ export default {
         zIndex: 1,
       });
       baseLayer
-        .source("http://t7.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", {
+          .source("http://t7.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", {
-          parser: {
+            parser: {
-            type: "rasterTile",
+              type: "rasterTile",
-            tileSize: 256,
+              tileSize: 256,
-            // minZoom: 6,
+              // minZoom: 6,
-            // maxZoom: 15,
+              // maxZoom: 15,
-            zoomOffset: 0,
+              zoomOffset: 0,
-          },
+            },
-        })
+          })
-        .style({
+          .style({
-          opacity: 0.7,
+            opacity: 0.7,
-        });
+          });
 
       // 注记服务
       const annotionLayer = new RasterLayer({
         zIndex: 2,
       });
       annotionLayer
-        .source("http://t7.tianditu.com/DataServer?T=cva_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", {
+          .source("http://t7.tianditu.com/DataServer?T=cva_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", {
-          parser: {
+            parser: {
-            type: "rasterTile",
+              type: "rasterTile",
-            tileSize: 256,
+              tileSize: 256,
-            // minZoom: 6,
+              // minZoom: 6,
-            // maxZoom: 15,
+              // maxZoom: 15,
-            zoomOffset: 0,
+              zoomOffset: 0,
-          },
+            },
-        })
+          })
-        .style({
+          .style({
-          opacity: 0.5,
+            opacity: 0.5,
-        });
+          });
 
       scene.addLayer(baseLayer);
       scene.addLayer(annotionLayer);
@@ -401,22 +401,22 @@ export default {
         zIndex: 1,
       });
       baseLayer
-        .source(tdtWpZw.vec, {
+          .source(tdtWpZw.vec, {
-          parser: {
+            parser: {
-            type: "rasterTile",
+              type: "rasterTile",
-            tileSize: 256,
+              tileSize: 256,
-            zoomOffset: 0,
+              zoomOffset: 0,
-          },
+            },
-        })
+          })
-        .style({
+          .style({
-          opacity: 0.7,
+            opacity: 0.7,
-        });
+          });
 
       scene.addLayer(baseLayer);
     },
 
     iniMapGrid(scene) {
-      const { darkStyle, lightStyle, polygonData, polygonDotData } = this;
+      const {darkStyle, lightStyle, polygonData, polygonDotData} = this;
 
       let styleConfig = darkStyle;
       if (this.mapStyleType == "light") {
@@ -428,23 +428,23 @@ export default {
       polygonLayer = new PolygonLayer({
         autoFit: true,
       })
-        // .size(0)
+          // .size(0)
-        .source(polygonData)
+          .source(polygonData)
-        .color("name", styleConfig.polygonColor)
+          .color("name", styleConfig.polygonColor)
-        //   .shape("extrude")
+          //   .shape("extrude")
-        .shape("fill")
+          .shape("fill")
-        .style({
+          .style({
-          opacityLinear: {
+            opacityLinear: {
-            enable: true, // true - false
+              enable: true, // true - false
-            dir: "out", // in - out
+              dir: "out", // in - out
-          },
+            },
-          opacity: 1,
+            opacity: 1,
-          // heightfixed: true,
+            // heightfixed: true,
-          // pickLight: true,
+            // pickLight: true,
-          raisingHeight: 0,
+            raisingHeight: 0,
-          // sourceColor: "#333",
+            // sourceColor: "#333",
-          // targetColor: "rgba(255,255,255, 0.5)",
+            // targetColor: "rgba(255,255,255, 0.5)",
-        });
+          });
 
       scene.addLayer(polygonLayer);
 
@@ -453,34 +453,34 @@ export default {
         zIndex: 2,
         name: "line2",
       })
-        .source(polygonData)
+          .source(polygonData)
-        .shape("line")
+          .shape("line")
-        .size(1)
+          .size(1)
-        .color("name", styleConfig.lineColor)
+          .color("name", styleConfig.lineColor)
-        .style({
+          .style({
-          opacity: 1,
+            opacity: 1,
-        })
+          })
-        .animate({
+          .animate({
-          interval: 1, // 间隔
+            interval: 1, // 间隔
-          duration: 2, // 持续时间，延时
+            duration: 2, // 持续时间，延时
-          trailLength: 2, // 流线长度
+            trailLength: 2, // 流线长度
-        });
+          });
       scene.addLayer(lineLayer);
 
       // 画区域中心点的波纹小圆圈
       circleLayer = new PolygonLayer({
         zIndex: 3,
       })
-        .source(polygonDotData)
+          .source(polygonDotData)
-        .color("name", styleConfig.circleColor)
+          .color("name", styleConfig.circleColor)
-        .shape("circle")
+          .shape("circle")
-        .active(true)
+          .active(true)
-        .animate(true)
+          .animate(true)
-        .size(50)
+          .size(50)
-        .style({
+          .style({
-          offsets: [0, -10], // 文本相对锚点的偏移量 [水平, 垂直]
+            offsets: [0, -10], // 文本相对锚点的偏移量 [水平, 垂直]
-          opacity: 1,
+            opacity: 1,
-        });
+          });
       // scene.addLayer(circleLayer);
       scene.addImage("pos-red", require("@/assets/img/shuju/grid/pos-red.png"));
       scene.addImage("pos-green", require("@/assets/img/shuju/grid/pos-green.png"));
@@ -491,17 +491,17 @@ export default {
         name: "gridPoint",
         visible: false,
       })
-        .source(polygonDotData)
+          .source(polygonDotData)
-        .shape("name", [
+          .shape("name", [
-          // "pos-red",
+            // "pos-red",
-          "pos-green",
+            "pos-green",
-          // "pos-yellow"
+            // "pos-yellow"
-        ])
+          ])
-        .size(12)
+          .size(12)
-        .style({
+          .style({
-          options: this.level === "grid" ? 1 : 0,
+            options: this.level === "grid" ? 1 : 0,
-          offsets: [0, 0],
+            offsets: [0, 0],
-        });
+          });
       // scene.addLayer(posLayer);
       /*    if (this.level === 'grid') {
             posLayer.show()
@@ -511,21 +511,21 @@ export default {
       textLayer = new PolygonLayer({
         zIndex: 20,
       })
-        .source(polygonData)
+          .source(polygonData)
-        .color("name", styleConfig.textColor)
+          .color("name", styleConfig.textColor)
-        .shape("name", "text")
+          .shape("name", "text")
-        .size(16)
+          .size(16)
-        .style({
+          .style({
-          textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
+            textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-          textOffset: [0, 40], // 文本相对锚点的偏移量 [水平, 垂直]
+            textOffset: [0, 40], // 文本相对锚点的偏移量 [水平, 垂直]
-          spacing: 2, // 字符间距
+            spacing: 2, // 字符间距
-          padding: [2, 2], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+            padding: [2, 2], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-          stroke: styleConfig.textStrokeColor, // 描边颜色
+            stroke: styleConfig.textStrokeColor, // 描边颜色
-          strokeWidth: 0.1, // 描边宽度
+            strokeWidth: 0.1, // 描边宽度
-          strokeOpacity: 0.8,
+            strokeOpacity: 0.8,
-          textAllowOverlap: true,
+            textAllowOverlap: true,
-        })
+          })
-        .active(true);
+          .active(true);
       scene.addLayer(textLayer);
       let popup;
       polygonLayer.on("mousemove", (e) => {
@@ -552,7 +552,9 @@ export default {
         scene.addPopup(popup);
       });
       polygonLayer.on("mouseout", (e) => {
-        popup.remove();
+        if (popup) {
+          popup.remove();
+        }
       });
       polygonLayer.on("click", (e) => {
         if (this.level === "grid") {
@@ -580,34 +582,34 @@ export default {
     },
 
     iniMapDot(scene) {
-      const { darkStyle, lightStyle, dotIcoList, dotData } = this;
+      const {darkStyle, lightStyle, dotIcoList, dotData} = this;
       Object.keys(dotIcoList).forEach((k) => {
         scene.addImage(k, dotIcoList[k]);
       });
       dotBgLayer = new PointLayer({
         zIndex: 20,
       })
-        .source(dotData)
+          .source(dotData)
-        .shape("circle")
+          .shape("circle")
-        .color("rgba(255,255,255,0.8)")
+          .color("rgba(255,255,255,0.8)")
-        .size(20)
+          .size(20)
-        .style({
+          .style({
-          strokeWidth: 3,
+            strokeWidth: 3,
-          strokeOpacity: 0.1,
+            strokeOpacity: 0.1,
-          stroke: "#000",
+            stroke: "#000",
-        });
+          });
       scene.addLayer(dotBgLayer);
 
       dotLayer = new PointLayer({
         zIndex: 21,
       })
-        .source(dotData)
+          .source(dotData)
-        .shape("categoryKey", (k) => k)
+          .shape("categoryKey", (k) => k)
-        .size(10)
+          .size(10)
-        .style({
+          .style({
-          offsets: [0, 0],
+            offsets: [0, 0],
-          layerType: "fillImage",
+            layerType: "fillImage",
-        });
+          });
       scene.addLayer(dotLayer);
 
       dotBgLayer.on("click", (e) => {
@@ -621,17 +623,18 @@ export default {
             offsets: [0, -0],
             closeButton: false,
           })
-            .setLnglat(e.feature.geometry.coordinates)
+              .setLnglat(e.feature.geometry.coordinates)
-            .setHTML(`<span>${e.feature.properties.content}</span>`);
+              .setHTML(`<span>${e.feature.properties.content}</span>`);
           scene.addPopup(popup);
         }
       });
 
-      dotBgLayer.on("unmousemove", (e) => {});
+      dotBgLayer.on("unmousemove", (e) => {
+      });
     },
 
     iniMapDot2(scene) {
-      const { dotIcoList2: dotIcoList, dotData2: dotData } = this;
+      const {dotIcoList2: dotIcoList, dotData2: dotData} = this;
       Object.keys(dotIcoList).forEach((k) => {
         scene.addImage(k, dotIcoList[k]);
       });
@@ -639,13 +642,13 @@ export default {
       dotLayer2 = new PointLayer({
         zIndex: 21,
       })
-        .source(dotData)
+          .source(dotData)
-        .shape("categoryKey", (k) => k)
+          .shape("categoryKey", (k) => k)
-        .size(20)
+          .size(20)
-        .style({
+          .style({
-          offsets: [0, 0],
+            offsets: [0, 0],
-          layerType: "fillImage",
+            layerType: "fillImage",
-        });
+          });
       scene.addLayer(dotLayer2);
 
       dotLayer2.on("click", (e) => {
@@ -659,13 +662,14 @@ export default {
             offsets: [0, -0],
             closeButton: false,
           })
-            .setLnglat(e.feature.geometry.coordinates)
+              .setLnglat(e.feature.geometry.coordinates)
-            .setHTML(`<span>${e.feature.properties.content}</span>`);
+              .setHTML(`<span>${e.feature.properties.content}</span>`);
           scene.addPopup(popup);
         }
       });
 
-      dotLayer2.on("unmousemove", (e) => {});
+      dotLayer2.on("unmousemove", (e) => {
+      });
     },
 
     // 把地图缩放等级在原来基础上大一点
@@ -687,7 +691,7 @@ export default {
     },
 
     updateGrid() {
-      const { polygonData, polygonDotData } = this;
+      const {polygonData, polygonDotData} = this;
       if (polygonLayer) {
         polygonLayer.setData(polygonData);
         lineLayer.setData(polygonData);
@@ -704,7 +708,7 @@ export default {
     },
 
     updateDot() {
-      const { dotData } = this;
+      const {dotData} = this;
       if (dotLayer) {
         dotLayer.setData(dotData);
         dotBgLayer.setData(dotData);
@@ -712,7 +716,7 @@ export default {
     },
 
     updateDot2() {
-      const { dotData2: dotData } = this;
+      const {dotData2: dotData} = this;
       if (dotLayer2) {
         dotLayer2.setData(dotData);
       }
@@ -774,17 +778,17 @@ export default {
         searchBgLayer = new PolygonLayer({
           //   autoFit: true,
         })
-          .source(sourceData)
+            .source(sourceData)
-          .color("#f0f")
+            .color("#f0f")
-          .shape("fill")
+            .shape("fill")
-          .style({
+            .style({
-            opacityLinear: {
+              opacityLinear: {
-              enable: true, // true - false
+                enable: true, // true - false
-              dir: "out", // in - out
+                dir: "out", // in - out
-            },
+              },
-            opacity: 0.3,
+              opacity: 0.3,
-            raisingHeight: 0,
+              raisingHeight: 0,
-          });
+            });
 
         scene.addLayer(searchBgLayer);
       }
@@ -878,8 +882,8 @@ export default {
           closeOnClick: true,
           maxWidth: 400,
         })
-          .setLnglat(posArr)
+            .setLnglat(posArr)
-          .setDOMContent(this.$refs.popup.$el);
+            .setDOMContent(this.$refs.popup.$el);
         marker.setPopup(popup);
       }
 
@@ -914,8 +918,8 @@ export default {
           closeOnClick: true,
           maxWidth: 400,
         })
-          .setLnglat(posArr)
+            .setLnglat(posArr)
-          .setDOMContent(this.$refs.popup.$el);
+            .setDOMContent(this.$refs.popup.$el);
         scene.addPopup(popup);
       }
     },
@@ -937,21 +941,22 @@ export default {
 /deep/ .amap-container {
   background: transparent !important;
 }
+
 .m-map {
   position: relative;
+  overflow: hidden;
   height: 100%;
   border-radius: 10px;
-  overflow: hidden;
   background: transparent;
 
   &::after {
     position: absolute;
-    content: "";
-    display: block;
     top: 0;
-    left: 0;
     right: 0;
     bottom: 0;
+    left: 0;
+    display: block;
+    content: "";
     pointer-events: none;
     background: radial-gradient(rgba(#020c38, 0) 0%, rgba(#020c38, 0) 60%, rgba(#020c38, 1) 85%, rgba(#020c38, 1) 100%);
   }
@@ -965,9 +970,9 @@ export default {
         }
 
         .gray {
+          opacity: 0.7;
           -webkit-filter: grayscale(100%);
           filter: grayscale(100%);
-          opacity: 0.7;
         }
       }
     }
@@ -979,42 +984,42 @@ export default {
 
   /deep/ .l7-popup-content {
     //background: rgba(#fff, 1);
-    background: rgba(3, 31, 73, 0.72);
+    width: 416px;
-    border: 1px solid #74c9ff;
+    padding: 0 20px !important;
     opacity: 0.9;
-    border-radius: 5px;
     color: #fff;
+    border: 1px solid #74c9ff;
     //box-shadow: 0 0 20px 3px inset rgba(#22f, 0.1);
-    width: 416px;
+    border-radius: 5px;
-    padding: 0 20px !important;
+    background: rgba(3, 31, 73, 0.72);
     background: url("@/assets/images/overview/dia_con.png");
 
     &:before {
-      content: "";
-      display: block;
-      background: url("@/assets/images/overview/dia_head.png");
-      height: 29px;
-      width: 100%;
       position: absolute;
       top: -27.5px;
       left: 0;
+      display: block;
+      width: 100%;
+      height: 29px;
+      content: "";
+      background: url("@/assets/images/overview/dia_head.png");
     }
 
     &:after {
-      content: "";
-      display: block;
-      background: url("@/assets/images/overview/dia_foot.png");
-      height: 26px;
-      width: 100%;
-      left: 0;
       position: absolute;
       bottom: -24px;
+      left: 0;
+      display: block;
+      width: 100%;
+      height: 26px;
+      content: "";
+      background: url("@/assets/images/overview/dia_foot.png");
     }
   }
 
   /deep/ .l7-popup-close-button {
-    padding: 4px;
     font-size: 36px;
+    padding: 4px;
     color: rgba(#fff, 0.8);
   }
 
@@ -1025,35 +1030,35 @@ export default {
 
   #searchMap {
     position: absolute;
+    visibility: hidden;
     width: 200px;
     height: 200px;
-    visibility: hidden;
     pointer-events: none;
   }
 
   .btn {
+    font-size: 14px;
+    line-height: 36px;
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100px;
-    line-height: 36px;
     height: 36px;
+    cursor: pointer;
     text-align: center;
     color: #ffffff;
-    font-size: 14px;
     background-color: rgba(#000, 0.2);
-    cursor: pointer;
   }
 
   /deep/ .label-num-class {
     font-size: 16px;
     font-weight: 500;
+    padding: 3px 13px;
+    opacity: 0.9;
     color: #ffffff;
-    background: rgba(3, 31, 73, 0.72);
     border: 1px solid #74c9ff;
-    opacity: 0.9;
     border-radius: 100px;
-    padding: 3px 13px;
+    background: rgba(3, 31, 73, 0.72);
   }
 
   /deep/ .l7-popup-tip {
@@ -1075,21 +1080,21 @@ export default {
   }
 
   /deep/ .jw-popup-title {
-    font-size: 20px;
     font-family: HYShuYuanHeiJ;
+    font-size: 20px;
     font-weight: 400;
+    margin-bottom: 16px;
     color: #ffffff;
     background: linear-gradient(0deg, #2dc1ff 0%, #ffffff 58.5205078125%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    margin-bottom: 16px;
   }
 
   /deep/ .jw-popup-des {
     font-size: 14px;
     font-weight: 400;
-    color: #ffffff;
     line-height: 22px;
+    color: #ffffff;
   }
 
   /deep/ .label-point-class {
@@ -1109,11 +1114,12 @@ export default {
       background-image: url("@/assets/images/overview/yellow.png");
     }
   }
+
   /deep/ .label-pointLd-class {
     width: 16px;
     height: 16px;
-    background: #1ae1ff;
     border-radius: 50%;
+    background: #1ae1ff;
   }
 
   /deep/ .jw-popup-type {
@@ -1137,11 +1143,11 @@ export default {
     flex-wrap: wrap;
 
     & > div {
+      font-size: 14px;
+      font-weight: 400;
       flex: 0 0 33%;
       width: 33%;
       height: 14px;
-      font-size: 14px;
-      font-weight: 400;
       margin-bottom: 15px;
 
       span {

src/views/dataBoard/cpts/sjkb-map/popup.vue

@@ -0,0 +1,407 @@
+<template>
+	<div class="m-pop" ref="pop" @mousewheel="handleWheel" v-show="!hidden">
+		<div class="info">
+			<div v-if="type === '1'">
+				<div class="u-info-title">
+					<img
+						class="img"
+						src="@/assets/images/shuju/renfang/jm-logo.png"
+						alt
+					/>
+					<span>居民信息</span>
+				</div>
+
+				<div @click="handleClickBtn('watch-resi')" class="more-btn">
+					查看更多 >
+				</div>
+
+				<div class="item">
+					<span class="field">姓名：</span>
+					<span>{{ info.user_name || "--" }}</span>
+				</div>
+				<div class="item">
+					<span class="field">所属网格：</span>
+					<span>{{ info.grid || "--" }}</span>
+				</div>
+				<div class="item">
+					<span class="field">所属小区：</span>
+					<span>{{ info.village || "--" }}</span>
+				</div>
+
+				<div class="item">
+					<span class="field">联系电话：</span>
+					<span>{{ info.telephone || "--" }}</span>
+				</div>
+				<div class="item">
+					<span class="field">性别：</span>
+					<span>{{ info.genderShow || "--" }}</span>
+				</div>
+
+				<div class="item">
+					<span class="field">证件号：</span>
+					<span>{{ info.idcard || "--" }}</span>
+				</div>
+
+				<div class="item">
+					<span class="field">工作单位：</span>
+					<span>{{ info.workunit || "--" }}</span>
+				</div>
+				<div class="item">
+					<span class="field">人户状况：</span>
+					<span>{{ info.household || "--" }}</span>
+				</div>
+				<div class="item">
+					<span class="field">人员类别：</span>
+					<span>{{ info.classtype || "--" }}</span>
+				</div>
+
+				<div class="operate" v-if="false">
+					<div
+						@click="handleClickBtn('create-demand')"
+						v-if="info.agencyId == $store.state.user.agencyId"
+						class="btn z-blue"
+					>
+						发布需求
+					</div>
+
+					<div
+						v-if="
+							info.agencyId == $store.state.user.agencyId &&
+							type === 'volunteer'
+						"
+						@click="handleClickBtn('create-service')"
+						class="btn z-yellow"
+					>
+						发起服务
+					</div>
+				</div>
+			</div>
+
+			<div v-if="type === '2'">
+				<div class="u-info-title">
+					<img
+						class="img"
+						src="@/assets/images/shuju/renfang/house-logo.png"
+						alt
+					/>
+					<span>小区信息</span>
+				</div>
+
+				<div class="item">
+					<span class="field">所属组织：</span>
+					<span>{{ info.community || "--" }}</span>
+				</div>
+				<div class="item">
+					<span class="field">所属网格：</span>
+					<span>{{ info.grid || "--" }}</span>
+				</div>
+				<div class="item">
+					<span class="field">小区名称：</span>
+					<span>{{ info.village_name || "--" }}</span>
+				</div>
+				<div class="item">
+					<span class="field">关联物业：</span>
+					<span>{{ info.property || "--" }}</span>
+				</div>
+				<div class="item">
+					<span class="field">实有楼栋：</span>
+					<span>{{ info.building || "--" }}</span>
+				</div>
+			</div>
+
+			<div v-if="type === '3'">
+				<div class="u-info-title">
+					<img
+						class="img"
+						src="@/assets/images/shuju/renfang/house-logo.png"
+						alt
+					/>
+					<span>楼栋信息</span>
+				</div>
+
+				<div class="item">
+					<span class="field">所属小区：</span>
+					<span>{{ info.village_name || "--" }}</span>
+				</div>
+				<div class="item">
+					<span class="field">楼栋名称：</span>
+					<span>{{ info.village_name || "--" }}</span>
+				</div>
+				<div class="item">
+					<span class="field">楼栋类型：</span>
+					<span>{{ info.building_type || "--" }}</span>
+				</div>
+				<div class="item">
+					<span class="field">单元数：</span>
+					<span>{{ info.unit_count || "--" }}</span>
+				</div>
+				<div class="item">
+					<span class="field">层数：</span>
+					<span>{{ info.levels_count || "--" }}</span>
+				</div>
+				<div class="item">
+					<span class="field">总户数：</span>
+					<span>{{ info.households || "--" }}</span>
+				</div>
+				<div class="item">
+					<span class="field">人口数：</span>
+					<span>{{ info.resident_count || "--" }}</span>
+				</div>
+				<div class="item">
+					<span class="field">楼长姓名：</span>
+					<span>{{ info.hm_name || "--" }}</span>
+				</div>
+				<div class="item">
+					<span class="field">楼长电话：</span>
+					<span>{{ info.hm_phone || "--" }}</span>
+				</div>
+				<div class="item">
+					<span class="field">详细地址：</span>
+					<span>{{ info.location || "--" }}</span>
+				</div>
+			</div>
+
+			<div v-if="type === '4'">
+				<div class="u-info-title">
+					<img
+						class="img"
+						src="@/assets/images/shuju/renfang/house-logo.png"
+						alt
+					/>
+					<span>房屋信息</span>
+				</div>
+
+				<div @click="handleClickBtn('watch-house')" class="more-btn">
+					查看更多 >
+				</div>
+
+				<div class="item">
+					<span class="field">房屋名称：</span>
+					<span>{{ info.title || "--" }}</span>
+				</div>
+				<div class="item">
+					<span class="field">房屋类型：</span>
+					<span>{{ info.house_type || "--" }}</span>
+				</div>
+				<div class="item">
+					<span class="field">房屋用途：</span>
+					<span>{{ info.house_usage || "--" }}</span>
+				</div>
+				<div class="item">
+					<span class="field">房屋状态：</span>
+					<span>{{ info.house_state || "--" }}</span>
+				</div>
+				<div class="item">
+					<span class="field">房主姓名：</span>
+					<span>{{ info.holder_name || "--" }}</span>
+				</div>
+				<div class="item">
+					<span class="field">联系方式：</span>
+					<span>{{ info.holder_phone || "--" }}</span>
+				</div>
+				<div class="item">
+					<span class="field">房主证件号：</span>
+					<span>{{ info.holder_idcard || "--" }}</span>
+				</div>
+				<div class="item">
+					<span class="field">备注：</span>
+					<span>{{ info.remark || "--" }}</span>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { requestPost, requestGet } from "@/js/dai/request";
+
+export default {
+	name: "popup",
+
+	props: {
+		item: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+
+	data() {
+		return {
+			hidden: true,
+			type: "",
+			srcItem: {},
+			info: {},
+			list: [],
+		};
+	},
+
+	computed: {},
+	watch: {},
+
+	mounted() {},
+
+	methods: {
+		handleWheel(e) {
+			if (this.$refs.pop.clientHeight >= 321) {
+				e.stopPropagation();
+			}
+		},
+
+		handleClickBtn(type) {
+			this.$emit("operate", type, {
+				type: this.type,
+				id: this.srcItem.id,
+				...this.info,
+			});
+		},
+
+		handleClickListItem(item) {
+			console.log("handleClickListItem", item);
+			this.$emit("clickListItem", item);
+		},
+
+		async show(item) {
+			console.log("-----------------show:", item);
+			const { type, latitude, longitude } = item;
+			if (!type) {
+				return false;
+			}
+			if (!latitude || !longitude) {
+				this.$message.warning("请先完善坐标位置");
+				return false;
+			}
+
+			this.type = item.type;
+			this.srcItem = item;
+			this.info = item;
+			this.hidden = false;
+			return true;
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/c/config.scss";
+@import "@/assets/scss/c/function.scss";
+@import "@/assets/scss/modules/visual/c/common.scss";
+
+.m-pop {
+	@include scrollBar2;
+	box-sizing: border-box;
+	padding: 10px 0;
+	width: 350px;
+	color: #fff;
+	font-size: 14px;
+	line-height: 20px;
+	max-height: 500px;
+	overflow-y: auto;
+
+	.info {
+		padding: 10px;
+		.u-info-title {
+			margin-bottom: 10px;
+			line-height: 20px;
+			font-size: 14px;
+			font-family: PingFangSC-Medium, PingFang SC;
+			font-weight: 500;
+			color: #ffffff;
+
+			img {
+				position: relative;
+				top: 2px;
+				margin-right: 6px;
+				width: 16px;
+				vertical-align: top;
+			}
+		}
+
+		.item-pics {
+			display: flex;
+			margin: 20px 0;
+			img {
+				display: block;
+				width: 32%;
+				height: 90px;
+				margin-right: 9px;
+				object-fit: cover;
+			}
+		}
+	}
+	.item {
+		@include toe;
+		font-size: 14px;
+		font-family: PingFang SC;
+		font-weight: 400;
+		color: rgba(#ffffff, 0.85);
+		line-height: 28px;
+		.field {
+			display: inline-block;
+			margin-right: 5px;
+			min-width: 90px;
+			text-align: right;
+			color: rgba(#ffffff, 0.65);
+		}
+	}
+
+	.list {
+		.item {
+			display: flex;
+			align-items: center;
+			margin-bottom: 5px;
+			padding: 5px;
+			border-bottom: 1px dashed #124584;
+			&:last-child {
+				border-bottom: none;
+			}
+			.item-cnt {
+				@include toe;
+				width: 90%;
+			}
+			.i-arrow {
+				margin-left: auto;
+			}
+		}
+	}
+
+	.operate {
+		display: flex;
+		justify-content: center;
+	}
+
+	.more-btn {
+		position: absolute;
+		right: 20px;
+		top: 28px;
+		width: 80px;
+		height: 24px;
+		font-family: PingFangSC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #1a95ff;
+		line-height: 20px;
+		font-size: 14px;
+		text-align: right;
+		cursor: pointer;
+	}
+
+	.btn {
+		margin-top: 20px;
+		margin-right: 20px;
+		width: 110px;
+		line-height: 30px;
+		border: 1px solid #eee;
+		text-align: center;
+		font-size: 18px;
+		border-radius: 2px;
+		cursor: pointer;
+		&.z-blue {
+			background: #09a5ff;
+			border-color: #09a5ff;
+		}
+		&.z-yellow {
+			background: #fe6b53;
+			border-color: #fe6b53;
+		}
+	}
+}
+</style>

src/views/dataBoard/overview/components/DemandCharts.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="charts">
+    <el-select v-model="date" class="select" placeholder="请选择" popper-class="selectPopClass" @change="timeChange">
+      <el-option v-for="item in dateList" :key="item.value" :label="item.label" :value="item.value"/>
+    </el-select>
+    <div id="DemandCharts"></div>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from "echarts";
+
+export default {
+  name: "DemandCharts",
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      dateList: [{
+        label: '上月',
+        value: 1
+      }, {
+        label: '近三个月',
+        value: 2
+      }, {
+        label: '近半年',
+        value: 3
+      }, {
+        label: '近一年',
+        value: 4
+      }],
+      date: 4
+    }
+  },
+  mounted() {
+    this.initChart();
+  },
+  methods: {
+    timeChange() {
+
+    },
+    initChart() {
+      let div = document.getElementById('DemandCharts');
+      this.myChart = echarts.init(div);
+      var getname = ['健康知识专业讲座', '未成年人兴趣培养', '老年人现代智能···', '老年群体的心理···', '配合社区安全巡···', '其他']; // 课程名
+      var getNum = [8, 9, 16, 21, 26, 62];
+
+      var data = [];
+      for (var i = 0; i < getname.length; i++) {
+        data.push({name: getname[i], value: getNum[i]})
+      }
+      const color = ['#16A7EB', '#5974FF', '#04C790', '#FFAA01', '#FF6701', '#EF3B00']
+
+      var option = {
+        color,
+        tooltip: {
+          trigger: "item"
+        },
+        legend: {
+          type: "plain",
+          orient: "vertical",
+          right: 0,
+          top: "center",
+          align: "left",
+          itemGap: 10,
+          itemWidth: 8,
+          itemHeight: 8,
+          symbolKeepAspect: false,
+          selectedMode: false,
+          formatter: function (name) {
+            for (var i = 0; i < getname.length; i++) {
+              if (name == data[i].name) {
+                return '{name|' + name + '}{num|' + getNum[i] + '人}'
+              }
+            }
+          },
+          textStyle: {
+            rich: {
+              name: {
+                fontSize: 12,
+                width: 96,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                padding: [0, 29, 0, 5],
+                color: '#A3B9DA',
+              },
+              num: {
+                fontSize: 12,
+                fontWeight: 500,
+                align: 'right',
+                color: '#FFFFFF',
+              }
+            }
+          }
+        },
+        series: [{
+          name: '',
+          type: "pie",
+          radius: ["65%", "90%"],
+          center: ["20%", "50%"],
+          avoidLabelOverlap: false,
+
+          label: {
+            show: true,
+            position: "center",
+            color: "rgba(13, 17, 29,0)",
+            formatter: `{primary|${3289}}\n{point|总数}`,
+            rich: {
+              primary: {
+                fontSize: 24,
+                color: '#7FCEFF',
+                align: 'center'
+              },
+              point: {
+                fontSize: 12,
+                fontWeight: 400,
+                color: "#A3B9DA",
+                align: 'center'
+              }
+            }
+          },
+          labelLine: {
+            show: false
+          },
+          data: data,
+          zlevel: 30
+        }]
+      };
+      this.myChart.setOption(option, true);
+      window.addEventListener("resize", () => this.myChart.resize());
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+/deep/ .el-input__inner {
+  width: 90px !important;
+  height: 24px !important;
+  color: #a0cdff;
+  border: 1px solid #125aaa !important;
+  border-radius: 12px !important;
+  background: #021c49 !important;
+}
+
+/deep/ .el-input__icon {
+  line-height: 24px !important;
+  color: #a0cdff;
+}
+
+.charts {
+  display: flex;
+  justify-content: space-between;
+
+  #DemandCharts {
+    flex: calc(100% - 100px);
+    width: calc(100% - 100px);
+    height: 150px;
+  }
+}
+</style>

src/views/dataBoard/overview/components/DemandSwiperList.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="t-list f-hflex">
+    <swiper ref="orderSwiper" :options="swiperOptions">
+      <swiper-slide
+          v-for="(item, index) in list"
+          :key="index"
+          class="swiper-slide"
+      >
+        <div
+            class="item f-flex bto-border"
+            @click="handleView(item)"
+        >
+          <span>{{ item.createdTime }}</span>
+          <span>{{ item.eventContent }}</span>
+        </div>
+      </swiper-slide>
+    </swiper>
+  </div>
+</template>
+
+<script>
+import {swiper, swiperSlide} from "vue-awesome-swiper";
+
+export default {
+  name: "DemandSwiperList",
+  components: {
+    swiper,
+    swiperSlide,
+  },
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      swiperOptions: {
+        direction: "vertical", // 滑动方向，可以是 'horizontal' 或 'vertical'
+        slidesPerView: 3,
+        autoplay: {
+          delay: 1000, // 自动切换的间隔时间，单位是毫秒
+          disableOnInteraction: true, // 用户操作后是否禁止自动切换
+        },
+        loop: true, // 是否启用循环模式
+        speed: 2000, // 滑动速度，单位是毫秒
+      },
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    handleView(item) {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.f-hflex {
+  width: 83px;
+}
+
+.f-flex {
+  margin-top: 4px;
+}
+
+.f-darkGray {
+  margin-top: 15px;
+}
+
+.no-data {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: .6;
+  color: #fff;
+}
+
+.t-list {
+  position: relative;
+  flex: 1;
+  width: 100%;
+
+  .swiper-container {
+    width: 100%;
+    height: 120px;
+  }
+
+  .item {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    height: 40px;
+    cursor: pointer;
+    color: #fff;
+
+    span {
+      //text-align: center;
+    }
+
+    > :nth-child(1) {
+      width: 50px;
+      color: #A3B9DA
+    }
+
+    > :nth-child(2) {
+      overflow: hidden;
+      flex: 1;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.swiper-slide {
+  padding: 0 4px;
+  //height: 36px!important;
+  .bto-border {
+    border-bottom: 1px solid;
+    border-image: linear-gradient(to right, #1c3e69 0%, #4eafd5 50%, #1c3e69 100%);
+    border-image-slice: 1;
+  }
+}
+</style>

src/views/dataBoard/overview/components/RequirementList.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="container">
+    <div class="tab" style="margin-top: 0;">
+      <Tabs :list="tab" :value="tabval" @changeVal="(val) => tabval = val"/>
+    </div>
+    <DemandSwiperList v-if="tabval === 1" :list="list"/>
+    <DemandCharts v-else/>
+    <div class="tab">
+      <Tabs :list="tab2" :value="tabval2"  @changeVal="(val) => tabval2 = val"/>
+    </div>
+    <DemandSwiperList v-if="tabval2 === 1" :list="list"/>
+    <DemandCharts v-else/>
+    <ServiceDetails ref="ServiceDetails"/>
+  </div>
+</template>
+
+<script>
+import Tabs from "@/views/dataBoard/cpts/Tabs.vue";
+import DemandSwiperList from "@/views/dataBoard/overview/components/DemandSwiperList.vue";
+import DemandCharts from "@/views/dataBoard/overview/components/DemandCharts.vue";
+import ServiceDetails from "@/views/dataBoard/overview/components/ServiceDetails.vue";
+
+export default {
+  name: "RequirementList",
+  components: {
+    Tabs,
+    DemandCharts,
+    DemandSwiperList,
+    ServiceDetails
+  },
+  data() {
+    return {
+      tabval: 1,
+      tabval2: 1,
+      list: [{
+        createdTime: '今天',
+        eventContent: '失能老人基础护理服务',
+      }, {
+        createdTime: '昨天',
+        eventContent: '失能老人基础护理服务',
+      }, {
+        createdTime: '5-20',
+        eventContent: '失能老人基础护理服务',
+      }, {
+        createdTime: '5-19',
+        eventContent: '失能老人基础护理服务',
+      }],
+      tab: [{
+        label: '个性需求未完成清单',
+        value: 1
+      }, {
+        label: '个性需求分类统计',
+        value: 2
+      }],
+      tab2: [{
+        label: '共性需求未承接清单',
+        value: 1
+      }, {
+        label: '共性需求分类统计',
+        value: 2
+      }]
+    }
+  },
+  mounted() {
+    this.$refs.ServiceDetails.open();
+  },
+  methods: {}
+}
+</script>
+
+
+<style lang="scss" scoped>
+.container {
+  padding: 19px 16px;
+}
+
+.tab {
+  margin: 10px 0;
+}
+
+</style>

src/views/dataBoard/overview/components/ResourceScheduling.vue

@@ -0,0 +1,107 @@
+<template>
+  <el-dialog
+      :before-close="handleClose"
+      :modal="true"
+      :modal-append-to-body="false"
+      :visible.sync="dialogVisible"
+      class="dissatisfied-detail"
+      title=""
+      width="1118px"
+  >
+    <div class="content">
+      <div class="main-title main-title2">
+        <Title text="资源调度"/>
+      </div>
+
+      <div class="contents">
+        <el-row>
+          <el-col :span="6">
+            <div class="tree">
+              <el-tree
+                  :data="data"
+                  :default-expand-all="true"
+                  :props="defaultProps"
+                  icon-class="el-icon-arrow-right"
+                  @node-click="handleNodeClick"
+              />
+            </div>
+          </el-col>
+
+        </el-row>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import Title from "@/views/dataBoard/satisfactionEval/components/Title";
+
+export default {
+  name: "ResourceScheduling",
+  components: {Title},
+  data() {
+    return {
+      dialogVisible: false,
+      data: [{
+        label: '一级 1',
+        children: [{
+          label: '二级 1-1',
+          children: [{
+            label: '三级 1-1-1'
+          }]
+        }]
+      }, {
+        label: '一级 2',
+        children: [{
+          label: '二级 2-1',
+          children: [{
+            label: '三级 2-1-1'
+          }]
+        }, {
+          label: '二级 2-2',
+          children: [{
+            label: '三级 2-2-1'
+          }]
+        }]
+      }, {
+        label: '一级 3',
+        children: [{
+          label: '二级 3-1',
+          children: [{
+            label: '三级 3-1-1'
+          }]
+        }, {
+          label: '二级 3-2',
+          children: [{
+            label: '三级 3-2-1'
+          }]
+        }]
+      }],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      }
+    };
+  },
+  methods: {
+    handleClose(done) {
+      this.dialogVisible = false;
+    },
+    open(id) {
+      this.dialogVisible = true;
+      this.getDetail(id);
+    },
+    getDetail(id) {
+
+    },
+    handleNodeClick() {
+
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/dataBoard/dialog.scss";
+@import "@/assets/scss/dataBoard/tree.scss";
+</style>

src/views/dataBoard/overview/components/ServiceDetails.vue

@@ -0,0 +1,209 @@
+<template>
+  <div>
+
+    <el-dialog
+        :before-close="handleClose"
+        :modal="true"
+        :modal-append-to-body="false"
+        :visible.sync="dialogVisible"
+        class="dissatisfied-detail"
+        title=""
+        width="1118px"
+    >
+      <div class="content">
+        <div class="main-title main-title2">
+          <Title text="个性服务详情"/>
+        </div>
+
+        <div class="contents">
+          <el-row>
+            <el-col :span="12">
+              <div class="items">
+                <div class="label">所属网格：</div>
+                <div class="value">xxxx社区第一网格</div>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="items">
+                <div class="label">需求类型：</div>
+                <div class="value">公益事业类-社会困难群体生活帮扶</div>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="items">
+                <div class="label">上报类型：</div>
+                <div class="value">社区帮办</div>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="items">
+                <div class="label">上报人：</div>
+                <div class="value">张俊男</div>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="items">
+                <div class="label">上报人联系电话：</div>
+                <div class="value">182****8989</div>
+                <el-button class="tel-btn" icon="el-icon-phone" plain round size="small" type="primary">拨打</el-button>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="items">
+                <div class="label">上报时间：</div>
+                <div class="value">2023-08-22 15:20:20</div>
+              </div>
+            </el-col>
+          </el-row>
+          <div class="hr"></div>
+          <el-row>
+            <el-col :span="12">
+              <div class="items">
+                <div class="label">需求人：</div>
+                <div class="value">李兵</div>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="items">
+                <div class="label">需求人联系电话：</div>
+                <div class="value">133****5656</div>
+                <el-button class="tel-btn" icon="el-icon-phone" plain round size="small" type="primary">拨打</el-button>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="items">
+                <div class="label">服务时间：</div>
+                <div class="value">2023-08-23 14:20:30</div>
+              </div>
+            </el-col>
+            <el-col :span="24">
+              <div class="items">
+                <div class="label">需求内容：</div>
+                <div class="value">
+                  一直失业在家，没有生活来源，生活比较困难。希望社区能给与帮助，找一份稳定的工作维持生活开销。
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+          <div class="hr"></div>
+          <el-row>
+            <el-col :span="12">
+              <div class="items">
+                <div class="label">服务方：</div>
+                <div class="value">志愿者-王佳俊</div>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="items">
+                <div class="label">服务方联系电话：</div>
+                <div class="value">156****5656</div>
+                <el-button class="tel-btn" icon="el-icon-phone" plain round size="small" type="primary">拨打</el-button>
+              </div>
+            </el-col>
+          </el-row>
+
+          <div class="btn-group">
+            <el-button class="green" plain round type="success" @click="handleDispatch">资源调度</el-button>
+            <el-button class="orange" plain round type="warning">催办督办</el-button>
+          </div>
+
+        </div>
+      </div>
+    </el-dialog>
+    <ResourceScheduling ref="ResourceScheduling"/>
+  </div>
+</template>
+
+<script>
+import Title from "@/views/dataBoard/satisfactionEval/components/Title";
+import ResourceScheduling from "@/views/dataBoard/overview/components/ResourceScheduling.vue";
+
+export default {
+  name: "ServiceDetails",
+  components: {Title, ResourceScheduling},
+  data() {
+    return {
+      dialogVisible: false,
+    };
+  },
+  methods: {
+    handleClose(done) {
+      this.dialogVisible = false;
+    },
+    open(id) {
+      this.dialogVisible = true;
+      this.getDetail(id);
+    },
+    getDetail(id) {
+
+    },
+    handleDispatch() {
+      this.$refs.ResourceScheduling.open()
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/dataBoard/dialog.scss";
+
+.contents {
+  padding: 40px 50px;
+
+  .items {
+    font-size: 14px;
+    position: relative;
+    display: flex;
+    margin-bottom: 17px;
+
+    .label {
+      color: #9CB4D3;
+    }
+
+    .value {
+      color: #FFFFFF;
+    }
+  }
+}
+
+.hr {
+  height: 1px;
+  margin: 25px 0;
+  opacity: .4;
+  border-bottom: 1px #0E79D6 dashed;
+}
+
+.tel-btn {
+  margin-top: -10px;
+  margin-left: 10px;
+  color: #06ebff;
+  border: 1px solid #06ebff;
+  border-radius: 18px;
+  background: rgba(#06ebff, 0.3);
+}
+
+.btn-group {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+
+  .green {
+    color: #00CD96;
+    border: 1px solid #00CD96;
+    border-radius: 18px;
+    background: rgba(39, 189, 127, 0.3);
+  }
+
+  .el-button {
+    margin: 0 20px;
+  }
+
+  .orange {
+    color: #FD8904;
+    border: 1px solid #FD8904;
+    border-radius: 18px;
+    background: rgba(253, 137, 4, 0.3);
+  }
+}
+</style>

src/views/dataBoard/overview/components/map-top.vue

@@ -1,20 +1,19 @@
 <template>
-  <div :class="['m-per', { 'm-l77': level != 'street' }]">
+  <div class="m-per m-l77">
     <el-autocomplete v-model="keyWord" :fetch-suggestions="querySearch" :placeholder="searchPlaceholder"
-      class="input-with-select" popper-class="selectPopClass" :value-key="'value'">
+                     :value-key="'value'" class="input-with-select inset" popper-class="selectPopClass">
-      <el-select v-model="searchSelect" slot="prepend" placeholder="请选择" popper-class="selectPopClass"
+      <el-select slot="prepend" v-model="searchSelect" placeholder="请选择" popper-class="selectPopClass">
-        >
         <el-option label="需求" value="1"></el-option>
         <el-option label="问题" value="2"></el-option>
         <el-option label="资源" value="3"></el-option>
         <el-option label="不满意事项" value="4"></el-option>
       </el-select>
-      <el-button slot="append" type="primary">搜索</el-button>
+      <el-button slot="append" type="primary" @click="search">搜索</el-button>
     </el-autocomplete>
   </div>
 </template>
 <script>
-import { requestGet } from "@/js/dai/request";
+import {requestGet} from "@/js/dai/request";
 
 export default {
   name: "map-top",
@@ -78,25 +77,39 @@ export default {
           pageNo: 1
         }
         console.log(this.searchUrl);
-        const { data } = await requestGet(this.searchUrl, params);
+        const {data} = await requestGet(this.searchUrl, params);
-        const suggestions = data.map(item => ({ label: item.id, value: item.content }));
+        const suggestions = data.map(item => ({label: item.id, value: item.content}));
         console.log(suggestions);
         cb(suggestions)
       } catch (error) {
         console.error('Error fetching suggestions:', error);
       }
     },
+    async search() {
+      try {
+        let params = {
+          keyword: this.keyWord,
+          pageSize: 20,
+          pageNo: 1
+        }
+        console.log(this.searchUrl);
+        const {data} = await requestGet(this.searchUrl, params);
+        console.log(data, 'data');
+      } catch (error) {
+        console.error('Error fetching suggestions:', error);
+      }
+    },
     getData(item) {
       this.$http
-        .get(
+          .get(
-          "/actual/base/streetOverview/mapOrgSum?level=" +
+              "/actual/base/streetOverview/mapOrgSum?level=" +
-          item.orgLevel +
+              item.orgLevel +
-          "&orgId=" +
+              "&orgId=" +
-          item.orgId
+              item.orgId
-        )
+          )
-        .then(({ data: { data } }) => {
+          .then(({data: {data}}) => {
-          this.numData = data;
+            this.numData = data;
-        });
+          });
     },
   },
   computed: {
@@ -132,46 +145,64 @@ export default {
 };
 </script>
 
-<style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped></style>
+<style lang="scss" scoped src="@/assets/scss/dataBoard/overview/index.scss"></style>
 <style lang="scss" scoped>
 .m-l77 {
   margin-left: 77px;
 }
 
+.inset {
+  overflow: hidden;
+  border-radius: 4px;
+  box-shadow: inset 0px 0px 13px 8px #007FF1;
+}
+
 ::v-deep .el-autocomplete {
   width: 100%;
 }
 
 ::v-deep .el-input {
   .el-input-group__prepend {
-    background: #001c44;
+    font-size: 14px;
+    font-weight: 400;
+    position: relative;
+    width: 120px;
+    color: #FFFFFF;
     border: 1px solid #007ff1;
     border-right: none;
-    position: relative;
+    background: rgba(0, 22, 56, 0.6);
-    width: 131px;
 
     &::after {
-      content: "";
       position: absolute;
-      top: 50%;
+      top: calc(50% - 12px);
       right: 0;
-      height: 15px;
-      background-color: #007ff1;
       width: 1px;
-      transform: translateY(-7px);
+      height: 24px;
+      content: "";
+      border: 1px solid #09518F;
+      background: #1A95FF;
     }
   }
 
   .el-input__inner {
-    background: #001c44;
+    height: 46px;
+    color: #fff;
     border: 1px solid #007ff1;
-    border-left: none;
     border-right: none;
+    border-left: none;
+    background: rgba(0, 22, 56, 0.6);
   }
 
   .el-input-group__append {
-    background: #0058ac;
+    font-size: 16px;
+    font-weight: 400;
+    color: #FFFFFF;
     border: 1px solid #007ff1;
+    background: rgba(0, 127, 241, 0.6);
   }
 }
+
+.m-per {
+  margin-right: 77px;
+}
 </style>

src/views/dataBoard/overview/components/wtqd.vue

@@ -1,100 +1,104 @@
 <template>
   <div class="m-wtqd">
-    <title-small text="难点赌点" />
+    <title-small text="难点赌点"/>
-    <div class="t-list f-hflex" v-if="nddd.length>0" >
+    <div v-if="nddd.length>0" class="t-list f-hflex">
-      <swiper ref="orderSwiper" :options="swiperOptions" >
+      <swiper ref="orderSwiper" :options="swiperOptions">
         <swiper-slide
-          v-for="(items, index) in nddd"
+            v-for="(items, index) in nddd"
-          :key="index"
+            :key="index"
-          class="swiper-slide"
+            class="swiper-slide"
         >
           <div
-            :class="['item', 'f-flex']"
+              v-for="(item, index) in items"
-            v-for="(item, index) in items"
+              :key="index"
-            :key="index"
+              :class="['item', 'f-flex']"
-            @click="handleView(item)"
+              @click="handleView(item)"
           >
-            <span>{{ item.createdTime.substr(5,5) }}</span>
+            <span>{{ item.createdTime.substr(5, 5) }}</span>
             <span>{{ item.eventContent }}</span>
           </div>
         </swiper-slide>
       </swiper>
     </div>
-    <div class="no-data h200" v-loading="listLoading"   element-loading-text="加载中"
+    <div v-else v-loading="listLoading" class="no-data h200"
-          element-loading-spinner="el-icon-loading"
+         element-loading-background="rgba(0, 21, 64, 0"
-          element-loading-background="rgba(0, 21, 64, 0" v-else>暂无数据</div>
+         element-loading-spinner="el-icon-loading" element-loading-text="加载中">暂无数据
+    </div>
 
-    <title-small text="矛盾纠纷" />
+    <title-small text="矛盾纠纷"/>
-    <div class="t-list f-hflex" v-if="mdjf.length>0">
+    <div v-if="mdjf.length>0" class="t-list f-hflex">
-      <swiper ref="orderSwiper" :options="swiperOptions" >
+      <swiper ref="orderSwiper" :options="swiperOptions">
         <swiper-slide
-          v-for="(items, index) in mdjf"
+            v-for="(items, index) in mdjf"
-          :key="index"
+            :key="index"
-          class="swiper-slide"
+            class="swiper-slide"
         >
           <div
-            class="item f-flex bto-border"
+              v-for="(item, index) in items"
-            v-for="(item, index) in items"
+              :key="index"
-            :key="index"
+              class="item f-flex bto-border"
           >
-            <span>{{ item.createdTime.substr(5,5) }}</span>
+            <span>{{ item.createdTime.substr(5, 5) }}</span>
             <span>{{ item.eventContent }}</span>
           </div>
         </swiper-slide>
       </swiper>
     </div>
-    <div class="no-data h200" v-else v-loading="listLoading"   element-loading-text="加载中"
+    <div v-else v-loading="listLoading" class="no-data h200" element-loading-background="rgba(0, 21, 64, 0"
-          element-loading-spinner="el-icon-loading"
+         element-loading-spinner="el-icon-loading"
-          element-loading-background="rgba(0, 21, 64, 0">暂无数据</div>
+         element-loading-text="加载中">暂无数据
-    <title-small text="自身问题" />
+    </div>
-    <div class="t-list f-hflex" v-if="zswt.length>0">
+    <title-small text="自身问题"/>
-      <swiper ref="orderSwiper" class="swiper-containers" :options="swiperOptions" >
+    <div v-if="zswt.length>0" class="t-list f-hflex">
+      <swiper ref="orderSwiper" :options="swiperOptions" class="swiper-containers">
         <swiper-slide
-          v-for="(items, index) in zswt"
+            v-for="(items, index) in zswt"
-          :key="index"
+            :key="index"
-          class="swiper-slide"
+            class="swiper-slide"
         >
           <div
-            :class="['item', 'f-flex']"
+              v-for="(item, index) in items"
-            v-for="(item, index) in items"
+              :key="index"
-            :key="index"
+              :class="['item', 'f-flex']"
           >
-            <span>{{ item.createdTime.substr(5,5) }}</span>
+            <span>{{ item.createdTime.substr(5, 5) }}</span>
             <span>{{ item.eventContent }}</span>
           </div>
         </swiper-slide>
       </swiper>
     </div>
-    <div class="no-data h150" v-else v-loading="listLoading"   element-loading-text="加载中"
+    <div v-else v-loading="listLoading" class="no-data h150" element-loading-background="rgba(0, 21, 64, 0"
-          element-loading-spinner="el-icon-loading"
+         element-loading-spinner="el-icon-loading"
-          element-loading-background="rgba(0, 21, 64, 0">暂无数据</div>
+         element-loading-text="加载中">暂无数据
-    <title-small text="超出服务范围" />
+    </div>
-    <div class="t-list f-hflex" v-if="ccfwfw.length>0">
+    <title-small text="超出服务范围"/>
-      <swiper ref="orderSwiper" class="swiper-containers" :options="swiperOptions" >
+    <div v-if="ccfwfw.length>0" class="t-list f-hflex">
+      <swiper ref="orderSwiper" :options="swiperOptions" class="swiper-containers">
         <swiper-slide
-          v-for="(items, index) in ccfwfw"
+            v-for="(items, index) in ccfwfw"
-          :key="index"
-          class="swiper-slide"
-        >
-          <div 
-            class="item f-flex bto-border"
-            v-for="(item, index) in items"
             :key="index"
+            class="swiper-slide"
+        >
+          <div
+              v-for="(item, index) in items"
+              :key="index"
+              class="item f-flex bto-border"
           >
-            <span>{{ item.createdTime.substr(5,5) }}</span>
+            <span>{{ item.createdTime.substr(5, 5) }}</span>
             <span>{{ item.eventContent }}</span>
           </div>
         </swiper-slide>
       </swiper>
     </div>
-    <div class="no-data h150" v-else v-loading="listLoading"   element-loading-text="加载中"
+    <div v-else v-loading="listLoading" class="no-data h150" element-loading-background="rgba(0, 21, 64, 0"
-          element-loading-spinner="el-icon-loading"
+         element-loading-spinner="el-icon-loading"
-          element-loading-background="rgba(0, 21, 64, 0">暂无数据</div>
+         element-loading-text="加载中">暂无数据
-    <title-small text="不满意问题数" />
+    </div>
+    <title-small text="不满意问题数"/>
     <div class="f-flex white f-mean">
       <div
-        class="f-hflex"
+          class="f-hflex"
-        @click="
+          @click="
           $router.push(
             '/dataBoard/satisfactionEval/potentialPeople?type=shuji&countType=service&satisfactionSource=satisfaction_12345'
           )
@@ -104,8 +108,8 @@
         <div class="f-darkGray"><b class="f-font34 f-yellow">0</b>人</div>
       </div>
       <div
-        class="f-hflex"
+          class="f-hflex"
-        @click="
+          @click="
           $router.push(
             '/dataBoard/satisfactionEval/potentialPeople?type=shuji&countType=service&satisfactionSource=satisfaction_province'
           )
@@ -115,8 +119,8 @@
         <div class="f-darkGray"><b class="f-font34 f-green">0</b>人</div>
       </div>
       <div
-        class="f-hflex"
+          class="f-hflex"
-        @click="
+          @click="
           $router.push(
             '/dataBoard/satisfactionEval/potentialPeople?type=shuji&countType=service&satisfactionSource=satisfaction_community'
           )
@@ -126,15 +130,15 @@
         <div class="f-darkGray"><b class="f-font34 f-skyBlue">0</b>人</div>
       </div>
     </div>
-    <EventDetails :showDialog="showDialog" :id="this.rowId" @close="close" />
+    <EventDetails :id="this.rowId" :showDialog="showDialog" @close="close"/>
 
   </div>
 </template>
-  <script>
+<script>
 import titleSmall from "@/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue";
 import "swiper/dist/css/swiper.css";
-import { swiper, swiperSlide } from "vue-awesome-swiper";
+import {swiper, swiperSlide} from "vue-awesome-swiper";
-import { requestPost } from "@/js/dai/request";
+import {requestPost} from "@/js/dai/request";
 import EventDetails from "@/views/dataBoard/cpts/event-details.vue";
 
 export default {
@@ -159,8 +163,7 @@ export default {
       endTime: "",
       startTime: "",
 
-      tableData: [
+      tableData: [],
-      ],
       createdTime: '2022-05-20 10:50:58',
       //   就是现在是每4条滚动一次我想要它一直滚动
       swiperOptions: {
@@ -173,15 +176,15 @@ export default {
         speed: 1000, // 滑动速度，单位是毫秒
       },
 
-      nddd:[],
+      nddd: [],
-      mdjf:[],
+      mdjf: [],
-      zswt:[],
+      zswt: [],
-      ccfwfw:[],
+      ccfwfw: [],
 
-      listLoading:true,
+      listLoading: true,
 
-      showDialog:false,
+      showDialog: false,
-      rowId:''
+      rowId: ''
     };
   },
   watch: {
@@ -205,27 +208,27 @@ export default {
   },
   //
   methods: {
-    getReport({ orgId, orgLevel }) {
+    getReport({orgId, orgLevel}) {
       this.$http
-        .get(
+          .get(
-          "/actual/base/streetOverview/communityOverview?orgId=" +
+              "/actual/base/streetOverview/communityOverview?orgId=" +
-            orgId +
+              orgId +
-            "&level=" +
+              "&level=" +
-            orgLevel
+              orgLevel
-        )
+          )
-        .then(({ data: { data } }) => {
+          .then(({data: {data}}) => {
-          this.overview = data;
+            this.overview = data;
-        });
+          });
       this.$http
-        .get(
+          .get(
-          "/actual/base/streetOverview/summaryReport?orgId=" +
+              "/actual/base/streetOverview/summaryReport?orgId=" +
-            orgId +
+              orgId +
-            "&level=" +
+              "&level=" +
-            orgLevel
+              orgLevel
-        )
+          )
-        .then(({ data: { data } }) => {
+          .then(({data: {data}}) => {
-          this.report = data;
+            this.report = data;
-        });
+          });
     },
     async fetchData() {
       const results = [];
@@ -246,9 +249,9 @@ export default {
             status: "",
             firstIdList: [],
             secondIdList: [],
-            type: `${i+1}`,
+            type: `${i + 1}`,
           };
-          const response = await requestPost(url,params); // 替换为实际的接口调用
+          const response = await requestPost(url, params); // 替换为实际的接口调用
           results.push(response.data);
         } catch (error) {
           console.error("Error fetching data:", error);
@@ -263,10 +266,10 @@ export default {
       this.listLoading = true
       const apiResults = await this.fetchData();
       this.listLoading = false
-        this.nddd =this.groupList(apiResults[0].list,4);
+      this.nddd = this.groupList(apiResults[0].list, 4);
-        this.mdjf =this.groupList(apiResults[1].list,4);
+      this.mdjf = this.groupList(apiResults[1].list, 4);
-        this.zswt =this.groupList(apiResults[2].list,3);
+      this.zswt = this.groupList(apiResults[2].list, 3);
-        this.ccfwfw =this.groupList(apiResults[3].list,3);
+      this.ccfwfw = this.groupList(apiResults[3].list, 3);
     },
     groupList(array, subGroupLength) {
       let index = 0;
@@ -276,8 +279,9 @@ export default {
       }
       return newArray;
     },
-    getData() {},
+    getData() {
-    handleView({ icEventId }) {
+    },
+    handleView({icEventId}) {
       this.showDialog = true;
       this.rowId = icEventId;
     },
@@ -287,90 +291,107 @@ export default {
   },
 };
 </script>
-  
+
-  <style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped />
+<style lang="scss" scoped src="@/assets/scss/dataBoard/overview/index.scss"/>
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
-  .h150{
+.h150 {
-    height: 150px;
+  height: 150px;
-  }
+}
-  .h200{
+
-    height: 200px;
+.h200 {
-  }
+  height: 200px;
+}
 
 /deep/ .el-input__inner {
   width: 90px !important;
   height: 24px !important;
-  background: #021c49 !important;
+  color: #a0cdff;
   border: 1px solid #125aaa !important;
   border-radius: 12px !important;
-  color: #a0cdff;
+  background: #021c49 !important;
 }
 
 /deep/ .el-input__icon {
   line-height: 24px !important;
   color: #a0cdff;
 }
+
 .f-hflex {
   width: 83px;
 }
+
 .f-flex {
   margin-top: 4px;
 }
+
 .f-darkGray {
   margin-top: 15px;
 }
-.no-data{
-  display: flex;
-    align-items: center;
-    justify-content: center;
 
+.no-data {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: .6;
+  color: #fff;
 }
+
 .t-list {
+  position: relative;
   flex: 1;
   width: 100%;
-  position: relative;
+
   .swiper-container {
-    height: 200px;
     width: 100%;
+    height: 200px;
   }
-  .swiper-containers{
+
-    height: 150px;
+  .swiper-containers {
     width: 100%;
-  } 
+    height: 150px;
+  }
+
   .item {
     align-items: center;
-    height: 40px;
     justify-content: space-around;
-    background: #0a2a5c;
+    height: 40px;
-    color: #fff;
     cursor: pointer;
+    color: #fff;
+    background: #0a2a5c;
+
     span {
       text-align: center;
     }
+
     > :nth-child(1) {
       width: 50px;
     }
+
     > :nth-child(2) {
+      overflow: hidden;
       flex: 1;
       white-space: nowrap;
-      overflow: hidden;
       text-overflow: ellipsis;
     }
+
     &:hover {
       color: #02fcff;
       box-shadow: 0 0 10px #38b2ff, 0 0 5px #38b2ff;
     }
   }
 }
+
 .swiper-slide {
   padding: 0 4px;
-  .bto-border{
+
+  .bto-border {
     height: 1px;
     border-bottom: 1px solid;
-    border-image: linear-gradient(to right, #1c3e69 0%, #4eafd5 50%,  #1c3e69 100%);
+    border-image: linear-gradient(to right, #1c3e69 0%, #4eafd5 50%, #1c3e69 100%);
     border-image-slice: 1;
   }
 }
+
 .white {
   height: 100px;
 }

src/views/dataBoard/overview/index.vue

@@ -8,8 +8,13 @@
     <div class="g-row">
       <div class="g-left">
         <div class="m-box">
-          <title-box :text="`${currentLevel === 'district' ? '区' : currentLevel === 'street' ? '街道' : currentLevel === 'community' ? '社区' : currentLevel === 'grid' ? '网格' : ''}介绍`" />
+          <title-box
-          <jdjs :currentLevelData="currentLevelData" />
+              :text="`${currentLevel === 'district' ? '区' : currentLevel === 'street' ? '街道' : currentLevel === 'community' ? '社区' : currentLevel === 'grid' ? '网格' : ''}介绍`"/>
+          <jdjs :currentLevelData="currentLevelData"/>
+        </div>
+        <div class="m-box">
+          <title-box text="需求清单"/>
+          <RequirementList :currentLevelData="currentLevelData"/>
         </div>
         <!-- <div class="m-box">
           <title-box :text="`${currentLevel === 'district' ? '区' : currentLevel === 'street' ? '街道' : currentLevel === 'community' ? '社区' : currentLevel === 'grid' ? '网格' : ''}图谱画像`" />
@@ -18,11 +23,13 @@
       </div>
       <div class="g-center">
         <div :class="listShow ? 'm-map' : 'g-center-open'" style="overflow: hidden">
-          <map-top :currentLevelData="currentLevelData" :peopleType="peopleType" @changeType="changeType" :level="currentLevel" />
+          <map-top :currentLevelData="currentLevelData" :level="currentLevel" :peopleType="peopleType"
+                   @changeType="changeType"/>
           <div v-if="breadList.length > 1" class="go-back" @click="goBackMap">
-            <img src="~@/assets/images/shuju/overview/go-back.png" />
+            <img src="~@/assets/images/shuju/overview/go-back.png"/>
           </div>
-          <grid-map ref="map" @clickAgency="clickAgencyItem" :srcGridData="orgData" @clickDotBtn="handleClickDotBtn" :level="currentLevel" :peopleType="peopleType" />
+          <grid-map ref="map" :level="currentLevel" :peopleType="peopleType" :srcGridData="orgData"
+                    @clickAgency="clickAgencyItem" @clickDotBtn="handleClickDotBtn"/>
         </div>
         <!-- <div class="m-box m-rybox">
           <title-box :text="`${customerName}${peopleList[peopleType]}`">
@@ -39,9 +46,9 @@
 
       <div class="g-right">
 
-        <div  class="m-box">
+        <div class="m-box">
           <title-box text="问题清单"></title-box>
-          <wtqd :currentLevelData="currentLevelData" :date="sjhfDate" v-if="eventType === 1" />
+          <wtqd v-if="eventType === 1" :currentLevelData="currentLevelData" :date="sjhfDate"/>
         </div>
 
         <!-- <div class="m-box">
@@ -92,7 +99,7 @@
           <EventAndFollowUp :currentLevelData="currentLevelData" :date="sjhfDate" v-if="eventType === 1" />
           <FollowUp :currentLevelData="currentLevelData" :date="sjhfDate" v-if="eventType === 2" />
         </div> -->
-        
+
         <!-- 网格 -->
         <!-- <div v-if="currentLevel === 'grid'" class="m-box">
           <title-box text="社区网格数据更新排行">
@@ -105,12 +112,12 @@
       </div>
     </div>
 
-    <cpt-loading v-show="false" />
+    <cpt-loading v-show="false"/>
   </div>
 </template>
 
 <script>
-import gridMap from "@/views/dataBoard/cpts/map/index";
+import gridMap from "@/views/dataBoard/cpts/sjkb-map/index";
 import cptBread from "@/views/dataBoard/renfang/cpts/bread";
 import cptLoading from "@/views/dataBoard/cpts/loading";
 import titleBox from "@/views/dataBoard/satisfactionEval/components/Title";
@@ -121,6 +128,7 @@ import jdwgy from "@/views/dataBoard/overview/components/jdwgy.vue";
 import rfsjtj from "@/views/dataBoard/overview/components/rfsjtj.vue";
 import sqrfph from "@/views/dataBoard/overview/components/sqrfph.vue";
 import sq12345 from "@/views/dataBoard/overview/components/sq12345.vue";
+import RequirementList from "@/views/dataBoard/overview/components/RequirementList.vue";
 
 import DynamicHumanRoomData from "@/views/dataBoard/overview/components/DynamicHumanRoomData.vue";
 import GridUpdateRanking from "@/views/dataBoard/overview/components/GridUpdateRanking.vue";
@@ -132,9 +140,9 @@ import RankingGridData from "@/views/dataBoard/overview/components/RankingGridDa
 import FollowUp from "@/views/dataBoard/overview/components/FollowUp.vue";
 import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue";
 
-import { requestPostBi } from "@/js/dai/request-bipass";
+import {requestPostBi} from "@/js/dai/request-bipass";
-import { requestPost } from "@/js/dai/request";
+import {requestPost} from "@/js/dai/request";
-import { spliceIntoChunks } from "@/utils/index";
+import {spliceIntoChunks} from "@/utils/index";
 
 export default {
   name: "renfang",
@@ -158,7 +166,8 @@ export default {
     GridUpdateRanking,
     FollowUp,
     Tabs,
-    wtqd
+    wtqd,
+    RequirementList
   },
 
   data() {
@@ -178,7 +187,7 @@ export default {
       currentLevelData: {
         orgId: this.$store.state.chooseArea.chooseName.orgId,
         orgLevel: this.$store.state.chooseArea.chooseName.level,
-        meta: { title: "人房总览" },
+        meta: {title: "人房总览"},
       },
       breadList: [
         {
@@ -186,7 +195,7 @@ export default {
           orgLevel: "",
           id: "",
           level: "",
-          meta: { title: "人房总览" },
+          meta: {title: "人房总览"},
         },
       ],
       peopleList: {
@@ -290,7 +299,7 @@ export default {
       }
     },
 
-    clickBreadItem({ item }) {
+    clickBreadItem({item}) {
       this.toBread(item);
     },
 
@@ -316,7 +325,7 @@ export default {
       this.toBread({
         orgId: item.id,
         orgLevel: item.level,
-        meta: { title: item.name },
+        meta: {title: item.name},
         name: item.name,
         parentName: item.parentName,
       });
@@ -326,13 +335,13 @@ export default {
       this.clickAgencyItem(item);
     },
     toBread(item) {
-      const { orgId } = item;
+      const {orgId} = item;
-      const { breadList } = this;
+      const {breadList} = this;
       let index = breadList.findIndex((val) => val.orgId === orgId);
       if (index >= 0) {
         this.breadList = breadList.slice(0, index + 1);
       } else {
-        breadList.push({ ...item, id: item.orgId, level: item.orgLevel });
+        breadList.push({...item, id: item.orgId, level: item.orgLevel});
         this.breadList = breadList;
       }
       this.getMapData(item.orgId, item.orgLevel);
@@ -363,7 +372,7 @@ export default {
       const Hyp = Math.sqrt(X * X + Y * Y)
       const Lat = Math.atan2(Z, Hyp)
 
-      return { lng: Lon * 180 / Math.PI, lat: Lat * 180 / Math.PI }
+      return {lng: Lon * 180 / Math.PI, lat: Lat * 180 / Math.PI}
     },
     // 点击搜索结果条目，在地图上显示点和详情弹窗
     handleClickSearchItem(item) {
@@ -378,7 +387,7 @@ export default {
       let org = this.orgData.children;
       org.forEach((item) => {
         data.forEach((item2) => {
-          let coordinates = spliceIntoChunks(item.coordinates.split(",").map((item) => parseFloat(item)),2)
+          let coordinates = spliceIntoChunks(item.coordinates.split(",").map((item) => parseFloat(item)), 2)
           let coordinates2 = coordinates.map(item3 => {
             return [{
               lat: item3[1],
@@ -414,7 +423,7 @@ export default {
     //获取地图上显示的组织数据
     async getMapData(orgId = this.$store.state.chooseArea.chooseName.orgId, level = this.$store.state.chooseArea.chooseName.level) {
       const url = "org_map";
-      this.$http.post(`/gov/org/agency/maporg`, { orgId, level }).then(({ data: { data } }) => {
+      this.$http.post(`/gov/org/agency/maporg`, {orgId, level}).then(({data: {data}}) => {
         this.orgData = data;
         this.orgId = this.orgData.id;
         this.orgLevel = this.orgData.level;
@@ -431,20 +440,20 @@ export default {
     async getSubMapData() {
       const url = "sub_org_map";
 
-      const { data, code, msg } = await requestPostBi(
+      const {data, code, msg} = await requestPostBi(
-        url,
+          url,
-        {
+          {
-          queryParam: {
+            queryParam: {
-            org_id: this.orgId,
+              org_id: this.orgId,
+            },
           },
-        },
+          {
-        {
+            // mockId: 61831860,
-          // mockId: 61831860,
+          }
-        }
       );
 
       if (code === 0) {
-        const { orgData } = this;
+        const {orgData} = this;
         orgData.children = data.map((item) => {
           return {
             ...item,
@@ -455,7 +464,7 @@ export default {
             coordinates: item.coordinates || "",
           };
         });
-        this.orgData = { ...orgData };
+        this.orgData = {...orgData};
       } else {
         this.$message.error(msg);
       }
@@ -469,7 +478,7 @@ export default {
         level: this.orgLevel,
       };
 
-      const { data, code, msg } = await requestPost(url, params);
+      const {data, code, msg} = await requestPost(url, params);
       if (code === 0) {
         this.orgData = data;
         this.orgId = this.orgId;
@@ -485,12 +494,15 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.g-center {
+  width: 930px!important;
+}
 .up-style {
   width: 51%;
 
   img {
-    height: 12px;
     width: 12px;
+    height: 12px;
   }
 
   img:hover {
@@ -501,27 +513,33 @@ export default {
 .go-back {
   position: absolute;
   z-index: 100;
-  top: 20px;
+  top: 24px;
-  left: 16px;
   right: 0;
+  left: 16px;
   width: 64px;
+
   img {
-    height: 36px;
     width: 36px;
+    height: 36px;
   }
 
   img:hover {
     cursor: pointer;
   }
 }
+
 .date-current-weiyi {
   background: #000;
 }
 </style>
-<style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped></style>
+<style lang="scss" scoped src="@/assets/scss/dataBoard/overview/index.scss"></style>
 
 <style lang="scss" scoped>
 .tabs {
   padding: 10px 11px 0px;
 }
+
+.sjkb-map {
+  width: 930px;
+}
 </style>