feat: 政务大屏

src/router/client.js

@@ -7,7 +7,8 @@ export default [
   {
     path: '/serviceCenter',
     name: 'serviceCenter',
-    component: () => import('../view/client/serviceCenter/index'),
+    // component: () => import('../view/client/serviceCenter/index'),
+    component: () => import('../view/client/serviceCenter/new/index'),
   },
   {
     path: '/publicOverSight',

src/view/client/serviceCenter/new/AreaEvaluateInfo.vue

@@ -0,0 +1,138 @@
+<template>
+  <div id="areaEvaluateInfo">
+    <div id="areaEvaluateInfo-title">
+      <div class="title-container1">
+        <span style="color: #00b3ea">▋</span>&nbsp;&nbsp;&nbsp;&nbsp;
+        <div :class="font1 === 0 ? 'DistricHandle-title' : 'DistricHandle-title1'">
+          区域评价
+        </div>
+      </div>
+    </div>
+    <div :class="font1 === 0 ? 'content' : 'content1'">
+      <table style="width: 93%;  margin: 0 auto;color: #ffffff;height: 100%;" cellspacing="0">
+        <thead style="height: 20%;">
+          <tr style="color:#01baf4; height: 20%; max-height: 100px;background-color: rgb(0, 189, 247,0.149);"
+            v-if="data.length >= 0">
+            <th class="unit-td">序号</th>
+            <th class="unit-td">区县名称</th>
+            <th class="unit-td">好评数</th>
+            <th class="unit-td">差评数</th>
+            <th class="unit-td">评价总数</th>
+            <th class="unit-td">满意度</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, index) in data" :key="index">
+            <td class="unit-td">{{ index + 1 }}</td>
+            <td class="unit-td"> {{ item.districtName }}</td>
+            <td class="unit-td"> {{ item.positiveCount }}</td>
+            <td class="unit-td"> {{ item.negativeCount }}</td>
+            <td class="unit-td"> {{ item.evaluateCount }}</td>
+            <td class="unit-td"> {{ item.satisfactionRate }}%</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { AreaEvaluateInfo } from "./AreaEvaluateInfoApi";
+
+export default {
+  name: "AreaEvaluateInfo",
+  props: {
+    yearTime: String,
+    currentArea: Number
+  },
+  data() {
+    return {
+      font1: 0,
+      data: {},
+    }
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    // 变大
+    change(count) {
+      if (count % 2 === 0) {
+        this.font1 = 0;
+      } else {
+        this.font1 = 1;
+      }
+    },
+    // 获取数据
+    getData: function () {
+      const params = {
+        year: this.yearTime,
+        area: this.currentArea
+      };
+      AreaEvaluateInfo.getData(params).then(res => {
+        this.data = res.data.result;
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+#areaEvaluateInfo {
+  height: 100%;
+  width: 100%;
+}
+
+#areaEvaluateInfo-title {
+  height: 13%;
+  padding-top: 2%;
+  padding-left: 3%;
+}
+
+.title-container1 {
+  width: 97%;
+}
+
+.DistricHandle-title {
+  /*font-size: 17px;*/
+  font-weight: 500;
+  color: rgb(255, 255, 255);
+  line-height: 1;
+  text-align: left;
+  z-index: 49;
+  width: 87%;
+  display: inline-block;
+  /*padding-left: 5%;*/
+  padding-top: 8px;
+}
+
+.DistricHandle-title1 {
+  font-size: 22px;
+  font-weight: 500;
+  color: rgb(255, 255, 255);
+  line-height: 1;
+  text-align: left;
+  z-index: 49;
+  width: 87%;
+  display: inline-block;
+  /*padding-left: 5%;*/
+  padding-top: 8px;
+}
+
+.content {
+  width: 100%;
+  font-size: 12px;
+  height: 87%;
+}
+
+.content1 {
+  font-size: 18px;
+  width: 100%;
+  height: 79%;
+}
+
+.unit-td {
+  text-align: center;
+}
+</style>

src/view/client/serviceCenter/new/AreaEvaluateInfoApi.js

@@ -0,0 +1,7 @@
+import { server } from "../../../../tools/servers";
+
+export class AreaEvaluateInfo {
+  static getData(data = {}) {
+    return server.connection('POST', '/api/governmentService/getAreaEvaluateInfo', data)
+  }
+}

src/view/client/serviceCenter/new/AreaHandleInfo.vue

@@ -0,0 +1,166 @@
+<template>
+  <div id="areaHandleInfo">
+    <div id="areaHandleInfo-title">
+      <div class="title-container1">
+        <span style="color: #00b3ea">▋</span>&nbsp;&nbsp;&nbsp;&nbsp;
+        <div :class="font1 === 0 ? 'DistricHandle-title' : 'DistricHandle-title1'">
+          区域办件
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="row">
+        <div>
+          <div class="row-title">申请数</div>
+          <div class="row-content">{{ data.applyCount || 0 }}</div>
+        </div>
+        <div>
+          <div class="row-title">受理数</div>
+          <div class="row-content">{{ data.acceptCount || 0 }}</div>
+        </div>
+      </div>
+      <div class="row">
+        <div>
+          <div class="row-title">办结数</div>
+          <div class="row-content">{{ data.completeCount || 0 }}</div>
+        </div>
+        <div>
+          <div class="row-title">办结覆盖率</div>
+          <div class="row-content">{{ data.completeRate || 0 }}</div>
+        </div>
+      </div>
+      <div class="row">
+        <div>
+          <div class="row-title">网上受理率</div>
+          <div class="row-content">{{ data.networkApplyRate || 0 }}%</div>
+        </div>
+        <div>
+          <div class="row-title">按时办结率</div>
+          <div class="row-content">{{ data.completeOnTimeRate || 0 }}%</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { AreaHandleInfo } from "./AreaHandleInfoApi";
+export default {
+  props: {
+    yearTime: String,
+    currentArea: Number
+  },
+  data() {
+    return {
+      font1: 0,
+      data: {},
+    }
+  },
+  mounted() {
+    this.getData();
+  },
+  watch: {
+    currentArea: {
+      handler(newVal) {
+        // 当 currentArea 发生变化时，重新调用 getData 方法
+        this.getData();
+      },
+    },
+    yearTime: {
+      handler(newVal) {
+        // 当 currentArea 发生变化时，重新调用 getData 方法
+        this.getData();
+      },
+    }
+  },
+  methods: {
+    // 变大
+    change(count) {
+      if (count % 2 === 0) {
+        this.font1 = 0;
+      } else {
+        this.font1 = 1;
+      }
+    },
+    // 获取数据
+    getData: function () {
+      const params = {
+        year: this.yearTime,
+        area: this.currentArea
+      };
+      AreaHandleInfo.getData(params).then(res => {
+        this.data = res.data.result;
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+#areaHandleInfo {
+  height: 100%;
+  width: 100%;
+}
+
+#areaHandleInfo-title {
+  height: 13%;
+  padding-top: 2%;
+  padding-left: 3%;
+}
+
+.title-container1 {
+  width: 97%;
+}
+
+.DistricHandle-title {
+  /*font-size: 17px;*/
+  font-weight: 500;
+  color: rgb(255, 255, 255);
+  line-height: 1;
+  text-align: left;
+  z-index: 49;
+  width: 87%;
+  display: inline-block;
+  /*padding-left: 5%;*/
+  padding-top: 8px;
+}
+
+.DistricHandle-title1 {
+  font-size: 22px;
+  font-weight: 500;
+  color: rgb(255, 255, 255);
+  line-height: 1;
+  text-align: left;
+  z-index: 49;
+  width: 87%;
+  display: inline-block;
+  padding-top: 8px;
+}
+
+.container {
+  margin: 10% 0;
+  text-align: center;
+  display: flex;
+  flex-direction: row;
+}
+
+.row {
+  flex: 1;
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.row-title {
+  color: rgb(255, 255, 255);
+  line-height: 1;
+}
+
+.row-content {
+  color: rgb(0, 251, 255);
+  text-align: center;
+  padding-bottom: 10px;
+}
+</style>

src/view/client/serviceCenter/new/AreaHandleInfoApi.js

@@ -0,0 +1,7 @@
+import { server } from "../../../../tools/servers";
+
+export class AreaHandleInfo {
+  static getData(data = {}) {
+    return server.connection('POST', '/api/governmentService/getAreaHandleInfo', data)
+  }
+}

src/view/client/serviceCenter/new/CharacteristicThingInfo.vue

@@ -0,0 +1,162 @@
+<template>
+  <div id="characteristicThingInfo">
+    <div id="characteristicThingInfo-title">
+      <div class="title-container1">
+        <span style="color: #00b3ea">▋</span>&nbsp;&nbsp;&nbsp;&nbsp;
+        <div :class="font1 === 0 ? 'DistricHandle-title' : 'DistricHandle-title1'">
+          地方特色一件事
+        </div>
+      </div>
+    </div>
+    <div id="characteristicThingInfo-chart">
+    </div>
+  </div>
+</template>
+
+<script>
+import { CharacteristicThingInfo } from "./CharacteristicThingInfoApi";
+
+export default {
+  name: "CharacteristicThingInfo",
+  props: {
+    yearTime: String,
+    currentArea: Number
+  },
+  data() {
+    return {
+      data: {},
+      font1: 0
+    }
+  },
+  mounted() {
+    this.getData();
+  },
+  watch: {
+    currentArea: {
+      handler(newVal) {
+        // 当 currentArea 发生变化时，重新调用 getData 方法
+        this.getData();
+      },
+    },
+    yearTime: {
+      handler(newVal) {
+        // 当 currentArea 发生变化时，重新调用 getData 方法
+        this.getData();
+      },
+    }
+  },
+  methods: {
+    // 变大
+    change(count) {
+      if (count % 2 === 0) {
+        this.font1 = 0;
+      } else {
+        this.font1 = 1;
+      }
+    },
+    // 获取数据
+    getData: function () {
+      const params = {
+        year: this.yearTime,
+        area: this.currentArea
+      };
+      CharacteristicThingInfo.getData(params).then(res => {
+        this.data = res.data.result;
+        this.getChart();
+      })
+    },
+    getChart: function () {
+      this.myChart = this.$echarts.init(document.getElementById('characteristicThingInfo-chart'));
+      var option;
+      option = {
+        color: ['#1E90FF', '#7B68EE', '#0000FF'], // 全局颜色设置
+        legend: {
+          textStyle: {
+            color: 'white'
+          }
+        },
+        grid: {
+          left: '2%',
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        xAxis: {
+          type: "value",
+          boundaryGap: [0, 0.01],
+          axisLabel: {
+            color: 'white'
+          }
+        },
+        yAxis: {
+          type: "category",
+          data: this.data.xaxisData,
+          axisLabel: {
+            color: 'white',
+            interval: 0, // 强制显示所有标签
+            fontSize: 12, // 减小字体大小
+          }
+        },
+        series: Object.keys(this.data.yaxisData).map((key, index) => ({
+          data: this.data.yaxisData[key],
+          type: "bar",
+          name: key,
+        })),
+      };
+      this.myChart.resize();
+      this.myChart.setOption(option);
+    }
+  }
+}
+</script>
+
+<style scoped>
+#characteristicThingInfo {
+  height: 100%;
+  width: 100%;
+}
+
+#characteristicThingInfo-title {
+  height: 13%;
+  padding-top: 2%;
+  padding-left: 3%;
+}
+
+.title-container1 {
+  width: 97%;
+}
+
+.DistricHandle-title {
+  /*font-size: 17px;*/
+  font-weight: 500;
+  color: rgb(255, 255, 255);
+  line-height: 1;
+  text-align: left;
+  z-index: 49;
+  width: 87%;
+  display: inline-block;
+  /*padding-left: 5%;*/
+  padding-top: 8px;
+}
+
+.DistricHandle-title1 {
+  font-size: 22px;
+  font-weight: 500;
+  color: rgb(255, 255, 255);
+  line-height: 1;
+  text-align: left;
+  z-index: 49;
+  width: 87%;
+  display: inline-block;
+  padding-top: 8px;
+}
+
+#characteristicThingInfo-chart {
+  height: 87%;
+  width: 100%;
+}
+</style>

src/view/client/serviceCenter/new/CharacteristicThingInfoApi.js

@@ -0,0 +1,7 @@
+import { server } from "../../../../tools/servers";
+
+export class CharacteristicThingInfo {
+  static getData(data = {}) {
+    return server.connection('POST', '/api/governmentService/getCharacteristicThingInfo', data)
+  }
+}

src/view/client/serviceCenter/new/EfficientThingInfo.vue

@@ -0,0 +1,162 @@
+<template>
+  <div id="efficientThingInfo">
+    <div id="efficientThingInfo-title">
+      <div class="title-container1">
+        <span style="color: #00b3ea">▋</span>&nbsp;&nbsp;&nbsp;&nbsp;
+        <div :class="font1 === 0 ? 'DistricHandle-title' : 'DistricHandle-title1'">
+          高效办成一件事
+        </div>
+      </div>
+    </div>
+    <div id="efficientThingInfo-chart">
+    </div>
+  </div>
+</template>
+
+<script>
+import { EfficientThingInfo } from "./EfficientThingInfoApi";
+
+export default {
+  name: "EfficientThingInfo",
+  props: {
+    yearTime: String,
+    currentArea: Number,
+
+  },
+  data() {
+    return {
+      data: {},
+      font1: 0,
+      myChart: null,
+    }
+  },
+  mounted() {
+    this.getData();
+  },
+  watch: {
+    currentArea: {
+      handler(newVal) {
+        // 当 currentArea 发生变化时，重新调用 getData 方法
+        this.getData();
+      },
+    },
+    yearTime: {
+      handler(newVal) {
+        // 当 currentArea 发生变化时，重新调用 getData 方法
+        this.getData();
+      },
+    }
+  },
+  methods: {
+    // 变大
+    change(count) {
+      if (count % 2 === 0) {
+        this.font1 = 0;
+      } else {
+        this.font1 = 1;
+      }
+    },
+    // 获取数据
+    getData: function () {
+      const params = {
+        year: this.yearTime,
+        area: this.currentArea
+      };
+      EfficientThingInfo.getData(params).then(res => {
+        this.data = res.data.result;
+        this.getChart();
+      })
+    },
+    getChart: function () {
+      this.myChart = this.$echarts.init(document.getElementById('efficientThingInfo-chart'));
+      var option;
+      option = {
+        color: ['#1E90FF', '#7B68EE', '#0000FF'], // 全局颜色设置
+        legend: {
+          textStyle: {
+            color: 'white'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        xAxis: {
+          type: "category",
+          data: this.data.xaxisData,
+          axisLabel: {
+            color: 'white',
+            interval: 0, // 强制显示所有标签
+            formatter: function (value) {
+              return value.slice(0, 4) + '\n' + value.slice(4);
+            }
+          }
+        },
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            color: 'white'
+          }
+        },
+        series: Object.keys(this.data.yaxisData).map((key, index) => ({
+          data: this.data.yaxisData[key],
+          type: "bar",
+          name: key,
+        })),
+      };
+      this.myChart.resize();
+      this.myChart.setOption(option);
+    }
+  }
+}
+</script>
+
+<style scoped>
+#efficientThingInfo {
+  height: 100%;
+  width: 100%;
+}
+
+#efficientThingInfo-title {
+  height: 13%;
+  padding-top: 2%;
+  padding-left: 3%;
+}
+
+.title-container1 {
+  width: 97%;
+}
+
+.DistricHandle-title {
+  /*font-size: 17px;*/
+  font-weight: 500;
+  color: rgb(255, 255, 255);
+  line-height: 1;
+  text-align: left;
+  z-index: 49;
+  width: 87%;
+  display: inline-block;
+  /*padding-left: 5%;*/
+  padding-top: 8px;
+}
+
+.DistricHandle-title1 {
+  font-size: 22px;
+  font-weight: 500;
+  color: rgb(255, 255, 255);
+  line-height: 1;
+  text-align: left;
+  z-index: 49;
+  width: 87%;
+  display: inline-block;
+  /*padding-left: 5%;*/
+  padding-top: 8px;
+}
+
+#efficientThingInfo-chart {
+  height: 87%;
+  width: 100%;
+}
+</style>

src/view/client/serviceCenter/new/EfficientThingInfoApi.js

@@ -0,0 +1,7 @@
+import { server } from "../../../../tools/servers";
+
+export class EfficientThingInfo {
+  static getData(data = {}) {
+    return server.connection('POST', '/api/governmentService/getEfficientThingInfo', data)
+  }
+}

src/view/client/serviceCenter/new/ElectronicCertificateInfo.vue

@@ -0,0 +1,169 @@
+<template>
+  <div id="electronicCertificateInfo">
+    <div id="electronicCertificateInfo-title">
+      <div class="title-container1">
+        <span style="color: #00b3ea">▋</span>&nbsp;&nbsp;&nbsp;&nbsp;
+        <div :class="font1 === 0 ? 'DistricHandle-title' : 'DistricHandle-title1'">
+          电子证照
+        </div>
+      </div>
+    </div>
+    <div id="electronicCertificateInfo-chart">
+    </div>
+  </div>
+</template>
+
+<script>
+import { ElectronicCertificateInfo } from "./ElectronicCertificateInfoApi";
+export default {
+  name: "ElectronicCertificateInfo",
+  props: {
+    yearTime: String,
+    currentArea: Number
+  },
+  data() {
+    return {
+      font1: 0,
+      data: {},
+    }
+  },
+  mounted() {
+    this.getData();
+  },
+  watch: {
+    currentArea: {
+      handler(newVal) {
+        // 当 currentArea 发生变化时，重新调用 getData 方法
+        this.getData();
+      },
+    },
+    yearTime: {
+      handler(newVal) {
+        // 当 currentArea 发生变化时，重新调用 getData 方法
+        this.getData();
+      },
+    }
+  },
+  methods: {
+    getData() {
+      const params = {
+        year: this.yearTime,
+        area: this.currentArea
+      };
+      ElectronicCertificateInfo.getData(params).then((res) => {
+        this.data = res.data.result;
+        this.getChart();
+      })
+    },
+    getChart: function () {
+      this.myChart = this.$echarts.init(document.getElementById('electronicCertificateInfo-chart'));
+      var option;
+      option = {
+        legend: {
+          textStyle: {
+            color: 'white'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        xAxis: {
+          type: "category",
+          data: this.data.xaxisData,
+          //   axisTick: { show: false }, // 去掉 x 轴的刻度线
+          axisLine: { lineStyle: { color: "white" } }, // 设置 x 轴线的颜色为白色
+          splitLine: { show: false }, // 去掉 x 轴的网格线
+          axisLabel: {
+            interval: 0, // 强制显示所有标签
+            formatter: function (value) {
+              return value.slice(0, 4) + '\n' + value.slice(4);
+            }
+          }
+        },
+        yAxis: {
+          type: "value",
+          axisTick: { show: false }, // 去掉 y 轴的刻度线
+          axisLine: { lineStyle: { color: "white" } },
+          splitLine: { show: false }, // 去掉 y 轴的网格线
+        },
+        series: [
+          {
+            data: this.data.yaxisData,
+            type: "bar",
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: "#1c4fe2" }, // 0% 处的颜色
+                  { offset: 1, color: "#55dff1" }, // 100% 处的颜色
+                ],
+                global: false, // 缺省为 false
+              },
+              borderColor: "white", // 设置柱形边框颜色为白色
+              borderWidth: 2, // 设置柱形边框宽度
+              barBorderRadius: [20, 20, 20, 20],
+            },
+            barWidth: 30,
+          },
+        ],
+      };
+      this.myChart.resize();
+      this.myChart.setOption(option);
+    }
+  }
+}
+</script>
+
+<style scoped>
+#electronicCertificateInfo {
+  height: 100%;
+  width: 100%;
+}
+
+#electronicCertificateInfo-title {
+  height: 13%;
+  padding-top: 2%;
+  padding-left: 3%;
+}
+
+.title-container1 {
+  width: 97%;
+}
+
+.DistricHandle-title {
+  /*font-size: 17px;*/
+  font-weight: 500;
+  color: rgb(255, 255, 255);
+  line-height: 1;
+  text-align: left;
+  z-index: 49;
+  width: 87%;
+  display: inline-block;
+  /*padding-left: 5%;*/
+  padding-top: 8px;
+}
+
+.DistricHandle-title1 {
+  font-size: 22px;
+  font-weight: 500;
+  color: rgb(255, 255, 255);
+  line-height: 1;
+  text-align: left;
+  z-index: 49;
+  width: 87%;
+  display: inline-block;
+  padding-top: 8px;
+}
+
+#electronicCertificateInfo-chart {
+  height: 87%;
+  width: 100%;
+}
+</style>

