src/store/client12345/index.js

@@ -0,0 +1,62 @@
+const client12345 = {
+  state: {
+    curArea: {
+      area: 0
+    },
+    areaDataList: [
+      {
+        acceptCount: 0,
+        districtName: "南江县",
+        id: 1,
+        processCount: 0,
+        statDate: "2024",
+      },
+      {
+        acceptCount: 0,
+        districtName: "通江县",
+        id: 2,
+        processCount: 0,
+        statDate: "2024",
+      },
+      {
+        acceptCount: 0,
+        districtName: "平昌县",
+        id: 3,
+        processCount: 0,
+        statDate: "2024",
+      },
+      {
+        acceptCount: 0,
+        districtName: "巴州区",
+        id: 4,
+        processCount: 0,
+        statDate: "2024",
+      },
+      {
+        acceptCount: 0,
+        districtName: "恩阳区",
+        id: 5,
+        processCount: 0,
+        statDate: "2024",
+      },
+    ],
+  },
+  mutations: {
+    SET_AREA_DATA: (state, data) => {
+      state.areaDataList = data;
+    },
+    SET_CUR_AREA: (state, data) => {
+      state.curArea.area = data;
+    },
+  },
+  actions: {
+    SetCurArea({ commit }, data) {
+      commit("SET_CUR_AREA", data);
+    },
+    SetAreaDataList({ commit }, data) {
+      commit("SET_AREA_DATA", data);
+    },
+  },
+};
+
+export default client12345;

src/store/getters.js

@@ -4,4 +4,6 @@ export const getters = {
   token: state => state.user.token,
   accountPwd: state => state.user.accountPwd,
   addRouters: state => state.permission.addRouters,
+  curArea: state => state.client12345.curArea,
+  areaDataList: state => state.client12345.areaDataList
 };

src/store/index.js

@@ -3,6 +3,7 @@ import Vuex from 'vuex'
 import user from './user'
 import newPage from './new-vuex'
 import permission from './permission'
+import client12345 from './client12345'
 import {getters} from './getters'
 
 Vue.use(Vuex);
@@ -11,7 +12,8 @@ export const store = new Vuex.Store({
   modules: {
     user,
     newPage,
-    permission
+    permission,
+    client12345
   },
   getters
 });

src/view/client/12345/AcceptTickets/api.js

@@ -0,0 +1,14 @@
+import {server} from "@/tools/servers"
+
+export class getAcceptTickets{
+  static getList(data){
+    return server.connection('POST','/api/12345/getWorkOrder',data)
+  }
+
+  static getTranferList(data){
+    return server.connection('POST','/api/12345/getWorkOrderCirculationList',data)
+  }
+  static getDetail(data){
+    return server.connection('POST','/api/12345/getWorkOrderDetail',data)
+  }
+}

src/view/client/12345/AcceptTickets/colors.js

@@ -0,0 +1,18 @@
+export default {
+  tooltipLabelBackgroundColor: "#6a7985",
+  // x轴颜色
+  xAxisLineColor: "#A9A9A9",
+  // y轴颜色
+  yAxisLineColor: "#A9A9A9",
+  // 折线颜色
+  seriesColor1: "#3EA3E2", // 折线1
+  seriesColor2: "#5BECF8", // 折线2
+  // 面积图起始位置的颜色
+  areaColorStart1: "#3EA3E2",
+  areaColorStart2: "#5BECF8",
+  // 面积图结束位置的颜色
+  areaColorEnd1: "transparent",
+  areaColorEnd2: "transparent",
+  // y类目轴颜色
+  yAxisSplitLineColor: "rgba(204, 204, 204, 0.2)",
+};

src/view/client/12345/AcceptTickets/index.vue