src/view/client/serviceCenter/new/ElectronicCertificateInfoApi.js

@@ -0,0 +1,7 @@
+import { server } from "../../../../tools/servers";
+
+export class ElectronicCertificateInfo {
+  static getData(data = {}) {
+    return server.connection('POST', '/api/governmentService/getElectronicCertificateInfo', data)
+  }
+}

src/view/client/serviceCenter/new/ElectronicSealInfo.vue

@@ -0,0 +1,220 @@
+<template>
+  <div id="electronicSealInfo">
+    <div id="electronicSealInfo-title">
+      <div class="title-container1">
+        <span style="color: #00b3ea">▋</span>&nbsp;&nbsp;&nbsp;&nbsp;
+        <div :class="font1 === 0 ? 'DistricHandle-title' : 'DistricHandle-title1'">
+          电子印章
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="column">
+        <div class="column-item">
+          <span class="column-title">印章申领数</span>
+          <el-progress type="line"
+            :percentage="data.sealApplyTotalCount === 0 ? 0 : data.sealApplyCount / data.sealApplyTotalCount * 100"
+            :show-text="false"></el-progress>
+          <span class="column-content">{{ data.sealApplyCount || 0 }}</span>
+        </div>
+        <div class="column-item">
+          <div class="column-title">印章制作数</div>
+          <el-progress type="line"
+            :percentage="data.sealMakeTotalCount === 0 ? 0 : data.sealMakeCount / data.sealMakeTotalCount * 100"
+            :show-text="false"></el-progress>
+          <div class="column-content">{{ data.sealMakeCount || 0 }}</div>
+        </div>
+        <div class="column-item">
+          <div class="column-title">用章数</div>
+          <el-progress type="line"
+            :percentage="data.usedSealTotalCount === 0 ? 0 : data.usedSealCount / data.usedSealTotalCount * 100"
+            :show-text="false"></el-progress>
+          <div class="column-content">{{ data.usedSealCount || 0 }}</div>
+        </div>
+        <div class="column-item">
+          <div class="column-title">已制作印章部门数</div>
+          <el-progress type="line"
+            :percentage="data.makeSealDeptTotalCount === 0 ? 0 : data.makeSealDeptCount / data.makeSealDeptTotalCount * 100"
+            :show-text="false"></el-progress>
+          <div class="column-content">{{ data.makeSealDeptCount || 0 }}</div>
+        </div>
+        <div class="column-item">
+          <div class="column-title">未制作印章部门数</div>
+          <el-progress type="line"
+            :percentage="data.noSealDeptTotalCount === 0 ? 0 : data.noSealDeptCount / data.noSealDeptTotalCount * 100"
+            :show-text="false"></el-progress>
+          <div class="column-content">{{ data.noSealDeptCount || 0 }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ElectronicSealInfo } from "./ElectronicSealInfoApi";
+export default {
+  props: {
+    yearTime: String,
+    currentArea: Number
+  },
+  data() {
+    return {
+      font1: 0,
+      data: {
+        "sealApplyCount": 0,
+        "sealMakeCount": 0,
+        "usedSealCount": 0,
+        "makeSealDeptCount": 0,
+        "noSealDeptCount": 0,
+        "sealApplyTotalCount": 0,
+        "sealMakeTotalCount": 0,
+        "usedSealTotalCount": 0,
+        "makeSealDeptTotalCount": 0,
+        "noSealDeptTotalCount": 0
+      },
+    }
+  },
+  mounted() {
+    this.getData();
+  },
+  watch: {
+    currentArea: {
+      handler(newVal) {
+        // 当 currentArea 发生变化时，重新调用 getData 方法
+        this.getData();
+      },
+    },
+    yearTime: {
+      handler(newVal) {
+        // 当 currentArea 发生变化时，重新调用 getData 方法
+        this.getData();
+      },
+    }
+  },
+  methods: {
+    // 变大
+    change(count) {
+      if (count % 2 === 0) {
+        this.font1 = 0;
+      } else {
+        this.font1 = 1;
+      }
+    },
+    // 获取数据
+    getData: function () {
+      const params = {
+        year: this.yearTime,
+        area: this.currentArea
+      };
+      ElectronicSealInfo.getData(params).then(res => {
+        this.data = res.data.result;
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+#electronicSealInfo {
+  height: 100%;
+  width: 100%;
+}
+
+#electronicSealInfo-title {
+  height: 13%;
+  padding-top: 2%;
+  padding-left: 3%;
+}
+
+.title-container1 {
+  width: 97%;
+}
+
+.DistricHandle-title {
+  /*font-size: 17px;*/
+  font-weight: 500;
+  color: rgb(255, 255, 255);
+  line-height: 1;
+  text-align: left;
+  z-index: 49;
+  width: 87%;
+  display: inline-block;
+  /*padding-left: 5%;*/
+  padding-top: 8px;
+}
+
+.DistricHandle-title1 {
+  font-size: 22px;
+  font-weight: 500;
+  color: rgb(255, 255, 255);
+  line-height: 1;
+  text-align: left;
+  z-index: 49;
+  width: 87%;
+  display: inline-block;
+  padding-top: 8px;
+}
+
+.container {
+  text-align: center;
+  padding: 0 10%;
+  display: flex;
+  flex-direction: row;
+}
+
+.column {
+  flex: 1;
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* .column-item {
+  display: flex;
+  align-items: center;
+} */
+
+/* .column-title {
+  color: rgb(255, 255, 255);
+  line-height: 1;
+}
+
+.column-content {
+  color: rgb(0, 251, 255);
+  text-align: center;
+  padding-bottom: 10px;
+} */
+
+
+.column-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.column-title {
+  color: rgb(255, 255, 255);
+  line-height: 1;
+  flex: 1;
+}
+
+.el-progress {
+  flex: 1;
+}
+
+.column-content {
+  color: rgb(0, 251, 255);
+  text-align: center;
+  padding-bottom: 10px;
+  flex: 1;
+}
+
+.progress-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+</style>

src/view/client/serviceCenter/new/ElectronicSealInfoApi.js

@@ -0,0 +1,7 @@
+import { server } from "../../../../tools/servers";
+
+export class ElectronicSealInfo {
+  static getData(data = {}) {
+    return server.connection('POST', '/api/governmentService/getElectronicSealInfo', data)
+  }
+}

src/view/client/serviceCenter/new/FourOfficeInfo.vue

@@ -0,0 +1,197 @@
+<template>
+  <div id="fourOfficeInfo">
+    <div id="fourOfficeInfo-title">
+      <div class="title-container1">
+        <span style="color: #00b3ea">▋</span>&nbsp;&nbsp;&nbsp;&nbsp;
+        <div :class="font1 === 0 ? 'DistricHandle-title' : 'DistricHandle-title1'">
+          四办信息
+        </div>
+      </div>
+    </div>
+    <div class="contain">
+      <div class="column-item" v-for="item in data" :key="item.id">
+        <el-progress class="progress-circle" type="circle" :percentage="parseInt(item.account)"
+          :format="formatProgress(item)"></el-progress>
+        <div class="progress-content">{{ item.processTypeText }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { FourOfficeInfo } from "./FourOfficeInfoApi";
+
+export default {
+  name: "FourOfficeInfo",
+  props: {
+    yearTime: String,
+    currentArea: Number
+  },
+  data() {
+    return {
+      data: {},
+      font1: 0
+    }
+  },
+  mounted() {
+    this.getData();
+  },
+  watch: {
+    currentArea: {
+      handler(newVal) {
+        // 当 currentArea 发生变化时，重新调用 getData 方法
+        this.getData();
+      },
+    },
+    yearTime: {
+      handler(newVal) {
+        // 当 currentArea 发生变化时，重新调用 getData 方法
+        this.getData();
+      },
+    }
+  },
+  computed: {
+    formattedData() {
+      const processTypeMap = {
+        0: '普通',
+        1: '马上办',
+        2: '加急'
+      };
+      return this.data.map(item => ({
+        ...item,
+        processTypeText: processTypeMap[item.processType] || '未知'
+      }));
+    }
+  },
+  methods: {
+    formatProgress(item) {
+      return () => {
+        return item.processCount.toString() || '0';
+      };
+    },
+    // 变大
+    change(count) {
+      if (count % 2 === 0) {
+        this.font1 = 0;
+      } else {
+        this.font1 = 1;
+      }
+    },
+    // 获取数据
+    getData: function () {
+      const processTypeMap = {
+        0: '马上办',
+        1: '网上办',
+        2: '一次办'
+      };
+      const params = {
+        year: this.yearTime,
+        areaName: this.currentArea
+      };
+      FourOfficeInfo.getData(params).then(res => {
+        this.data = res.data.result.map(item => ({
+          ...item,
+          processTypeText: processTypeMap[item.processType] || '未知'
+        }));
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+#fourOfficeInfo {
+  height: 100%;
+  width: 100%;
+}
+
+#fourOfficeInfo-title {
+  height: 13%;
+  padding-top: 2%;
+  padding-left: 3%;
+}
+
+.title-container1 {
+  width: 97%;
+}
+
+.DistricHandle-title {
+  /*font-size: 17px;*/
+  font-weight: 500;
+  color: rgb(255, 255, 255);
+  line-height: 1;
+  text-align: left;
+  z-index: 49;
+  width: 87%;
+  display: inline-block;
+  /*padding-left: 5%;*/
+  padding-top: 8px;
+}
+
+.DistricHandle-title1 {
+  font-size: 22px;
+  font-weight: 500;
+  color: rgb(255, 255, 255);
+  line-height: 1;
+  text-align: left;
+  z-index: 49;
+  width: 87%;
+  display: inline-block;
+  /*padding-left: 5%;*/
+  padding-top: 8px;
+}
+
+.content {
+  width: 100%;
+  font-size: 12px;
+  margin-top: 3%;
+  height: 79%;
+}
+
+.content1 {
+  font-size: 18px;
+  width: 100%;
+  margin-top: 3%;
+  height: 79%;
+}
+
+.unit-td {
+  text-align: center;
+}
+
+.contain {
+  /* margin: 15% 0; */
+  height: 87%;
+  display: flex;
+  justify-content: space-evenly;
+  flex-direction: row;
+}
+
+.column-item {
+  width: 33%;
+  height: 100%;
+  text-align: center;
+  position: relative;
+}
+
+.progress-number {
+  position: absolute;
+  top: 9.5%;
+  left: 48.5%;
+  font-size: 24px;
+  font-weight: bold;
+  color: white;
+}
+
+.progress-content {
+  font-size: 24px;
+  font-weight: bold;
+  color: white;
+}
+
+.progress-circle /deep/ .el-progress__text {
+  font-size: 24px !important;
+  font-weight: bold !important;
+  color: white !important;
+}
+</style>

src/view/client/serviceCenter/new/FourOfficeInfoApi.js

@@ -0,0 +1,7 @@
+import { server } from "../../../../tools/servers";
+
+export class FourOfficeInfo {
+  static getData(data = {}) {
+    return server.connection('POST', '/api/governmentService/getFourOfficeInfo', data)
+  }
+}

src/view/client/serviceCenter/new/index.vue

@@ -0,0 +1,642 @@
+<template>
+  <div class="totalDiv" style="overflow: hidden">
+    <div class="background2" v-if="background"></div>
+    <div class="header">
+      <div class="title"><span>巴中市政务服务可视化系统</span></div>
+    </div>
+    <div class="main">
+      <div class="back" @click="back"><span>
+          < < </span>
+      </div>
+      <div class="picker">
+        <el-date-picker v-model="yearTime" type="year" format="yyyy年" prefix-icon="1"
+          popper-class="date-picker-government-service-municipal" class="yearDate" clear-icon="" value-format="yyyy"
+          placeholder="选择年">
+        </el-date-picker>
+      </div>
+      <div class="date"><span>{{ date }}</span></div>
+      <div class="day"><span>{{ day }}</span></div>
+      <div class="hour"><span>{{ hour }}</span></div>
+
+      <div class="content">
+        <!-- 左边部分 -->
+        <div class="left">
+          <div class="left-first" @click="AreaHandleInfo" id="rectangle1">
+            <AreaHandleInfo ref="AreaHandleInfo" @click="AreaHandleInfo" :year-time="yearTime"
+              :current-area="currentArea" />
+          </div>
+          <div class="left-second" @click="ElectronicSealInfo" id="rectangle2">
+            <ElectronicSealInfo ref="ElectronicSealInfo" @click="ElectronicSealInfo" :year-time="yearTime"
+              :current-area="currentArea" />
+          </div>
+          <div class="left-third" @click="ElectronicCertificateInfo" id="rectangle3">
+            <ElectronicCertificateInfo ref="ElectronicCertificateInfo" @click="ElectronicCertificateInfo"
+              :year-time="yearTime" :current-area="currentArea" />
+          </div>
+        </div>
+
+        <!-- 中间部分 -->
+        <div class="center">
+          <div class="center-first">
+            <regionalConsultationMap @area-updated="updateCurrentArea" />
+          </div>
+          <div class="center-second" @click="AreaEvaluateInfo" id="rectangle4">
+            <AreaEvaluateInfo ref="AreaEvaluateInfo" @click="AreaEvaluateInfo" :year-time="yearTime"
+              :current-area="currentArea" />
+          </div>
+        </div>
+
+        <!-- 右边部分 -->
+        <div class="right">
+          <div class="right-first" @click="EfficientThingInfo" id="rectangle5">
+            <EfficientThingInfo ref="EfficientThingInfo" @click="EfficientThingInfo" :year-time="yearTime"
+              :current-area="currentArea" />
+          </div>
+          <div class="right-second" @click="CharacteristicThingInfo" id="rectangle6">
+            <CharacteristicThingInfo ref="CharacteristicThingInfo" @click="CharacteristicThingInfo"
+              :year-time="yearTime" :current-area="currentArea" />
+          </div>
+          <div class="right-third" @click="FourOfficeInfo" id="rectangle7">
+            <FourOfficeInfo ref="FourOfficeInfo" @click="FourOfficeInfo" :year-time="yearTime"
+              :current-area="currentArea" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import regionalConsultationMap from './regionalConsultationMap.vue';
+import AreaHandleInfo from './AreaHandleInfo.vue';
+import ElectronicSealInfo from './ElectronicSealInfo.vue';
+import ElectronicCertificateInfo from './ElectronicCertificateInfo.vue';
+import AreaEvaluateInfo from './AreaEvaluateInfo.vue';
+import EfficientThingInfo from './EfficientThingInfo.vue';
+import CharacteristicThingInfo from './CharacteristicThingInfo.vue';
+import FourOfficeInfo from './FourOfficeInfo.vue';
+
+export default {
+  name: "index",
+  data() {
+    const currentYear = new Date().getFullYear().toString();
+    return {
+      date: '',
+      interval: '',
+      day: '',
+      hour: '',
+      government: 0,
+      investCount: 0,
+      disCount: 0,
+      timeStatisCount: 0,
+      consultCount: 0,
+      leadingCount: 0,
+      background: false,
+      number: 0,
+      yearTime: currentYear,
+      currentArea: 0,
+    }
+  },
+  created() {
+    window['DistricHandleResize'] = (item) => {
+      this.$refs.DistricHandle.change(this.disCount);
+      this.$refs.DistricHandle.drawDayCharts();
+      this.$refs.DistricHandle.drawYearCharts();
+      // this.$refs.DistricHandle.getChartData3();
+    };
+  },
+  mounted() {
+    this.getCycleTime()
+  },
+  destroyed() {
+    clearInterval(this.interval);
+  },
+  components: {
+    regionalConsultationMap,
+    AreaHandleInfo,
+    ElectronicSealInfo,
+    ElectronicCertificateInfo,
+    AreaEvaluateInfo,
+    EfficientThingInfo,
+    CharacteristicThingInfo,
+    FourOfficeInfo
+  },
+  methods: {
+    updateCurrentArea(area) {
+      this.currentArea = area;
+    },
+    changeNumber(data) {
+      this.number = data;
+    },
+    back() {
+      this.$router.push({ name: 'index' })
+    },
+    AreaHandleInfo() {
+      this.investCount = this.investCount + 1;
+      document.getElementById("left-first").classList.toggle("rectangle1Click"); //改变样式
+
+      this.$elementQueries.ResizeSensor(document.getElementById("left-first"), () => {
+        this.$refs.AreaHandleInfo.change(this.investCount)
+      });
+      if (this.investCount % 2 !== 0) {
+        this.background = true;
+      } else {
+        this.background = false;
+      }
+      // this.$refs.investmentConstructionProjects.changeTitle() //标题
+    },
+    AreaHandleInfo() {
+      let flag = sessionStorage.getItem('AreaHandleInfo');
+      if (flag !== JSON.stringify(1)) {
+        document.getElementById("rectangle1").classList.toggle("rectangle1Click"); //改变样式
+        for (let i = 1; i <= 10; i++)
+          setTimeout(() => {
+            this.$refs.AreaHandleInfo.change(this.government)
+          }, i * 100);
+        this.government++;
+        if (this.government % 2 !== 0) {
+          this.background = true;
+        } else {
+          this.background = false;
+        }
+      } else {
+        sessionStorage.removeItem('AreaHandleInfo')
+      }
+    },
+    ElectronicSealInfo() {
+      let flag = sessionStorage.getItem('ElectronicSealInfo');
+      if (flag !== JSON.stringify(1)) {
+        document.getElementById("rectangle2").classList.toggle("rectangle2Click"); //改变样式
+        for (let i = 1; i <= 10; i++)
+          setTimeout(() => {
+            this.$refs.ElectronicSealInfo.change(this.government)
+          }, i * 100);
+        this.government++;
+        if (this.government % 2 !== 0) {
+          this.background = true;
+        } else {
+          this.background = false;
+        }
+      } else {
+        sessionStorage.removeItem('ElectronicSealInfo')
+      }
+    },
+    ElectronicCertificateInfo() {
+      this.timeStatisCount++;
+      document.getElementById("rectangle3").classList.toggle("rectangle3Click"); //改变样式
+      this.$elementQueries.ResizeSensor(document.getElementById("rectangle3"), () => {
+        this.$refs.ElectronicCertificateInfo.getChart(); //调用子组件的重新渲染图表函数
+        this.$refs.ElectronicCertificateInfo.change(this.timeStatisCount);
+      });
+      if (this.timeStatisCount % 2 !== 0) {
+        this.background = true;
+      } else {
+        this.background = false;
+      }
+    },
+    AreaEvaluateInfo() {
+      this.consultCount++;
+      document.getElementById("rectangle4").classList.toggle("rectangle4Click"); //改变样式
+      this.$elementQueries.ResizeSensor(document.getElementById("rectangle4"), () => {
+        this.$refs.AreaEvaluateInfo.change(this.consultCount);
+      });
+      if (this.consultCount % 2 !== 0) {
+        this.background = true;
+      } else {
+        this.background = false;
+      }
+    },
+    EfficientThingInfo() {
+      let flag = sessionStorage.getItem('municipalTimeSituationDateChange');
+      if (flag !== JSON.stringify(1)) {
+        this.leadingCount++;
+        document.getElementById("rectangle5").classList.toggle("rectangle5Click"); //改变样式
+        this.$elementQueries.ResizeSensor(document.getElementById("rectangle5"), () => {
+          this.$refs.EfficientThingInfo.getChart(); //调用子组件的重新渲染图表函数
+        });
+        if (this.leadingCount % 2 !== 0) {
+          this.background = true;
+        } else {
+          this.background = false;
+        }
+      } else {
+        sessionStorage.removeItem('municipalTimeSituationDateChange')
+      }
+    },
+    CharacteristicThingInfo() {
+      let flag = sessionStorage.getItem('CharacteristicThingInfo');
+      if (flag !== JSON.stringify(1)) {
+        this.leadingCount++;
+        document.getElementById("rectangle6").classList.toggle("rectangle6Click"); //改变样式
+        this.$elementQueries.ResizeSensor(document.getElementById("rectangle6"), () => {
+          this.$refs.CharacteristicThingInfo.getChart(); //调用子组件的重新渲染图表函数
+          this.$refs.FourOfficeInfo.change(this.consultCount);
+        });
+        if (this.leadingCount % 2 !== 0) {
+          this.background = true;
+        } else {
+          this.background = false;
+        }
+      } else {
+        sessionStorage.removeItem('CharacteristicThingInfo')
+      }
+    },
+    FourOfficeInfo() {
+      this.consultCount++;
+      document.getElementById("rectangle7").classList.toggle("rectangle7Click"); //改变样式
+      this.$elementQueries.ResizeSensor(document.getElementById("rectangle7"), () => {
+        this.$refs.FourOfficeInfo.change(this.consultCount);
+      });
+      if (this.consultCount % 2 !== 0) {
+        this.background = true;
+      } else {
+        this.background = false;
+      }
+    },
+    getCycleTime() {
+      let data = new Date();
+      let month = data.getMonth() + 1;
+      this.day = '';
+      if (data.getDay() === 1) this.day = '星期一';
+      else if (data.getDay() === 2) this.day = '星期二';
+      else if (data.getDay() === 3) this.day = '星期三';
+      else if (data.getDay() === 4) this.day = '星期四';
+      else if (data.getDay() === 5) this.day = '星期五';
+      else if (data.getDay() === 6) this.day = '星期六';
+      else this.day = '星期日';
+      this.date = data.getFullYear() + '年' + month + '月' + data.getDate() + '日';
+      this.getTime();
+      document.addEventListener('visibilitychange', this.cycleDisplay);
+      this.cycleDisplay();
+    },
+    cycleDisplay() {
+      if (document.visibilityState === 'visible') {
+        this.interval = setInterval(() => {
+          this.getTime()
+        }, 1000)
+      } else {
+        clearInterval(this.interval);
+      }
+    },
+    getTime() {
+      let data = new Date();
+      this.hour = (data.getHours() < 10 ? ('0' + data.getHours()) : data.getHours()) + ':' + (data.getMinutes() < 10 ? ('0' + data.getMinutes()) : data.getMinutes());
+    }
+  }
+}
+</script>
+
+<style scoped>
+.totalDiv {
+  width: 100%;
+  height: 100%;
+  background: url("../../../../assets/images/1077.png") no-repeat;
+  background-size: 100% 100%;
+}
+
+.background2 {
+  width: 100%;
+  height: 100%;
+  opacity: 0.6;
+  filter: alpha(opacity=40);
+  background-color: black;
+  /*background-image: url("../../../assets/images/background.png");*/
+  background-size: cover;
+  position: absolute;
+  z-index: 99
+}
+
+.title {
+  color: #2bc8ff;
+  font-size: 1.81rem;
+  padding-top: 1%;
+  text-shadow: 0 0 8px #379a96, 0 0 20px #0febff, 0 0 42px #577886, 0 0 80px #89bfd6;
+  text-align: center;
+}
+
+.header {
+  height: 9.7%;
+  width: 100%;
+  background: url(../../../../assets/images/serviceTitle.png);
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+}
+
+.main {
+  width: 100%;
+  height: 81.7%;
+  position: relative;
+}
+
+.content {
+  display: flex;
+  flex-direction: row;
+}
+
+.left {
+  flex: 1;
+  margin-left: 2%;
+  height: 100vh;
+}
+
+.center {
+  flex: 1;
+  height: 100vh;
+}
+
+.right {
+  flex: 1;
+  height: 100vh;
+}
+
+.left-first {
+  width: 31%;
+  height: 33%;
+  position: absolute;
+  background-color: rgba(13, 26, 56, 0.5);
+  transition: width 1s, height 1s, margin-left 1s, margin-top 1s;
+  -webkit-transition: width 1s, height 1s, margin-top 2s, margin-left 2s;
+}
+
+.left-second {
+  width: 31%;
+  height: 33%;
+  position: absolute;
+  top: 35%;
+  background-color: rgba(13, 26, 56, 0.5);
+  transition: width 1s, height 1s, margin-left 1s, margin-top 1s;
+  -webkit-transition: width 1s, height 1s, margin-top 2s, margin-left 2s;
+}
+
+.left-third {
+  width: 31%;
+  height: 33%;
+  position: absolute;
+  top: 70%;
+  background-color: rgba(13, 26, 56, 0.5);
+  transition: width 1s, height 1s, margin-left 1s, margin-top 1s;
+  -webkit-transition: width 1s, height 1s, margin-top 2s, margin-left 2s;
+}
+
+.center-first {
+  width: 32%;
+  height: 68%;
+  position: absolute;
+  top: 0;
+  left: 34%;
+}
+
+.center-second {
+  position: absolute;
+  width: 32%;
+  height: 33%;
+  left: 34%;
+  top: 70%;
+  background-color: rgba(13, 26, 56, 0.5);
+  transition: width 1s, height 1s, margin-left 1s, margin-top 1s;
+  -webkit-transition: width 1s, height 1s, margin-top 2s, margin-left 2s;
+}
+
+.right-first {
+  width: 33%;
+  height: 33%;
+  position: absolute;
+  background-color: rgba(13, 26, 56, 0.5);
+  transition: width 1s, height 1s, margin-left 1s, margin-top 1s;
+  -webkit-transition: width 1s, height 1s, margin-top 2s, margin-left 2s;
+}
+
+.right-second {
+  width: 33%;
+  height: 33%;
+  position: absolute;
+  top: 35%;
+  background-color: rgba(13, 26, 56, 0.5);
+  transition: width 1s, height 1s, margin-left 1s, margin-top 1s;
+  -webkit-transition: width 1s, height 1s, margin-top 2s, margin-left 2s;
+}
+
+.right-third {
+  width: 33%;
+  height: 33%;
+  position: absolute;
+  top: 70%;
+  background-color: rgba(13, 26, 56, 0.5);
+  transition: width 1s, height 1s, margin-left 1s, margin-top 1s;
+  -webkit-transition: width 1s, height 1s, margin-top 2s, margin-left 2s;
+}
+
+.back {
+  position: absolute;
+  top: -10%;
+  left: 4%;
+  color: #00b3ea;
+  font-size: 220%;
+  font-weight: 500;
+  width: 4%;
+  text-align: center;
+  font-family: "Agency FB";
+}
+
+.picker {
+  position: absolute;
+  top: -11%;
+  left: 8%;
+  color: #00b3ea;
+  font-size: 220%;
+  font-weight: 500;
+  width: 8%;
+  text-align: center;
+  font-family: "Agency FB";
+}
+
+.date-picker {
+  width: 105px;
+}
+
+.date {
+  position: absolute;
+  top: -10%;
+  left: 86%;
+  color: #00b3ea;
+  font-size: 110%;
+  font-weight: 500;
+  width: 12%;
+  text-align: center;
+  font-family: "Agency FB";
+}
+
+.day {
+  position: absolute;
+  top: -7%;
+  left: 86%;
+  color: #00b3ea;
+  font-size: 100%;
+  font-weight: 500;
+  width: 12%;
+  text-align: center;
+  font-family: "Agency FB";
+}
+
+.hour {
+  position: absolute;
+  top: -10%;
+  left: 80.5%;
+  color: #00b3ea;
+  font-size: 235%;
+  font-weight: 500;
+  width: 12%;
+  text-align: center;
+  font-family: "Agency FB";
+}
+
+.rectangle1Click {
+  width: 53%;
+  height: 70%;
+  position: absolute;
+  background-color: rgba(0, 0, 40, 1);
+  margin-top: 5%;
+  margin-left: 21%;
+  /* margin-top: -22%;
+  margin-left: -23%; */
+  z-index: 99;
+}
+
+.rectangle2Click {
+  position: absolute;
+  width: 50%;
+  height: 113%;
+  background-size: 100% 100%;
+  background-color: rgba(0, 0, 40, 1);
+  /* margin-top: -11.6%; */
+  /* margin-left: 20.5%; */
+  margin-top: -3.6%;
+  margin-left: 22.5%;
+  z-index: 99;
+  padding-bottom: 15px;
+}
+
+.rectangle3Click {
+  position: absolute;
+  width: 60%;
+  height: 80%;
+  background-size: 100% 100%;
+  background-color: rgba(0, 0, 40, 1);
+  margin-top: -22%;
+  margin-left: 15%;
+  /* margin-top: -21.1%;
+  margin-left: -4.5%; */
+  z-index: 99;
+}
+
+.rectangle4Click {
+  position: absolute;
+  width: 36%;
+  height: 62%;
+  background-size: 100% 100%;
+  background-color: rgba(0, 0, 40, 1);
+  /*margin-top: -21.9%;*/
+  /*margin-left: -14.5%;*/
+  margin-top: -17.9%;
+  margin-left: 2.5%;
+  z-index: 99;
+}
+
+.rectangle5Click {
+  position: absolute;
+  width: 66%;
+  height: 62%;
+  background-size: 100% 100%;
+  background-color: rgba(0, 0, 40, 1);
+  margin-top: 6%;
+  margin-left: -52%;
+  /* margin-top: 4.1%;
+  margin-left: -52.5%; */
+  z-index: 99;
+}
+
+.rectangle6Click {
+  position: absolute;
+  width: 60%;
+  height: 80%;
+  background-size: 100% 100%;
+  background-color: rgba(0, 0, 40, 1);
+  margin-top: -10%;
+  margin-left: -48%;
+  z-index: 99;
+}
+
+.rectangle7Click {
+  position: absolute;
+  width: 60%;
+  height: 80%;
+  background-size: 100% 100%;
+  background-color: rgba(0, 0, 40, 1);
+  margin-top: -24%;
+  margin-left: -48%;
+  z-index: 99;
+}
+
+.el-date-editor /deep/ .el-input__inner {
+  height: 10%;
+  background-color: #000000;
+  color: white;
+  border: #00b3ea 1px solid;
+  width: 110px;
+}
+
+.el-date-editor /deep/ .el-input__prefix {
+  top: -42%;
+}
+</style>
+
+<style>
+.date-picker-government-service-municipal {
+  border-color: #066088;
+}
+
+.date-picker-government-service-municipal .el-picker-panel__body-wrapper {
+  background-color: #066088;
+  border-color: #066088;
+}
+
+.date-picker-government-service-municipal .el-date-picker__header {
+  background-color: #066088;
+  margin: 0;
+  padding: 0;
+}
+
+.date-picker-government-service-municipal .el-date-picker__header-label {
+  color: white;
+}
+
+.date-picker-government-service-municipal .el-year-table .cell {
+  color: white;
+}
+
+.date-picker-government-service-municipal .el-picker-panel__icon-btn {
+  color: white;
+}
+
+.date-picker-government-service-municipal .el-year-table td.current:not(.disabled) .cell {
+  color: #00b3ea;
+}
+
+.date-picker-government-service-municipal .el-year-table td.disabled .cell {
+  opacity: 0.5;
+  color: white;
+  background-color: #066088;
+}
+
+.date-picker-government-service-municipal .el-date-picker__header {
+  border-color: #029acd;
+}
+
+.date-picker-government-service-municipal .el-year-table td.today .cell {
+  color: #97656b;
+}
+
+.date-picker-government-service-municipal .el-year-table td .cell:hover {
+  color: rgb(0, 0, 0);
+}
+</style>

src/view/client/serviceCenter/new/regionalConsultationMap.vue

@@ -0,0 +1,231 @@
+<template>
+  <div style="width: 100%; height: 100%">
+    <div id="regionalConsultationMapCharts"></div>
+  </div>
+</template>
+
+<script>
+import BaZhongJsonServerCenter from './baZhongMap.json';
+
+export default {
+  name: "regional-consultation-map",
+  data() {
+    return {
+      getSetting: [],
+      allData: [
+        // 0:南江县，1：通江县，2;巴州区，3：恩阳区，4：平昌县
+        // { regionType: '巴州区', order: 1 },
+        { id: 0, regionType: '南江县', order: 1 },
+        { id: 1, regionType: '通江县', order: 1 },
+        { id: 2, regionType: '市本级', order: 1 },
+        { id: 3, regionType: '恩阳区', order: 1 },
+        { id: 4, regionType: '平昌县', order: 1 },
+      ],
+      ifLoop: true,
+      areaName: '',
+    }
+  },
+  mounted() {
+    console.log(3, 45);
+    this.drawLine();
+  },
+  methods: {
+    updateCurrentArea(area) {
+      this.$emit('area-updated', area); // 发送事件给父组件
+    },
+    drawLine() {
+      var allData = [];
+      allData = this.allData;
+      var regionType = [], serisData = [], order = [];
+      for (var i = 0; i < this.allData.length; i++) {
+        regionType[i] = this.allData[i].regionType;
+        order[i] = this.allData[i].order;
+        serisData.push({
+          name: regionType[i],
+          value: order[i]
+        })
+      }
+      let myCharts = this.$echarts.init(document.getElementById('regionalConsultationMapCharts'));
+      this.$echarts.registerMap('BaZhong', BaZhongJsonServerCenter);
+      var that = this;
+      let option = {
+        borderColor: 'white',
+        tooltip: {
+          trigger: 'item',
+          formatter: function (param) {
+            that.ifLoop = false;
+            return param.name;
+          }
+        },
+        series: [{
+          type: 'map',
+          map: 'BaZhong',
+          x: '33%',
+          y: '12%',
+          showAllSymbol: true,
+          showLegendSymbol: true,
+          hoverAnimation: false,
+          showSymbol: true,
+          coordinateSystem: 'geo',
+          itemStyle: {
+            normal: {
+              borderColor: '#ffffff',
+              borderWidth: 1,
+            },
+            emphasis: { //高亮时样式
+              hoverAnimation: false,
+              // borderColor: '#ffffff',
+              borderWidth: 2,
+              shadowColor: 'white',
+              shadowBlur: 25,
+              areaColor: '#2a3890',
+              label: {
+                color: 'white',
+                shadowColor: '#fff', //默认透明
+                shadowBlur: 10,
+                show: true,
+                formatter: function (param) {
+                  if (param.name === '市本级')
+                    return '{a|' + '\n\n\n市本级●' + '}';
+                  else
+                    return param.name;
+                },
+                rich: {
+                  a: {
+                    fontWeight: 'bold',
+                    fontSize: '120%',
+                    color: '#f45197',
+                    top: '12'
+                  }
+                },
+              },
+            },
+          },
+          zoom: 0.9, //地图大小
+          left: '5%',
+          top: '14%',
+
+          data: (function () {
+            var res = [];
+            var len = -1;
+
+            while (len++ < allData.length - 1) {
+              res.push({
+                name: allData[len].regionType,
+                value: allData[len].order,
+                selected: ifSelect(len, allData[len].regionType, 1),
+              });
+            }
+            res.push({
+              name: allData[1].regionType,
+              value: allData[1].order,
+              selected: true,
+            })
+            return res;
+          })(),
+          label: { //地图上的文字
+            normal: {
+              show: true,
+              textStyle: {
+                fontWeight: 'bold',
+                fontSize: '100%',
+                color: '#ffffff',
+                textShadowColor: 'black', //文字阴影
+                textShadowBlur: '4' //文字阴影长度
+              },
+              formatter: function (param) {
+                if (param.name === '市本级')
+                  return '{a|' + '\n\n\n市本级●' + '}';
+                else
+                  return param.name;
+              },
+              rich: {
+                a: {
+                  fontWeight: 'bold',
+                  fontSize: '80%',
+                  color: '#f45197',
+                  top: '12'
+                }
+              },
+            },
+          },
+        }],
+        data: [
+          { name: '南江县', value: 0 },
+          { name: '通江县', value: 1 },
+          { name: '巴州区', value: 2 },
+          { name: '恩阳区', value: 3 },
+          { name: '平昌县', value: 4 },
+        ],
+        dataRange: {
+          splitList: [
+            { start: 1, end: 1, label: '南江县', color: '#0071a7' },
+          ],
+          symbol: 'circle',
+          symbolSize: 4,
+          itemGap: 20,
+          itemWidth: 15,
+          itemHeight: 15,
+          show: false,
+          itemStyle: {
+            shadowColor: 'white',
+            shadowBlur: 5
+          },
+          textStyle: {
+            color: 'white',
+            fontSize: 15
+          },
+        }
+      };
+      myCharts.setOption(option);
+
+      let curIndx = 0;
+      if (this.ifLoop) {
+        app.timeTicket = setInterval(function () {
+          curIndx = (curIndx + 1) % serisData.length;
+          that.updateCurrentArea(curIndx); // 调用 updateCurrentArea 方法
+          myCharts.setOption({
+            series: [{
+              hoverAnimation: false,
+              data: (function () {
+                var res = [];
+                var len = -1;
+                while (len++ < allData.length - 1) {
+                  res.push({
+                    name: allData[len].regionType,
+                    value: allData[len].order,
+                    selected: ifSelect(len, allData[len].regionType, 0)
+                  });
+                }
+                return res;
+              })()
+            }],
+          });
+        }, 15000);
+      }
+      var flag = false;
+
+      function ifSelect(num, name, mm) {
+        if (mm) {
+          return false;
+        } else {
+          if (num == curIndx) {
+            flag = true
+          } else {
+            flag = false
+          }
+          return flag;
+        }
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+#regionalConsultationMapCharts {
+  width: 50%;
+  height: 100%;
+  margin: auto;
+}
+</style>