@@ -0,0 +1,580 @@
+<template>
+  <div class="box">
+    <div class="box-top">
+      <div class="topTitle">工单受理列表</div>
+    </div>
+    <div class="acceptTickets">
+      <el-table
+        ref="scroll_Table"
+        :data="tableData"
+        style="width: 100%"
+        height="100%"
+        :cell-style="{ background: 'transparent' }"
+        @row-click="rowClick"
+      >
+        <el-table-column
+          prop="orderType"
+          label="工单类型"
+          min-width="20"
+          align="center"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="resourceType"
+          label="来源类型"
+          min-width="20"
+          align="center"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="orderTime"
+          label="来电时间"
+          min-width="30"
+          align="center"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="orderPerson"
+          label="来电人"
+          min-width="20"
+          align="center"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="orderTitle"
+          label="来电标题"
+          min-width="20"
+          align="center"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="orderArea"
+          label="来电区域"
+          min-width="20"
+          align="center"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-dialog
+      title="工单受理详情"
+      :visible.sync="dialogVisible"
+      width="80%"
+      :append-to-body="true"
+      :modal="false"
+    >
+      <div class="dialog-top">
+        <div
+          :class="{
+            'top-box-active': curTab === 0,
+            'top-box': curTab !== 0,
+          }"
+          @click="curTab = 0"
+        >
+          基础信息
+        </div>
+        <div
+          :class="{
+            'top-box-active': curTab === 1,
+            'top-box': curTab !== 1,
+          }"
+          @click="curTab = 1"
+        >
+          流转明细
+        </div>
+      </div>
+      <div class="base-info" v-if="curTab === 0">
+        <div class="base-item" :style="{ height: '100%' }">
+          <div class="item-left">来往信息</div>
+          <div class="item-right">
+            <el-row>
+              <el-col :span="8">
+                <div>受理人： {{ detail.handlePerson }}</div>
+              </el-col>
+              <el-col :span="8">
+                <div>来源方式： {{ detail.sourceType }}</div>
+              </el-col>
+              <el-col :span="8">
+                <div>受理类型： {{ detail.acceptType }}</div>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="8">
+                <div>受理时间： {{ detail.acceptDate }}</div>
+              </el-col>
+              <el-col :span="8">
+                <div>转接来源： {{ detail.transferSource }}</div>
+              </el-col>
+              <el-col :span="8">
+                <div>所在地区： {{ detail.orderArea }}</div>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="8">
+                <div>热点分类： {{ detail.hotType }}</div>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+        <div class="base-item" :style="{ height: '100%' }">
+          <div class="item-left">联系人</div>
+          <div class="item-right">
+            <el-row>
+              <el-col :span="8">来电人： {{ detail.callerName }}</el-col>
+              <el-col :span="8">性别： {{ detail.sex }}</el-col>
+              <el-col :span="8">联系电话： {{ detail.callerPhone }}</el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="8">联系地址： {{ detail.callerAddress }}</el-col>
+            </el-row>
+          </div>
+        </div>
+        <div class="base-item" :style="{ height: '100%' }">
+          <div class="item-left">部门</div>
+          <div class="item-right">
+            <el-row>
+              <el-col :span="8">交办部门： {{ detail.assignedDept }}</el-col>
+              <el-col :span="8">交办时间： {{ detail.deliveryTime }}</el-col>
+              <el-col :span="8">办理部门： {{ detail.processDept }}</el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="8">办理时间： {{ detail.processTime }}</el-col>
+              <el-col :span="8">归档部门： {{ detail.archiveDept }}</el-col>
+              <el-col :span="8">归档时间： {{ detail.archiveTime }}</el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="8"
+                >办理时限： {{ detail.processTimeLimit }}</el-col
+              >
+              <el-col :span="8">期满时间： {{ detail.expirationTime }}</el-col>
+            </el-row>
+          </div>
+        </div>
+        <div class="base-item" :style="{ height: '100%' }">
+          <div class="item-left">工单信息</div>
+          <div class="item-right">
+            <el-row>
+              <el-col :span="24">
+                受理标题： {{ detail.acceptanceTitle }}
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                受理内容： {{ detail.acceptanceContent }}
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+        <div class="base-item" :style="{ height: '100%' }">
+          <div class="item-left"></div>
+          <div class="item-right">
+            <el-row>
+              <el-col :span="24">中心意见： {{ detail.centralOpinion }}</el-col>
+            </el-row>
+          </div>
+        </div>
+        <div class="base-item" :style="{ height: '100%' }">
+          <div class="item-left"></div>
+          <div class="item-right">
+            <el-row>
+              <el-col :span="24"
+                >承办意见： {{ detail.undertakOpinions }}</el-col
+              >
+            </el-row>
+          </div>
+        </div>
+        <div class="base-item" :style="{ height: '100%' }">
+          <div class="item-left"></div>
+          <div class="item-right">
+            <el-row>
+              <el-col :span="24">退回意见： {{ detail.returnOpinion }}</el-col>
+            </el-row>
+          </div>
+        </div>
+      </div>
+      <div class="transfer-info" v-else>
+        <el-table
+          :data="transferTableData"
+          :cell-style="{ background: 'transparent' }"
+          @row-click="rowClick"
+        >
+          <el-table-column
+            prop="setTime"
+            label="建立时间"
+            min-width="20"
+            align="center"
+            show-overflow-tooltip
+          >
+          </el-table-column>
+          <el-table-column
+            prop="currentNode"
+            label="当前节点"
+            min-width="20"
+            align="center"
+            show-overflow-tooltip
+          >
+          </el-table-column>
+          <el-table-column
+            prop="handoverDept"
+            label="接办部门"
+            min-width="30"
+            align="center"
+            show-overflow-tooltip
+          >
+          </el-table-column>
+          <el-table-column
+            prop="transactors"
+            label="办理人"
+            min-width="20"
+            align="center"
+            show-overflow-tooltip
+          >
+          </el-table-column>
+          <el-table-column
+            prop="processTime"
+            label="办理时间"
+            min-width="20"
+            align="center"
+            show-overflow-tooltip
+          >
+          </el-table-column>
+          <el-table-column
+            prop="timeLimit"
+            label="时限"
+            min-width="20"
+            align="center"
+            show-overflow-tooltip
+          >
+          </el-table-column>
+          <el-table-column
+            prop="flowStatus"
+            label="流转状态"
+            min-width="20"
+            align="center"
+            show-overflow-tooltip
+          >
+          </el-table-column>
+        </el-table>
+        <!-- <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="300"
+          @current-change="transferPageChange"
+        >
+        </el-pagination> -->
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getAcceptTickets } from "./api";
+export default {
+  data() {
+    return {
+      tableData: [],
+      transferTableData: [],
+      transferTotal: 0,
+      scrolltimer: null,
+      dialogVisible: false,
+      curTab: 0,
+      detail: {},
+    };
+  },
+  mounted() {
+    this.getTableData();
+    // this.autoScroll();
+
+    const scrollTable = this.$refs.scroll_Table.bodyWrapper;
+    if (scrollTable) {
+      scrollTable.addEventListener("mouseover", () => {
+        clearInterval(this.scrolltimer);
+        this.intervalId = null;
+      });
+
+      scrollTable.addEventListener("mouseout", () => {
+        this.autoScroll();
+      });
+    }
+  },
+  beforeDestroy() {
+    this.autoScroll(true);
+  },
+  methods: {
+    getTableData() {
+      getAcceptTickets.getList({ pageNum: 1, pageSize: 10 }).then((res) => {
+        const { code, pageMessage, result } = res.data;
+        if (code === 200) {
+          this.transferTotal = pageMessage.total;
+          this.tableData = result;
+        }
+      });
+      this.autoScroll();
+    },
+    autoScroll(stop) {
+      const table = this.$refs.scroll_Table;
+      const divData = table.bodyWrapper;
+
+      if (stop) {
+        window.clearInterval(this.scrolltimer);
+      } else {
+        this.scrolltimer = window.setInterval(() => {
+          divData.scrollTop += 1;
+          if (
+            divData.clientHeight + divData.scrollTop ==
+            divData.scrollHeight
+          ) {
+            divData.scrollTop = 0;
+          }
+        }, 200);
+      }
+    },
+    rowClick(row) {
+      getAcceptTickets.getDetail({ id: row.id }).then((res) => {
+        const { code, result } = res.data;
+        if (code === 200) {
+          this.detail = { ...result };
+          this.dialogVisible = true;
+        }
+      });
+      getAcceptTickets
+        .getTranferList({ pageNum: 1, pageSize: 10 })
+        .then((res) => {
+          const { code, result } = res.data;
+          if (code === 200) {
+            this.transferTableData = result;
+          }
+        });
+    },
+    // transferPageChange(page) {
+    //   getAcceptTickets
+    //     .getTranferList({ pageNum: page, pageSize: 10 })
+    //     .then((res) => {
+    //       const { code, result } = res.data;
+    //       if (code === 200) {
+    //         this.transferTableData = result;
+    //       }
+    //     });
+    // },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.box {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  height: 100%;
+  box-sizing: border-box;
+
+  .box-top {
+    width: 100%;
+    height: 30px;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1vh;
+    .topTitle {
+      padding-left: 10px;
+      margin-left: 10px;
+      border-left: solid 10px #02fffd;
+      height: 100%;
+      line-height: 30px;
+      font-size: calc(100vw * 18 / 1920);
+      color: white;
+    }
+  }
+
+  .acceptTickets {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .acceptTickets /deep/ .el-table {
+    background-color: transparent;
+    color: #3e7aa3;
+    font-size: calc(100vw * 12 / 1920);
+  }
+
+  .acceptTickets /deep/ .el-table tr {
+    background-color: transparent;
+  }
+  .acceptTickets /deep/ .el-table th {
+    background-color: transparent;
+  }
+  .acceptTickets /deep/ .el-table td {
+    background-color: transparent;
+    border-bottom: 0px solid #dfe6ec;
+  }
+  .acceptTickets /deep/ .el-table--enable-row-transition .el-table__body td,
+  .el-table .cell {
+    background-color: transparent;
+  }
+
+  .acceptTickets /deep/ .el-table__row > td {
+    border: none;
+  }
+
+  .acceptTickets /deep/ .el-table th.is-leaf {
+    border: none;
+  }
+
+  .acceptTickets /deep/ .el-table::before {
+    height: 0;
+  }
+
+  .acceptTickets ::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+  }
+}
+/deep/ .el-dialog {
+  background-color: #010d1d;
+  // background-color: #8f8fce;
+}
+/deep/ .el-dialog__body {
+  padding: 10px 20px;
+}
+/deep/ .el-dialog__title {
+  color: #00fefd;
+}
+.dialog-top {
+  display: flex;
+  margin-bottom: 2px;
+
+  .top-box {
+    width: 6vw;
+    height: 3vh;
+    line-height: 3vh;
+    text-align: center;
+    background: #174350;
+    border: solid 1px #1e6b75;
+    color: #0cfee1;
+  }
+  .top-box-active {
+    width: 6vw;
+    height: 3vh;
+    line-height: 3vh;
+    text-align: center;
+    background: #4abdc4;
+    border: solid 1px #1e6b75;
+    color: #ffffff;
+  }
+}
+.base-info {
+  width: 100%;
+
+  .base-item {
+    display: flex;
+    border: solid 1px #135055;
+    .item-left {
+      width: 20px;
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      justify-content: center;
+      border-right: solid 1px #135055;
+      background: #153949;
+      text-align: center;
+    }
+    .item-right {
+      width: calc(100% - 20px);
+      height: 100%;
+      color: #637078;
+    }
+  }
+}
+
+.transfer-info {
+  max-height: 60vh;
+  overflow-y: scroll;
+
+  /deep/ .el-table {
+    background-color: transparent;
+    color: #3e7aa3;
+  }
+
+  /deep/ .el-table tr {
+    background-color: transparent;
+  }
+  /deep/ .el-table th {
+    background-color: #133848;
+    color: #0cfee1;
+    border: solid 1px #1e6b75;
+  }
+
+  /deep/ .el-table td {
+    background-color: transparent;
+  }
+  /deep/ .el-table--enable-row-transition .el-table__body td,
+  .el-table .cell {
+    background-color: transparent;
+  }
+
+  /deep/ .el-table__row > td {
+    border: none;
+    border-bottom: solid 1px #1e6b75;
+    border-right: solid 1px #1e6b75;
+  }
+  /deep/ .el-table__row > td:last-child {
+    border: none;
+    border-bottom: solid 1px #1e6b75;
+  }
+
+  /deep/ .el-table th.el-table__cell {
+    padding: 6px 0;
+  }
+
+  /deep/ .el-table td.el-table__cell {
+    padding: 6px 0;
+  }
+
+  /deep/ .el-table::before {
+    height: 0;
+  }
+
+  ::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+  }
+
+  // /deep/ .el-pagination.is-background .el-pager li {
+  //   background: red;
+  // }
+}
+.transfer-info::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+}
+
+.el-row {
+  margin: 10px 0;
+}
+.el-col {
+  padding: 0 20px;
+  border-radius: 4px;
+}
+.bg-purple-dark {
+  background: #99a9bf;
+}
+.bg-purple {
+  background: #d3dce6;
+}
+.bg-purple-light {
+  background: #e5e9f2;
+}
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
+</style>

src/view/client/12345/AcceptanceAppeal.vue

@@ -1,8 +1,6 @@
 <template>
   <div style="width:100%;height:100%;">
     <div class="title" v-if="isTrue">
-      <!--<div class="circle">-->
-      <!--</div>-->
       &nbsp;受理诉求分类统计
     </div>
     <div class="title" v-if="isTrue === false">

src/view/client/12345/CenterMap/api.js

@@ -0,0 +1,7 @@
+import {server} from "@/tools/servers"
+
+export class getAreaData{
+  static getList(data){
+    return server.connection('POST','/api/12345/getCurrentAreaHotlineAcceptance',data)
+  }
+}

src/view/client/12345/CenterMap/index.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="box">
+    <div id="map"></div>
+  </div>
+</template>
+
+<script>
+import { getAreaData } from "./api";
+import bazhong from "./baZhongMap.json";
+import { store } from "@/store";
+export default {
+  data() {
+    return {
+      year: 2024,
+      xData: [],
+      yData: [],
+      mapList: ["南江县", "通江县", "平昌县", "巴州区", "恩阳区"],
+      curIndex: 0,
+      intervalId: null,
+      time: 3000,
+      areaDataList: [],
+    };
+  },
+  mounted() {
+    this.getChartData();
+  },
+  unmounted() {
+    clearInterval(this.intervalId);
+  },
+  methods: {
+    getChartData() {
+      const now = new Date();
+      this.year = now.getFullYear();
+      getAreaData
+        .getList({
+          year: this.year,
+        })
+        .then((res) => {
+          const { code, result } = res.data;
+          if (code === 200) {
+            this.areaDataList = result.map((item) => {
+              return {
+                name: item.districtName,
+                value: this.mapList.indexOf(item.districtName),
+                acceptCount: item.acceptCount,
+                processCount: item.processCount,
+              };
+            });
+            this.areaDataList.push({ name: "市本级", value: 5 });
+            this.initChart();
+          }
+        });
+    },
+    initChart() {
+      this.myChart = this.$echarts.init(document.getElementById("map"));
+      this.$echarts.registerMap("BaZhong", bazhong);
+      let option = {
+        animation: false,
+        tooltip: {
+          trigger: "item",
+          formatter(param) {
+            console.log("param.data.name", param);
+            return `${param.data.name}<br>受理量：${param.data.acceptCount}<br>交办量：${param.data.processCount}`;
+            // return `${param.data.name}`;
+          },
+        },
+        series: [
+          {
+            y: "30",
+            type: "map",
+            map: "BaZhong",
+            itemStyle: {
+              // 高亮效果(hover)
+              emphasis: {
+                areaColor: "#5ce0d9",
+              },
+              // 默认效果
+              normal: {
+                borderColor: "#ffffff",
+                borderWidth: 2,
+                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: "50%",
+                      color: "#f45197",
+                      top: "12",
+                    },
+                  },
+                },
+              },
+            },
+            data: this.areaDataList,
+            label: {
+              // 高亮效果(hover)
+              emphasis: {
+                itemStyle: {
+                  color: "#5ce0d9",
+                },
+              },
+              // 默认效果
+              normal: {
+                show: true,
+                textStyle: {
+                  fontWeight: "bold",
+                  fontSize: "60%",
+                  color: "#ffffff",
+                },
+                formatter: function (param) {
+                  // if (param.name === '巴州区')
+                  //   return '{a|' + '市本级●\n\n' + '}' + param.name;
+                  if (param.name === "市本级")
+                    return "{a|" + "\n\n\n市本级●" + "}";
+                  else return param.name;
+                },
+                rich: {
+                  a: {
+                    fontWeight: "bold",
+                    fontSize: "50%",
+                    color: "#f45197",
+                    top: "12",
+                  },
+                },
+              },
+            },
+          },
+        ],
+        dataRange: {
+          x: "-1000 px",
+          y: "-1000 px",
+          splitList: [
+            { start: 0, end: 0, label: "南江县", color: "#60A4CF" },
+            { start: 1, end: 1, label: "通江县", color: "#4498CF" },
+            { start: 2, end: 2, label: "平昌县", color: "#3B94D0" },
+            { start: 3, end: 3, label: "巴州区", color: "#81B1D0" },
+            { start: 4, end: 4, label: "恩阳区", color: "#208AD0" },
+          ],
+        },
+      };
+      this.myChart.setOption(option);
+
+      this.startInterval();
+
+      this.myChart.on("mouseover", () => {
+        console.log("清除计时器", this.curIndex);
+        clearInterval(this.intervalId);
+        this.intervalId = null;
+        this.cancelHighlightRegion(this.curIndex);
+      });
+
+      this.myChart.on("mouseout", () => {
+        this.startInterval();
+      });
+    },
+    highlightRegion(index) {
+      this.myChart.dispatchAction({
+        type: "highlight",
+        seriesIndex: 0,
+        name: this.mapList[index],
+      });
+      this.myChart.dispatchAction({
+        type: "showTip",
+        seriesIndex: 0,
+        name: this.mapList[index],
+      });
+    },
+    cancelHighlightRegion(index) {
+      this.myChart.dispatchAction({
+        type: "downplay",
+        seriesIndex: 0,
+        name: this.mapList[index],
+      });
+      this.myChart.dispatchAction({
+        type: "hideTip",
+      });
+    },
+    startInterval() {
+      clearInterval(this.intervalId);
+      this.highlightRegion(this.curIndex);
+      this.intervalId = setInterval(() => {
+        this.curIndex++;
+        this.curIndex = this.curIndex % this.mapList.length;
+
+        store.dispatch("SetCurArea", this.curIndex);
+
+        if (this.curIndex == 0) {
+          this.cancelHighlightRegion(this.mapList.lengt - 1);
+        } else {
+          this.cancelHighlightRegion(this.curIndex - 1);
+        }
+
+        this.highlightRegion(this.curIndex);
+      }, this.time);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.box {
+  width: 100%;
+  height: 100%;
+}
+#map {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/view/client/12345/CenterTop/api.js

@@ -0,0 +1,7 @@
+import {server} from "@/tools/servers"
+
+export class getAreaData{
+  static getList(data){
+    return server.connection('POST','/api/12345/getCurrentAreaHotlineAcceptance',data)
+  }
+}

src/view/client/12345/CenterTop/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="box">
+    <div class="box-item">
+      <div class="item-top">
+        {{ areaDataList[curArea.area].acceptCount }}
+        <span style="font-size: 0.75rem; font-family: 'Microsoft YaHei'"
+          >个</span
+        >
+      </div>
+      <img src="@/assets/images/baseImg.png" class="item-img" />
+      <div class="item-bottom">受理量</div>
+    </div>
+    <div class="box-item">
+      <div class="item-top">
+        {{ areaDataList[curArea.area].processCount }}
+        <span style="font-size: 0.75rem; font-family: 'Microsoft YaHei'"
+          >个</span
+        >
+      </div>
+      <img src="@/assets/images/baseImg.png" class="item-img" />
+      <div class="item-bottom">交办量</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getAreaData } from "./api";
+import { store } from "@/store";
+export default {
+  data() {
+    return {
+      tableData: [],
+      curArea: 0,
+      areaDataList: [
+        {
+          acceptCount: 0,
+          districtName: "南江县",
+          id: 1,
+          processCount: 0,
+          statDate: "2024",
+        },
+      ],
+    };
+  },
+  mounted() {
+    const { curArea } = store.getters;
+    this.curArea = curArea;
+    this.getChartData();
+  },
+  methods: {
+    getChartData() {
+      const now = new Date();
+      this.year = now.getFullYear();
+      getAreaData
+        .getList({
+          year: this.year,
+        })
+        .then((res) => {
+          const { code, result } = res.data;
+          if (code === 200) {
+            const order = ["南江县", "通江县", "平昌县", "巴州区", "恩阳区"];
+            this.areaDataList = result.sort((a, b) => {
+              return (
+                order.indexOf(a.districtName) - order.indexOf(b.districtName)
+              );
+            });
+          }
+        });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.box {
+  display: flex;
+  padding: 10px;
+  height: 100%;
+  box-sizing: border-box;
+}
+.box-item {
+  width: 50%;
+  height: 100%;
+  text-align: center;
+}
+.item-top {
+  color: #7bbbdc;
+  font-size: 1.125rem;
+}
+.item-bottom {
+  color: #7bbbdc;
+  font-size: 1.125rem;
+  font-weight: 600;
+  font-family: "Microsoft YaHei";
+}
+.item-img {
+  width: 5vw;
+  height: 5vh;
+}
+</style>

src/view/client/12345/CountySituation/api.js

@@ -0,0 +1,7 @@
+import {server} from "@/tools/servers"
+
+export class getCountySituation {
+  static getList(data){
+    return server.connection('POST','/api/12345/getHotlineDistrictAcceptInfo',data)
+  }
+}

src/view/client/12345/CountySituation/colors.js

@@ -0,0 +1,24 @@
+export default {
+  tooltipLabelBackgroundColor: "#6a7985",
+  // x轴颜色
+  xAxisLineColor: "#fff",
+  // y轴颜色
+  yAxisLineColor: "#fff",
+  // 折线颜色
+  seriesColor1: "#8763f3", // 折线1
+  seriesColor2: "#8763f3", // 折线2
+  // 面积图起始位置的颜色
+  areaColorStart1: "blue",
+  areaColorStart2: "blue",
+  // 面积图结束位置的颜色
+  areaColorEnd1: "transparent",
+  areaColorEnd2: "transparent",
+  // y类目轴颜色
+  yAxisSplitLineColor: "rgba(204, 204, 204, 0.2)",
+  // 柱子颜色
+  barColor1: "#0099D7",
+  barColor2: "#7766FE",
+  barColor3: "#0066EE",
+  // 柱子顶部文字颜色
+  barTopTextColor: "#fff",
+};

src/view/client/12345/CountySituation/index.vue

@@ -0,0 +1,263 @@
+<template>
+  <div class="box">
+    <div class="box-top">
+      <div class="topTitle">各县(市、区)办件情况</div>
+      <!-- <div class="topSelect">
+        <button
+          :class="{
+            'bt-active': analyseType === 0,
+            'bt-style': analyseType !== 0,
+          }"
+          @click="changeAnalyseType(0)"
+        >
+          前五名
+        </button>
+        <button
+          :class="{
+            'bt-active': analyseType === 1,
+            'bt-style': analyseType !== 1,
+          }"
+          @click="changeAnalyseType(1)"
+        >
+          后五名
+        </button>
+      </div> -->
+    </div>
+    <div class="box-bottom">
+      <div id="countySituation"></div>
+      <div class="bottom-right">
+        <div class="right-item" v-for="(item, index) in yData" :key="item">
+          <span style="color: #008fcb">{{ x1Reverse[index] }}</span>
+          <span style="color: #6d5dec">{{ x2Reverse[index] }}</span>
+          <span style="color: #0060e3">{{ x3Reverse[index] }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCountySituation } from "./api";
+import colors from "./colors";
+export default {
+  data() {
+    return {
+      analyseType: 0,
+      year: 2024,
+      yData: ["恩阳区", "巴州区", "平昌县", "南江县", "通江县"],
+      xData: {
+        x1: [20, 30, 20, 30, 20],
+        x2: [15, 35, 20, 15, 15],
+        x3: [0, 5, 0, 0, 2],
+      },
+    };
+  },
+  computed: {
+    x1Reverse() {
+      return this.xData.x1.slice().reverse();
+    },
+    x2Reverse() {
+      return this.xData.x2.slice().reverse();
+    },
+    x3Reverse() {
+      return this.xData.x3.slice().reverse();
+    },
+  },
+  mounted() {
+    this.getChartData();
+    // this.initChart();
+  },
+  methods: {
+    changeAnalyseType(num) {
+      this.analyseType = num;
+    },
+    getChartData() {
+      const now = new Date();
+      this.year = now.getFullYear();
+      getCountySituation
+        .getList({
+          // analyseType: this.analyseType,
+          year: this.year,
+        })
+        .then((res) => {
+          const { code, result } = res.data;
+          if (code === 200) {
+            console.log(res, "先付");
+            this.yData = result.xaxisData;
+            this.xData.x1 = result.yaxisData["已办"];
+            this.xData.x2 = result.yaxisData["待办"];
+            this.xData.x3 = result.yaxisData["超期"];
+            this.initChart();
+          }
+        });
+    },
+    initChart() {
+      console.log("执行init");
+      this.myChart = this.$echarts.init(
+        document.getElementById("countySituation")
+      );
+      const option = {
+        grid: {
+          top: "15%",
+          bottom: "15%",
+        },
+        legend: {
+          data: ["已办", "待办", "超期"],
+          top: "5%",
+          right: "5%",
+          textStyle: {
+            color: "#fff",
+          },
+        },
+        xAxis: {
+          type: "value",
+          // 网格线
+          splitLine: {
+            show: false,
+          },
+          // 坐标轴线
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: colors.yAxisLineColor,
+            },
+          },
+          // 坐标轴刻度线
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: [
+          {
+            type: "category",
+            data: this.yData,
+            // 坐标轴线
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: colors.xAxisLineColor,
+              },
+            },
+            // 坐标轴刻度线
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              interval: 0,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "已办",
+            type: "bar",
+            data: this.xData.x1,
+            barWidth: "15%",
+            // label: {
+            //   show: true,
+            //   position: "top",
+            //   color: colors.barTopTextColor,
+            // },
+            itemStyle: { color: colors.barColor1 },
+          },
+          {
+            name: "待办",
+            type: "bar",
+            data: this.xData.x2,
+            barWidth: "15%",
+            // label: {
+            //   show: true,
+            //   position: "top",
+            //   color: colors.barTopTextColor,
+            // },
+            itemStyle: { color: colors.barColor2 },
+          },
+          {
+            name: "超期",
+            type: "bar",
+            data: this.xData.x3,
+            barWidth: "15%",
+            // label: {
+            //   show: true,
+            //   position: "top",
+            //   color: colors.barTopTextColor,
+            // },
+            itemStyle: { color: colors.barColor3 },
+            barCategoryGap: "20%",
+            barGap: "100%",
+          },
+        ],
+      };
+      this.myChart.setOption(option);
+    },
+    getIndex(item) {
+      return this.yData.reverse().indexOf(item);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.box {
+  height: 100%;
+  padding: 10px;
+}
+.box-top {
+  width: 100%;
+  height: 30px;
+  display: flex;
+  justify-content: space-between;
+  /* background: red; */
+}
+.box-bottom {
+  width: 100%;
+  height: calc(100% - 30px);
+  display: flex;
+  justify-content: space-between;
+}
+.bottom-right {
+  width: 30%;
+  height: 100%;
+}
+.right-item {
+  border: solid 1px #162547;
+  border-radius: 3px;
+  color: white;
+  height: 12%;
+  margin: 3% 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+.right-item:first-child {
+  margin-top: 15%;
+}
+.topTitle {
+  padding-left: 10px;
+  margin-left: 10px;
+  border-left: solid 10px #02fffd;
+  height: 100%;
+  line-height: 30px;
+  font-size: calc(100vw * 18 / 1920);
+  color: white;
+}
+#countySituation {
+  width: 70%;
+  height: 100%;
+}
+.bt-style {
+  color: #2b6390;
+  border: #2b6390 1px solid;
+  background: transparent;
+  line-height: 30px;
+  font-size: calc(100vw * 18 / 1920);
+  height: 30px;
+}
+.bt-active {
+  background: #007dc7;
+  color: #fff;
+  line-height: 30px;
+  font-size: calc(100vw * 18 / 1920);
+  height: 30px;
+}
+</style>

src/view/client/12345/LeftTitle/api.js

@@ -0,0 +1,7 @@
+import {server} from "@/tools/servers"
+
+export class getHistoryAcceptCount {
+  static getList(data){
+    return server.connection('POST','/api/12345/getHistoryAcceptCount')
+  }
+}

src/view/client/12345/LeftTitle/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="box">
+    <div class="top-left-box">
+      <div class="top-left-num" style="color: #80f2ad">{{ monthData }}</div>
+      <div class="top-left-text">本月接件量</div>
+    </div>
+    <div class="top-left-box">
+      <div class="top-left-num" style="color: #00fdff">{{ yearData }}</div>
+      <div class="top-left-text">本年接件量</div>
+    </div>
+    <div class="top-left-box">
+      <div class="top-left-num" style="color: #34a4ee">{{ historyData }}</div>
+      <div class="top-left-text">累计接件量</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getHistoryAcceptCount } from "./api";
+export default {
+  data() {
+    return {
+      historyData: 0,
+      monthData: 0,
+      yearData: 0,
+    };
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      getHistoryAcceptCount.getList().then((res) => {
+        const { code, result } = res.data;
+        if (code === 200) {
+          this.historyData = result.historyCount;
+          this.monthData = result.currentMonthCount;
+          this.yearData = result.currentYearCount;
+        }
+        console.log(res, "data");
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.box {
+  display: flex;
+}
+.top-left-box {
+  margin: 0 20px;
+  text-align: center;
+}
+
+.top-left-num {
+  font-size: 1.375rem;
+  font-weight: bold;
+}
+
+.top-left-text {
+  font-size: 0.75rem;
+  color: #488197;
+}
+</style>

src/view/client/12345/Municipal/api.js

@@ -0,0 +1,7 @@
+import {server} from "@/tools/servers"
+
+export class getMunicipal {
+  static getList(data){
+    return server.connection('POST','/api/12345/getMunicipalDeptAcceptInfo',data)
+  }
+}

src/view/client/12345/Municipal/colors.js

@@ -0,0 +1,24 @@
+export default {
+  tooltipLabelBackgroundColor: "#6a7985",
+  // x轴颜色
+  xAxisLineColor: "#fff",
+  // y轴颜色
+  yAxisLineColor: "#fff",
+  // 折线颜色
+  seriesColor1: "#8763f3", // 折线1
+  seriesColor2: "#8763f3", // 折线2
+  // 面积图起始位置的颜色
+  areaColorStart1: "blue",
+  areaColorStart2: "blue",
+  // 面积图结束位置的颜色
+  areaColorEnd1: "transparent",
+  areaColorEnd2: "transparent",
+  // y类目轴颜色
+  yAxisSplitLineColor: "rgba(204, 204, 204, 0.2)",
+  // 柱子颜色
+  barColor1: "#0099D7",
+  barColor2: "#7766FE",
+  barColor3: "#0066EE",
+  // 柱子顶部文字颜色
+  barTopTextColor: "#fff",
+};

src/view/client/12345/Municipal/index.vue

@@ -0,0 +1,235 @@
+<template>
+  <div class="box">
+    <div class="box-top">
+      <div class="topTitle">市级各部门办件情况</div>
+      <div class="topSelect">
+        <button
+          :class="{
+            'bt-active': analyseType === 1,
+            'bt-style': analyseType !== 1,
+          }"
+          @click="changeAnalyseType(1)"
+        >
+          超期前5
+        </button>
+        <button
+          :class="{
+            'bt-active': analyseType === 0,
+            'bt-style': analyseType !== 0,
+          }"
+          @click="changeAnalyseType(0)"
+        >
+          已办前5
+        </button>
+      </div>
+    </div>
+    <div id="municipal"></div>
+  </div>
+</template>
+
+<script>
+import { getMunicipal } from "./api";
+import colors from "./colors";
+export default {
+  data() {
+    return {
+      analyseType: 0,
+      year: 2024,
+      xData: ["恩阳区", "巴州区", "平昌县", "南江县", "通江县"],
+      yData: {
+        y1: [20, 30, 20, 30, 20],
+        y2: [15, 35, 20, 15, 15],
+        y3: [0, 5, 0, 0, 2],
+      },
+    };
+  },
+  mounted() {
+    this.getChartData();
+    // this.initChart();
+  },
+  methods: {
+    changeAnalyseType(num) {
+      this.analyseType = num;
+      this.getChartData();
+    },
+    getChartData() {
+      const now = new Date();
+      this.year = now.getFullYear();
+      getMunicipal
+        .getList({
+          analyseType: this.analyseType,
+          year: this.year,
+        })
+        .then((res) => {
+          const { code, result } = res.data;
+          if (code === 200) {
+            this.xData = result.xaxisData;
+            this.yData.y1 = result.yaxisData["已办"];
+            this.yData.y2 = result.yaxisData["待办"];
+            this.yData.y3 = result.yaxisData["超期"];
+            this.initChart();
+          }
+        });
+    },
+    initChart() {
+      console.log("执行init");
+      this.myChart = this.$echarts.init(document.getElementById("municipal"));
+      const option = {
+        legend: {
+          data: ["已办", "待办", "超期"],
+          textStyle: {
+            color: "#fff",
+          },
+        },
+        grid: {
+          top: "20%",
+          right: "0%",
+          bottom: "10%",
+        },
+        xAxis: {
+          data: this.xData,
+          // 坐标轴线
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: colors.xAxisLineColor,
+            },
+          },
+          // 坐标轴刻度线
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0,
+            // formatter: function (value) {
+            //   var ret = ""; //拼接加\n返回的类目项
+            //   var maxLength = 4; //每项显示文字个数
+            //   var valLength = value.length; //X轴类目项的文字个数
+            //   var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+            //   if (rowN > 1) {
+            //     //如果类目项的文字大于5,
+            //     for (var i = 0; i < rowN; i++) {
+            //       var temp = ""; //每次截取的字符串
+            //       var start = i * maxLength; //开始截取的位置
+            //       var end = start + maxLength; //结束截取的位置
+            //       //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
+            //       temp = value.substring(start, end) + "\n";
+            //       ret += temp; //凭借最终的字符串
+            //     }
+            //     return ret;
+            //   } else {
+            //     return value;
+            //   }
+            // },
+          },
+        },
+        yAxis: [
+          {
+            type: "value",
+            // 网格线
+            splitLine: {
+              show: false,
+            },
+            // 坐标轴线
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: colors.yAxisLineColor,
+              },
+            },
+            // 坐标轴刻度线
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "已办",
+            type: "bar",
+            data: this.yData.y1,
+            barWidth: "10%",
+            label: {
+              show: true,
+              position: "top",
+              color: colors.barTopTextColor,
+            },
+            itemStyle: { color: colors.barColor1 },
+          },
+          {
+            name: "待办",
+            type: "bar",
+            data: this.yData.y2,
+            barWidth: "10%",
+            label: {
+              show: true,
+              position: "top",
+              color: colors.barTopTextColor,
+            },
+            itemStyle: { color: colors.barColor2 },
+          },
+          {
+            name: "超期",
+            type: "bar",
+            data: this.yData.y3,
+            barWidth: "10%",
+            label: {
+              show: true,
+              position: "top",
+              color: colors.barTopTextColor,
+            },
+            itemStyle: { color: colors.barColor3 },
+            barCategoryGap: "20%",
+            barGap: "150%",
+          },
+        ],
+      };
+      this.myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.box {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  height: 100%;
+  box-sizing: border-box;
+}
+.box-top {
+  width: 100%;
+  height: 30px;
+  display: flex;
+  justify-content: space-between;
+}
+.topTitle {
+  padding-left: 10px;
+  margin-left: 10px;
+  border-left: solid 10px #02FFFD;
+  height: 100%;
+  line-height: 30px;
+  font-size: calc(100vw * 18 / 1920);
+  color: white;
+}
+#municipal {
+  flex: 1;
+}
+.bt-style {
+  color: #2b6390;
+  border: #2b6390 1px solid;
+  background: transparent;
+  line-height: 30px;
+  font-size: 1.125rem;
+  height: 30px;
+}
+.bt-active {
+  background: #007dc7;
+  color: #fff;
+  line-height: 30px;
+  font-size: 1.125rem;
+  height: 30px;
+  border: none;
+}
+</style>

src/view/client/12345/RiskTrend/api.js

@@ -0,0 +1,7 @@
+import {server} from "@/tools/servers"
+
+export class getRiskTrendData{
+  static getList(){
+    return server.connection('POST','/api/12345/getRecentlyAcceptCountTrend')
+  }
+}

src/view/client/12345/RiskTrend/colors.js

@@ -0,0 +1,18 @@
+export default {
+  tooltipLabelBackgroundColor: "#6a7985",
+  // x轴颜色
+  xAxisLineColor: "#A9A9A9",
+  // y轴颜色
+  yAxisLineColor: "#A9A9A9",
+  // 折线颜色
+  seriesColor1: "#3EA3E2", // 折线1
+  seriesColor2: "#5BECF8", // 折线2
+  // 面积图起始位置的颜色
+  areaColorStart1: "#3EA3E2",
+  areaColorStart2: "#5BECF8",
+  // 面积图结束位置的颜色
+  areaColorEnd1: "rgba(62, 163, 226, 0.05)",
+  areaColorEnd2: "transparent",
+  // y类目轴颜色
+  yAxisSplitLineColor: "rgba(204, 204, 204, 0.2)",
+};

src/view/client/12345/RiskTrend/index.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="box">
+    <div id="riskTrend"></div>
+  </div>
+</template>
+
+<script>
+import { getRiskTrendData } from "./api";
+import colors from "./colors";
+export default {
+  data() {
+    return {
+      xData: [],
+      yData: [10, 15, 10, 12, 20, 15, 10, 15, 10, 12, 20, 15],
+    };
+  },
+  mounted() {
+    this.getChartData();
+    // this.initChart();
+  },
+  methods: {
+    getChartData() {
+      getRiskTrendData.getList().then((res) => {
+        const { code, result } = res.data;
+        if (code === 200) {
+          this.xData = result.xaxisData;
+          this.yData = result.yaxisData;
+          this.initChart();
+        }
+        console.log(res, "data");
+      });
+    },
+    initChart() {
+      this.myChart = this.$echarts.init(document.getElementById("riskTrend"));
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: colors.tooltipLabelBackgroundColor,
+            },
+          },
+        },
+        // toolbox: {
+        //   feature: {
+        //     saveAsImage: {},
+        //   },
+        // },
+        grid: {
+          left: "2%",
+          right: "3%",
+          bottom: "2%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "一月",
+              "二月",
+              "三月",
+              "四月",
+              "五月",
+              "六月",
+              "七月",
+              "八月",
+              "九月",
+              "十月",
+              "十一月",
+              "十二月",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: colors.xAxisLineColor,
+              },
+            },
+            axisLabel: {
+              interval: 0,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "\次",
+            type: "value",
+            // 网格线
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: colors.yAxisSplitLineColor,
+              },
+            },
+            // 坐标轴线
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: colors.yAxisLineColor,
+              },
+            },
+            // 坐标轴刻度线
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            // name: "1",
+            type: "line",
+            // stack: "Total",
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: colors.areaColorStart1, // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: colors.areaColorEnd1, // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: this.yData,
+            symbol: "circle",
+            itemStyle: {
+              color: colors.seriesColor1, //改变折线点的颜色
+            },
+            lineStyle: {
+              color: colors.seriesColor1, //改变折线颜色
+            },
+          },
+          // {
+          //   name: "2",
+          //   type: "line",
+          //   // stack: "Total",
+          //   areaStyle: {
+          //     color: {
+          //       type: "linear",
+          //       x: 0,
+          //       y: 0,
+          //       x2: 0,
+          //       y2: 1,
+          //       colorStops: [
+          //         {
+          //           offset: 0,
+          //           color: colors.areaColorStart2, // 0% 处的颜色
+          //         },
+          //         {
+          //           offset: 1,
+          //           color: colors.areaColorEnd2, // 100% 处的颜色
+          //         },
+          //       ],
+          //       global: false, // 缺省为 false
+          //     },
+          //   },
+          //   emphasis: {
+          //     focus: "series",
+          //   },
+          //   data: this.yData.map((item) => item + 50),
+          //   itemStyle: {
+          //     normal: {
+          //       color: colors.seriesColor2, //改变折线点的颜色
+          //       lineStyle: {
+          //         color: colors.seriesColor2, //改变折线颜色
+          //       },
+          //     },
+          //   },
+          // },
+        ],
+      };
+      this.myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.box {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  height: 100%;
+  box-sizing: border-box;
+}
+#riskTrend {
+  flex: 1;
+}
+</style>

src/view/client/12345/TicketsSource/api.js

@@ -0,0 +1,7 @@
+import {server} from "@/tools/servers"
+
+export class getTicketsSource {
+  static getList(){
+    return server.connection('POST','/api/12345/getWorkOrderResourceType')
+  }
+}

src/view/client/12345/TicketsSource/colors.js

@@ -0,0 +1,13 @@
+export default {
+  // 南丁格尔玫瑰花瓣颜色
+  pieColors: [
+    "#546FC6",
+    "#92CD76",
+    "#FAC958",
+    "#EF6667",
+    "#73C0E0",
+    "#3AA271",
+    "#FB8450",
+    "#9C60B5",
+  ],
+};

src/view/client/12345/TicketsSource/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="box">
+    <div class="box-top">
+      <div class="topTitle">工单来源统计</div>
+    </div>
+    <div id="ticketsSource"></div>
+  </div>
+</template>
+
+<script>
+import { getTicketsSource } from "./api";
+import colors from "./colors";
+export default {
+  data() {
+    return {
+      year: 2024,
+      map: [
+        {name:'南江县',value: 20,itemStyle:{color: "#546FC6"}},
+        {name:'通江县',value: 15,itemStyle:{color: "#92CD76"}},
+        {name:'平昌县',value: 15,itemStyle:{color: "#FAC958"}},
+        {name:'巴州区',value: 10,itemStyle:{color: "#EF6667"}},
+        {name:'恩阳区',value: 5,itemStyle:{color: "#73C0E0"}}
+      ],
+    };
+  },
+  mounted() {
+    this.getChartData();
+    // this.initChart();
+  },
+  methods: {
+    getChartData() {
+      const now = new Date();
+      this.year = now.getFullYear();
+      getTicketsSource.getList({ year: this.year }).then((res) => {
+        const { code, result } = res.data;
+        if (code === 200) {
+          this.map = Object.entries(result.map).map(([name, value]) => ({
+            value,
+            name,
+          }));
+
+          this.map = this.map.map((item, index) => ({
+            ...item,
+            itemStyle: {
+              color: colors.pieColors[index % colors.pieColors.length],
+            },
+          }));
+          this.initChart();
+        }
+        console.log(res, "data");
+      });
+    },
+    initChart() {
+      this.myChart = this.$echarts.init(
+        document.getElementById("ticketsSource")
+      );
+      const option = {
+        series: [
+          {
+            name: "Nightingale Chart",
+            type: "pie",
+            radius: ["30%", "80%"],
+            center: ["50%", "50%"],
+            roseType: "area",
+            itemStyle: {
+              borderRadius: 8,
+            },
+            labelLine: {
+              length: '2%',
+              length2: '10%',
+            },
+            data: this.map,
+          },
+        ],
+      };
+      this.myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.box {
+  height: 100%;
+  padding: 10px;
+}
+.box-top {
+  width: 100%;
+  height: 30px;
+  display: flex;
+  justify-content: space-between;
+}
+.topTitle {
+  padding-left: 10px;
+  margin-left: 10px;
+  border-left: solid 10px #02fffd;
+  height: 100%;
+  line-height: 30px;
+  font-size: calc(100vw * 18 / 1920);
+  color: white;
+}
+#ticketsSource {
+  width: 100%;
+  height: calc(100% - 30px);
+}
+</style>

src/view/client/12345/TodayAcceptance/api.js

@@ -0,0 +1,7 @@
+import {server} from "@/tools/servers"
+
+export class getTodayAcceptance {
+  static getList(){
+    return server.connection('POST','/api/12345/getTodayAcceptanceInfo')
+  }
+}

src/view/client/12345/TodayAcceptance/colors.js

@@ -0,0 +1,13 @@
+export default {
+  // 南丁格尔玫瑰花瓣颜色
+  pieColors: [
+    "#546FC6",
+    "#92CD76",
+    "#FAC958",
+    "#EF6667",
+    "#73C0E0",
+    "#3AA271",
+    "#FB8450",
+    "#9C60B5",
+  ],
+};

src/view/client/12345/TodayAcceptance/index.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="box">
+    <div class="box-top">
+      <div class="topTitle">今日话务情况</div>
+    </div>
+    <div id="todayAcceptance">
+      <el-row>
+        <el-col :span="12">
+          <div class="col-item">
+            <div class="col-left">
+              <img src="@/assets/images/phone-5.png" />
+              <span>呼入总量：</span>
+            </div>
+            <div class="col-right">
+              {{ inputCount }}
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="col-item">
+            <div class="col-left">
+              <img src="@/assets/images/phone-5.png" />
+              <span>呼出总量：</span>
+            </div>
+            <div class="col-right">
+              {{ outputCount }}
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <div class="col-item">
+            <div class="col-left">
+              <img src="@/assets/images/phone-5.png" />
+              <span>呼入接通量：</span>
+            </div>
+            <div class="col-right">
+              {{ inputAcceptCount }}
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="col-item">
+            <div class="col-left">
+              <img src="@/assets/images/phone-5.png" />
+              <span>呼出接通量：</span>
+            </div>
+            <div class="col-right">
+              {{ outputAcceptCount }}
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <div class="col-item">
+            <div class="col-left">
+              <img src="@/assets/images/phone-5.png" />
+              <span>呼入平均时长：</span>
+            </div>
+            <div class="col-right">
+              {{ inputAverageTime }}
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="col-item">
+            <div class="col-left">
+              <img src="@/assets/images/phone-5.png" />
+              <span>呼出平均时长：</span>
+            </div>
+            <div class="col-right">
+              {{ outputAverageTime }}
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getTodayAcceptance } from "./api";
+import colors from "./colors";
+export default {
+  data() {
+    return {
+      year: 2024,
+      inputAcceptCount: 0,
+      inputAverageTime: 0,
+      inputCount: 0,
+      outputAcceptCount: 0,
+      outputAverageTime: 0,
+      outputCount: 0,
+    };
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      getTodayAcceptance.getList().then((res) => {
+        const { code, result } = res.data;
+        if (code === 200) {
+          this.inputAcceptCount = result.inputAcceptCount;
+          this.inputAverageTime = result.inputAverageTime;
+          this.inputCount = result.inputCount;
+          this.outputAcceptCount = result.outputAcceptCount;
+          this.outputAverageTime = result.outputAverageTime;
+          this.outputCount = result.outputCount;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.box {
+  padding: 10px;
+}
+.box-top {
+  width: 100%;
+  height: 30px;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 4vh;
+}
+.topTitle {
+  padding-left: 10px;
+  margin-left: 10px;
+  border-left: solid 10px #02fffd;
+  height: 100%;
+  line-height: 30px;
+  font-size: calc(100vw * 18 / 1920);
+  color: white;
+}
+#todayAcceptance {
+  width: 100%;
+  height: calc(100% - 30px);
+}
+.col-title {
+  font-size: calc(100vw * 19 / 1920);
+  color: white;
+}
+.col-num {
+  font-size: calc(100vw * 19 / 1920);
+  color: white;
+}
+
+.el-row {
+  margin-bottom: 4vh;
+}
+.el-col {
+  border-radius: 4px;
+}
+.bg-purple-dark {
+  background: #99a9bf;
+}
+.bg-purple {
+  background: #d3dce6;
+}
+.bg-purple-light {
+  background: #e5e9f2;
+}
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
+.col-item {
+  display: flex;
+  align-items: center;
+}
+.col-left {
+  display: flex;
+  margin-right: 10px;
+  align-items: center;
+  width: 70%;
+  font-size: calc(100vw * 19 / 1920);
+  color: white;
+}
+.col-right {
+  font-size: calc(100vw * 19 / 1920);
+  color: white;
+}
+</style>

src/view/client/12345/index.vue

@@ -1,60 +1,72 @@
 <template>
   <div class="background" style="height: 100%;overflow: hidden">
-    <div class="background2" v-if="background"></div>
+    <!-- <div class="background2" v-if="background"></div> -->
+    <div class="top-left">
+      <LeftTitle/>
+    </div>
     <div class="title"><span class="titleFont">12345市民服务热线可视化系统</span></div>
     <div class="back" @click="back"></div>
     <div class="time">{{date}}</div>
-    <div class="rectangle1" @click="hotlineDistrictFunction" @change="changeNumber" id="rectangle1">
-      <hotline-distric ref="HotlineDistric" @change="changeNumber" @click="hotlineDistrictFunction"></hotline-distric>
-    </div>
-    <div class="rectangle2" id="rectangle2" @click="municipal">
-      <Municipal ref="Municipal" @click="municipal"></Municipal>
+    <div class="rectangle-left1 panel">
+      <div class="inner">
+        <RiskTrend></RiskTrend>
+      </div>
     </div>
-    <div class="rectangle3" @click="sourceStatisticsFunction" id="rectangle3">
-      <source-statistics ref="sourceStatistics" @click="sourceStatisticsFunction"></source-statistics>
+    <div class="rectangle-left2 panel" id="rectangle-left2">
+      <div class="inner">
+        <Municipal></Municipal>
+      </div>
     </div>
-    <div class="rectangle4" @click="acceptanceTrendFunction" id="rectangle4">
-      <AcceptanceTrend ref="AcceptanceTrend"></AcceptanceTrend>
+    <div class="rectangle-left3 panel" id="rectangle-left3">
+      <div class="inner">
+        <CountySituation></CountySituation>
+      </div>
     </div>
-    <div class="rectangle5" @click="acceptanceAppealFunction" id="rectangle5">
-      <AcceptanceAppeal ref="AcceptanceAppeal"></AcceptanceAppeal>
+    
+    <div class="rectangle-center1 panel">
+      <div class="inner">
+        <CenterTop></CenterTop>
+      </div>
     </div>
-    <div class="rectangle6" @click="overdueChartFunction" id="rectangle6">
-      <div class="rectangle6" style="position: absolute;background-color: transparent !important;"
-           id="rectangle6Inner"></div>
-      <overdueChart ref="overdueChart"></overdueChart>
+    <div class="rectangle-center2">
+      <CenterMap></CenterMap>
     </div>
-    <div class="rectangle7" @click="DissatisfiedFunction" id="rectangle7">
-      <dissatisfied ref="Dissatisfied" @click="DissatisfiedFunction"></dissatisfied>
+
+    <div class="rectangle-right1 panel">
+      <div class="inner">
+        <AcceptTickets></AcceptTickets>
+      </div>
     </div>
-    <div class="rectangle8" id="rectangle8" @click="hotspot">
-      <hot-spot ref="hotspot" @click="hotspot"></hot-spot>
+    <div class="rectangle-right2 panel">
+      <div class="inner">
+        <TicketsSource></TicketsSource>
+      </div>
     </div>
-
-    <div
-      style="background-color: rgba(15, 235, 255, 0.1);position: absolute;width:32.5%;height:46.6%;top:8.5%;left:33.5%"></div>
-    <div class="stage">
-      <figure class="ball"></figure>
-      <div class="light"></div>
-      <div class="logo"></div>
-      <div class="circle1"></div>
-      <div class="circle2"></div>
-      <div class="circle3"></div>
+    <div class="rectangle-right3 panel">
+      <div class="inner">
+        <TodayAcceptance></TodayAcceptance>
+      </div>
     </div>
-
-
   </div>
 </template>
 
 <script>
   import AcceptanceAppeal from './AcceptanceAppeal'
   import overdueChart from './overdue'
-  import Municipal from './middle/municipal'
   import HotSpot from './middle/hotSpot'
   import HotlineDistric from './HotlineDistric';
   import Dissatisfied from './Dissatisfied';
   import AcceptanceTrend from "./acceptanceTrend";
   import sourceStatistics from './sourceStatistics'
+  import RiskTrend from './RiskTrend/index.vue'
+  import Municipal from './Municipal/index.vue'
+  import CountySituation from './CountySituation/index.vue'
+  import CenterTop from './CenterTop/index.vue'
+  import CenterMap from './CenterMap/index.vue'
+  import AcceptTickets from './AcceptTickets/index.vue'
+  import TicketsSource from './TicketsSource/index.vue'
+  import TodayAcceptance from './TodayAcceptance/index.vue';
+  import LeftTitle from './LeftTitle/index.vue'
 
   export default {
     data() {
@@ -77,8 +89,8 @@
     },
     created() {
       window['municipalResize'] = (item) => {
-        this.$refs.Municipal.drawMonthChart(0);
-        this.$refs.Municipal.getChartData(this.municipalCount);//调用子组件的重新渲染图表函数
+        // this.$refs.Municipal.drawMonthChart(0);
+        // this.$refs.Municipal.getChartData(this.municipalCount);//调用子组件的重新渲染图表函数
       };
       window['hotspotResize'] = (item) => {
         this.$refs.hotspot.getChartData1(this.hotSpot);
@@ -168,24 +180,6 @@
           this.background = false;
         }
       },
-      municipal() {
-        let flag = sessionStorage.getItem('municipalDateChange');
-        if (flag !== JSON.stringify(1)) {
-          document.getElementById("rectangle2").classList.toggle("rectangle2Click"); //改变样式
-          this.$elementQueries.ResizeSensor(document.getElementById("rectangle2"), function () {
-            window.municipalResize();
-          });
-          setTimeout(() => {this.$refs.Municipal.changeDate(this.municipalCount)}, 100);
-          this.municipalCount++;
-          if (this.municipalCount % 2 !== 0) {
-            this.background = true;
-          } else {
-            this.background = false;
-          }
-        } else {
-          sessionStorage.removeItem('municipalDateChange')
-        }
-      },
       hotspot() {
         document.getElementById("rectangle8").classList.toggle("rectangle8Click"); //改变样式
         this.$elementQueries.ResizeSensor(document.getElementById("rectangle8"), function () {
@@ -251,7 +245,15 @@
       HotSpot,
       HotlineDistric,
       Dissatisfied,
-      sourceStatistics
+      sourceStatistics,
+      RiskTrend,
+      CountySituation,
+      CenterTop,
+      CenterMap,
+      AcceptTickets,
+      TicketsSource,
+      TodayAcceptance,
+      LeftTitle
     }
   }
 </script>
@@ -259,8 +261,9 @@
   .background {
     width: 100%;
     height: 100%;
-    background-image: url("../../../assets/images/background.png");
-    background-size: cover;
+    background-image: url("../../../assets/images/12345-bg.jpg") ;
+    /* background-color: #101129; */
+    background-size: 100% 100%;
     position: relative;
   }
 
@@ -276,6 +279,15 @@
     z-index: 100
   }
 
+  .top-left {
+    position: absolute;
+    color: white;
+    left: 8vw;
+    display: flex;
+    align-items: center;
+    height: 6.7%;
+  }
+
   .title {
     height: 6.7%;
     width: 100%;
@@ -293,12 +305,9 @@
   .titleFont {
     padding-top: 0.3%;
     padding-bottom: 0.3%;
-    /*width: 36%;*/
     height: 80%;
     color: #0febff;
     font-size: 173%;
-    /*margin: 0 auto;*/
-    /*text-align: center;*/
   }
 
   body {
@@ -334,82 +343,6 @@
     }
   }
 
-  .ball {
-    display: inline-block;
-    width: 89%;
-    height: 92%;
-    margin: 0;
-    border-radius: 50%;
-    position: absolute;
-    -webkit-transform-style: preserve-3d;
-    background: url("../../../assets/images/earth.png") repeat-x;
-    background-size: auto 100%;
-    -webkit-animation: move-map 30s infinite linear;
-    -moz-animation: move-map 30s infinite linear;
-    -o-animation: move-map 30s infinite linear;
-    animation: move-map 30s infinite linear;
-  }
-
-  .ball:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    box-shadow: -40px 10px 70px 10px rgba(0, 0, 0, 0.5) inset;
-    z-index: 2;
-  }
-
-  .ball:after {
-    content: "";
-    position: absolute;
-    border-radius: 50%;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    -webkit-filter: blur(0);
-    opacity: 0.4;
-    background: radial-gradient(circle at 50% 80%, #81e8f6, #76deef 10%, #055194 66%, #062745 100%);
-  }
-
-  .ball .shadow {
-    position: absolute;
-    width: 89%;
-    height: 92%;
-    background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
-    -webkit-transform: rotateX(90deg) translateZ(-150px);
-    -moz-transform: rotateX(90deg) translateZ(-150px);
-    -ms-transform: rotateX(90deg) translateZ(-150px);
-    -o-transform: rotateX(90deg) translateZ(-150px);
-    transform: rotateX(90deg) translateZ(-150px);
-    z-index: -1;
-  }
-
-  /*body {*/
-  /*width: 300px;*/
-  /*margin: 20px auto;*/
-  /*background: linear-gradient(to bottom, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);*/
-  /*background-repeat: no-repeat;*/
-  /*}*/
-  .stage {
-    display: inline-block;
-    position: absolute;
-    top: 16.9%;
-    left: 41.5%;
-    width: 18.5vw;
-    height: 18vw;
-    /*margin: 20px;*/
-    /*-webkit-perspective: 1200px;*/
-    /*-moz-perspective: 1200px;*/
-    /*perspective: 1200px;*/
-    /*-webkit-perspective-origin: 50% 50%;*/
-    /*-moz-perspective-origin: 50% 50%;*/
-    /*perspective-origin: 50% 50%;*/
-  }
-
   @-moz-keyframes move-map {
     0% {
       background-position: -849px 0;
@@ -455,187 +388,121 @@
     }
   }
 
-  .light {
-    display: inline-block;
-    animation: content 5s linear both infinite;
-    animation-direction: alternate;
-    background: url("../../../assets/images/lightPoint.png") no-repeat center 0;
-    background-size: 100% 100%;
-    position: absolute;
-    top: -13%;
-    left: -11%;
-    width: 100%;
-    height: 100%;
-  }
-
-  .logo {
-    display: inline-block;
-    animation: content 5s linear both infinite;
-    animation-direction: alternate;
-    position: absolute;
-    top: 30%;
-    left: 17%;
-    width: 60%;
-    height: 50%;
-    opacity: 0.8;
-    background: url("../../../assets/images/12345logo.png") no-repeat center 0;
-    background-size: auto 60%;
-  }
-
-  .circle1 {
-    border: 1px solid #c32c1c;
-    width: 110%;
-    height: 110%;
-    border-radius: 50%;
-    position: absolute;
-    top: -9%;
-    left: -10%;
-    animation: content2 5s linear both infinite;
-    animation-direction: alternate;
-  }
-
-  .circle2 {
-    border: 1px solid #c32c1c;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    position: absolute;
-    top: -4%;
-    left: -5%;
-    animation: content 5s linear both infinite;
-    animation-direction: alternate;
+  .panel {
+    /* 边框 */
+    box-sizing: border-box;
+    border: 2px solid red;
+    border-image: url("../../../assets/images/border-12345.png") 51 38 21 132;
+    border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
+    position: relative;
+    margin-bottom: 0.833rem;
+    background-color: rgba(1, 1, 1, 0.35);
+    border-top-right-radius: 30px;
   }
 
-  .circle3 {
-    border: 1px solid #c32c1c;
-    width: 120%;
-    height: 120%;
-    border-radius: 50%;
+  .panel .inner {
+    /* 装内容 */
+    /* height: 60px; */
     position: absolute;
-    top: -14%;
-    left: -16%;
-    animation: content3 5s linear both infinite;
-    animation-direction: alternate;
-    opacity: 0.6;
+    top: -2.7rem;
+    right: -1.583rem;
+    bottom: -0.875rem;
+    left: -7rem;
+    padding: 1rem 1.5rem;
   }
 
-  .rectangle1 {
+  .rectangle-left1 {
     position: absolute;
-    width: 32.7%;
-    height: 41.5%;
-    /*background: url("../../../assets/images/rectangle1.png");*/
+    width: 32%;
+    height: 28.5%;
     background-size: 100% 100%;
-    background-color: rgba(15, 235, 255, 0.1);
+
     top: 8.6%;
-    left: 0.4%;
+    left: 0.7%;
     transition: width 1s, height 1s, margin-left 1s, margin-top 1s;
     -webkit-transition: width 1s, height 1s, margin-top 2s, margin-left 2s;
     z-index: 99;
   }
 
-  .rectangle2 {
+  .rectangle-left2 {
     position: absolute;
-    width: 32.7%;
-    height: 48%;
-    /*background: url("../../../assets/images/rectangle2.png");*/
+    width: 32%;
+    height: 29%;
     background-size: 100% 100%;
-    background-color: rgba(15, 235, 255, 0.1);
-    top: 51%;
-    left: 0.4%;
+    top: 39%;
+    left: 0.7%;
     transition: width 1s, height 1s, margin-left 1s, margin-top 1s;
     -webkit-transition: width 1s, height 1s, margin-top 2s, margin-left 2s;
     z-index: 99;
   }
 
-  .rectangle3 {
+  .rectangle-left3 {
     position: absolute;
-    width: 32.5%;
-    height: 24.2%;
-    /*background: url("../../../assets/images/rectangle3.png");*/
-    background-color: rgba(15, 235, 255, 0.1);
+    width: 32%;
+    height: 29%;
     background-size: 100% 100%;
-    top: 55.9%;
-    left: 33.5%;
+    top: 70%;
+    left: 0.7%;
     transition: width 1s, height 1s, margin-left 1s, margin-top 1s;
     -webkit-transition: width 1s, height 1s, margin-top 2s, margin-left 2s;
     z-index: 99;
   }
 
-  .rectangle4 {
+  .rectangle-center1 {
     position: absolute;
     width: 32.5%;
-    height: 18.1%;
-    /*background: url("../../../assets/images/rectangle4.png");*/
-    background-color: rgba(15, 235, 255, 0.1);
+    height: 14.2%;
     background-size: 100% 100%;
-    top: 80.9%;
+    top: 8.6%;
     left: 33.5%;
     transition: width 1s, height 1s, margin-left 1s, margin-top 1s;
     -webkit-transition: width 1s, height 1s, margin-top 2s, margin-left 2s;
     z-index: 99;
   }
 
-  .rectangle5 {
+  .rectangle-center2 {
     position: absolute;
-    width: 15.8%;
-    height: 18.7%;
-    /*background: url("../../../assets/images/rectangle5.png");*/
+    width: 32.5%;
+    height: 75.7%;
     background-size: 100% 100%;
-    background-color: rgba(15, 235, 255, 0.1);
-    top: 8.6%;
-    left: 66.4%;
+    top: 23.7%;
+    left: 33.5%;
     transition: width 1s, height 1s, margin-left 1s, margin-top 1s;
     -webkit-transition: width 1s, height 1s, margin-top 2s, margin-left 2s;
     z-index: 99;
   }
 
-  .rectangle6 {
+  .rectangle-right1 {
     position: absolute;
-    width: 17.2%;
-    height: 18.7%;
-    /*background: url("../../../assets/images/rectangle6.png");*/
+    width: 32.4%;
+    height: 28.5%;
     background-size: 100% 100%;
-    background-color: rgba(15, 235, 255, 0.1);
     top: 8.6%;
-    left: 82.7%;
+    left: 66.8%;
     transition: width 1s, height 1s, margin-left 1s, margin-top 1s;
     -webkit-transition: width 1s, height 1s, margin-top 2s, margin-left 2s;
     z-index: 99;
   }
 
-  /*.rectangle6InnerClick{*/
-  /*position: absolute;*/
-  /*width: 80%;*/
-  /*height: 60%;*/
-  /*background-color: rgba(0, 0, 0, 0.78) !important;*/
-  /*background-size: 100% 100%;*/
-  /*margin-top: 7%;*/
-  /*margin-left: -88%;*/
-  /*z-index: 80;*/
-  /*}*/
-  .rectangle7 {
+  .rectangle-right2 {
     position: absolute;
-    width: 33.4%;
-    height: 19.8%;
-    /*background: url("../../../assets/images/rectangle7.png");*/
+    width: 32.4%;
+    height: 29%;
     background-size: 100% 100%;
-    background-color: rgba(15, 235, 255, 0.1);
-    top: 28.1%;
-    left: 66.4%;
+    top: 39%;
+    left: 66.8%;
     transition: width 1s, height 1s, margin-left 1s, margin-top 1s;
     -webkit-transition: width 1s, height 1s, margin-top 2s, margin-left 2s;
     z-index: 99;
   }
 
-  .rectangle8 {
+  .rectangle-right3 {
     position: absolute;
-    width: 33.4%;
-    height: 50%;
-    /*background: url("../../../assets/images/rectangle8.png");*/
+    width: 32.4%;
+    height: 29%;
     background-size: 100% 100%;
-    background-color: rgba(15, 235, 255, 0.1);
-    top: 48.9%;
-    left: 66.4%;
+    top: 70%;
+    left: 66.8%;
     transition: width 1s, height 1s, margin-left 1s, margin-top 1s;
     -webkit-transition: width 1s, height 1s, margin-top 2s, margin-left 2s;
     z-index: 99;