完成公共资源交易数据统计可视化

src/view/client/publicOversight/new/gategorizeTransactions/index.vue

@@ -1,12 +1,14 @@
 <template>
   <div class="main">
-    <div class="title">{{year}}分类交易情况</div>
+    <div class="title">{{ year }}分类交易情况</div>
     <div class="content">
       <div class="contentItems">
         <div class="contentItem">
           <div class="contentItemTitle">工程建设</div>
           <div class="contentItemContent">
-            <div class="contentItemContentIcon">图标</div>
+            <div class="contentItemContentIcon">
+              <img :src="gongchengPng"  alt="">
+            </div>
             <div class="contentItemContentRight">
               <div class="contentItemContentRightTop">
                 <div>交易宗数</div>
@@ -28,7 +30,9 @@
         <div class="contentItem">
           <div class="contentItemTitle">政府采购</div>
           <div class="contentItemContent">
-            <div class="contentItemContentIcon">图标</div>
+            <div class="contentItemContentIcon">
+              <img :src="transactionType1"  alt="">
+            </div>
             <div class="contentItemContentRight">
               <div class="contentItemContentRightTop">
                 <div>交易宗数</div>
@@ -52,7 +56,9 @@
         <div class="contentItem">
           <div class="contentItemTitle">土地矿权</div>
           <div class="contentItemContent">
-            <div class="contentItemContentIcon">图标</div>
+            <div class="contentItemContentIcon">
+              <img :src="transactionType2"  alt="">
+            </div>
             <div class="contentItemContentRight">
               <div class="contentItemContentRightTop">
                 <div>交易宗数</div>
@@ -74,7 +80,9 @@
         <div class="contentItem">
           <div class="contentItemTitle">资源资产</div>
           <div class="contentItemContent">
-            <div class="contentItemContentIcon">图标</div>
+            <div class="contentItemContentIcon">
+              <img :src="transactionType3"  alt="">
+            </div>
             <div class="contentItemContentRight">
               <div class="contentItemContentRightTop">
                 <div>交易宗数</div>
@@ -98,7 +106,9 @@
         <div class="contentItem">
           <div class="contentItemTitle">其他交易</div>
           <div class="contentItemContent">
-            <div class="contentItemContentIcon">图标</div>
+            <div class="contentItemContentIcon">
+              <img :src="transactionType4"  alt="">
+            </div>
             <div class="contentItemContentRight">
               <div class="contentItemContentRightTop">
                 <div>交易宗数</div>
@@ -123,6 +133,11 @@
 </template>
 <script>
 import { publicpversightApi } from "../index.js";
+import gongchengPng from '@/assets/images/gongcheng.png';
+import transactionType1 from '@/assets/images/transactionType1.png';
+import transactionType2 from '@/assets/images/transactionType2.png';
+import transactionType3 from '@/assets/images/transactionType3.png';
+import transactionType4 from '@/assets/images/transactionType4.png';
 export default {
   name: "GategorizeTransactions",
   props: {
@@ -133,6 +148,12 @@ export default {
   },
   data() {
     return {
+      gongchengPng: gongchengPng,
+      transactionType1: transactionType1,
+      transactionType2: transactionType2,
+      transactionType3: transactionType3,
+      transactionType4: transactionType4,
+
       // 交易类别（0：工程建设，1：政府采购，2：土地矿权，3：资源财产，4：其它交易）
       categoryTradeInfo0: {
         transactionAmount: 0,
@@ -167,19 +188,46 @@ export default {
         year: this.year,
       };
       publicpversightApi.getCategoryTradeInfo(data).then((res) => {
-        console.log(res);
         if (res.data.code === 200) {
-          for (const item of res.data.result) {
-            if (item.transactionType === 0) {
-              this.categoryTradeInfo0 = item;
-            } else if (item.transactionType === 1) {
-              this.categoryTradeInfo1 = item;
-            } else if (item.transactionType === 2) {
-              this.categoryTradeInfo2 = item;
-            } else if (item.transactionType === 3) {
-              this.categoryTradeInfo3 = item;
-            } else if (item.transactionType === 4) {
-              this.categoryTradeInfo4 = item;
+          if (res.data.result.length === 0) {
+            this.categoryTradeInfo0 = {
+              transactionAmount: 0,
+              transactionCount: 0,
+              transactionType: 0,
+            };
+            this.categoryTradeInfo1 = {
+              transactionAmount: 0,
+              transactionCount: 0,
+              transactionType: 1,
+            };
+            this.categoryTradeInfo2 = {
+              transactionAmount: 0,
+              transactionCount: 0,
+              transactionType: 2,
+            };
+            this.categoryTradeInfo3 = {
+              transactionAmount: 0,
+              transactionCount: 0,
+              transactionType: 3,
+            };
+            this.categoryTradeInfo4 = {
+              transactionAmount: 0,
+              transactionCount: 0,
+              transactionType: 4,
+            };
+          } else {
+            for (const item of res.data.result) {
+              if (item.transactionType === 0) {
+                this.categoryTradeInfo0 = item;
+              } else if (item.transactionType === 1) {
+                this.categoryTradeInfo1 = item;
+              } else if (item.transactionType === 2) {
+                this.categoryTradeInfo2 = item;
+              } else if (item.transactionType === 3) {
+                this.categoryTradeInfo3 = item;
+              } else if (item.transactionType === 4) {
+                this.categoryTradeInfo4 = item;
+              }
             }
           }
         }
@@ -200,7 +248,7 @@ export default {
 .main {
   width: 100%;
   height: 100%;
-  background: rgba(43, 81, 206, 0.444);
+  background: rgba(72, 104, 210, 0.444);
   border-radius: 10px 10px 0 0;
   display: flex;
   flex-direction: column;
@@ -231,7 +279,7 @@ export default {
 }
 .contentItemTitle {
   font-size: 18px;
-  margin: 2px 0 8px 0;
+  margin: 2px 0 18px 0;
 }
 .contentItemContent {
   flex: 1;

src/view/client/publicOversight/new/index.js

@@ -14,6 +14,19 @@ export class publicpversightApi {
       data
     );
   }
+  static getCurrentAreaTradeInfo(data) {
+    return server.connection(
+      "POST",
+      "/api/resourceTrade/getCurrentAreaTradeInfo",
+      data
+    );
+  }
+  static getResourceTransactionList() {
+    return server.connection(
+      "POST",
+      "/api/resourceTrade/getResourceTransactionList",
+    );
+  }
   static getCategoryTradeProportion(data) {
     return server.connection(
       "POST",

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

@@ -15,6 +15,7 @@
             prefix-icon="1"
             popper-class="date-picker-government-service-municipal"
             class="yearDate"
+            :picker-options="{ disabledDate: disabledDate }"
             @change="yearChange"
           >
           </el-date-picker>
@@ -27,7 +28,9 @@
       <div class="top">
         <div class="topItem">
           <div class="topItemContent">
-            <div class="itemleft">图标</div>
+            <div class="itemleft">
+              <img :src="transactionCountPng" alt="">
+            </div>
             <div class="itemCenter">
               <div class="itemCenterTop">累计交易宗数</div>
               <div class="itemCenterBottom">{{ year }}年</div>
@@ -39,7 +42,7 @@
         </div>
         <div class="topItem">
           <div class="topItemContent">
-            <div class="itemleft">图标</div>
+            <div class="itemleft"><img :src="transactionAmountPng" alt=""></div>
             <div class="itemCenter">
               <div class="itemCenterTop">累计交易金额</div>
               <div class="itemCenterBottom">{{ year }}年</div>
@@ -51,7 +54,7 @@
         </div>
         <div class="topItem">
           <div class="topItemContent">
-            <div class="itemleft">图标</div>
+            <div class="itemleft"><img :src="budgetAmountPng" alt=""></div>
             <div class="itemCenter">
               <div class="itemCenterTop">累计预算金额</div>
               <div class="itemCenterBottom">{{ year }}年</div>
@@ -63,7 +66,7 @@
         </div>
         <div class="topItem">
           <div class="topItemContent">
-            <div class="itemleft">图标</div>
+            <div class="itemleft"><img :src="saveAmountPng" alt=""></div>
             <div class="itemCenter">
               <div class="itemCenterTop">累计节约金额</div>
               <div class="itemCenterBottom">{{ year }}年</div>
@@ -76,31 +79,38 @@
       </div>
       <div class="center">
         <div class="centerLeft">
-            <GategorizeTransactions :year="year"></GategorizeTransactions>
+          <GategorizeTransactions :year="year"></GategorizeTransactions>
         </div>
         <div class="centerCenter">
-            <RegionalTransactions :year="year"></RegionalTransactions>
+          <RegionalTransactions :year="year"></RegionalTransactions>
         </div>
         <div class="centerRight">
-            <PublicResourceTransactions :year="year"></PublicResourceTransactions>
+          <PublicResourceTransactions :year="year"></PublicResourceTransactions>
         </div>
-          </div>
+      </div>
       <div class="bottom">
         <div class="bottomLeft">
-            <ProportionOfProjectTypes :year="year"></ProportionOfProjectTypes>        </div>
-    <div class="bottomRight">
-        <TransactionsInThePastYear :year="year"></TransactionsInThePastYear>
-    </div>      </div>
+          <ProportionOfProjectTypes :year="year"></ProportionOfProjectTypes>
+        </div>
+        <div class="bottomRight">
+          <TransactionsInThePastYear :year="year"></TransactionsInThePastYear>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script>
 import { publicpversightApi } from "./index.js";
-import GategorizeTransactions from './gategorizeTransactions/index.vue'
-import RegionalTransactions from './regionalTransactions/index.vue'
-import PublicResourceTransactions from './publicResourceTransactions/index.vue'
-import ProportionOfProjectTypes from './proportionOfProjectTypes/index.vue'
-import TransactionsInThePastYear from './transactionsInThePastYear/index.vue'
+import GategorizeTransactions from "./gategorizeTransactions/index.vue";
+import RegionalTransactions from "./regionalTransactions/index.vue";
+import PublicResourceTransactions from "./publicResourceTransactions/index.vue";
+import ProportionOfProjectTypes from "./proportionOfProjectTypes/index.vue";
+import TransactionsInThePastYear from "./transactionsInThePastYear/index.vue";
+import transactionCountPng from '@/assets/images/transactionCount.png'
+import transactionAmountPng from '@/assets/images/transactionAmount.png'
+import budgetAmountPng from '@/assets/images/budgetAmount.png'
+import saveAmountPng from '@/assets/images/saveAmount.png'
+
 export default {
   name: "index",
   components: {
@@ -108,11 +118,15 @@ export default {
     RegionalTransactions,
     PublicResourceTransactions,
     ProportionOfProjectTypes,
-    TransactionsInThePastYear
+    TransactionsInThePastYear,
   },
   data() {
     const currentYear = new Date().getFullYear().toString();
     return {
+      transactionCountPng: transactionCountPng,
+      transactionAmountPng: transactionAmountPng,
+      budgetAmountPng: budgetAmountPng,
+      saveAmountPng: saveAmountPng,
       year: currentYear,
       currentDateTime: new Date(),
       historyTradeInfo: {
@@ -144,6 +158,9 @@ export default {
     updateDateTime() {
       this.currentDateTime = new Date();
     },
+    disabledDate(time) {
+    return time.getFullYear() > new Date().getFullYear();
+  },
     yearChange(e) {
       this.year = e.getFullYear().toString();
       this.getHistoryTradeInfo();
@@ -156,6 +173,13 @@ export default {
         if (res.data.code === 200) {
           if (res.data.result) {
             this.historyTradeInfo = res.data.result;
+          } else {
+            this.historyTradeInfo = {
+              transactionCount: 0,
+              transactionAmount: 0,
+              budgetAmount: 0,
+              saveAmount: 0,
+            };
           }
         }
       });
@@ -258,20 +282,18 @@ export default {
   height: 53%;
   display: flex;
 }
-.centerLeft{
-    width: 25%;
-    padding: 45px 35px 45px 35px;
-    box-sizing: border-box;
+.centerLeft {
+  width: 25%;
+  padding: 45px 35px 45px 35px;
+  box-sizing: border-box;
 }
-.centerCenter{
-    width: 45%;
-    background: rgb(141, 88, 88);
-
+.centerCenter {
+  width: 45%;
 }
-.centerRight{
-    width: 30%;
-    padding: 35px 35px 45px 15px;
-    box-sizing: border-box;
+.centerRight {
+  width: 30%;
+  padding: 35px 35px 45px 35px;
+  box-sizing: border-box;
 }
 .bottom {
   height: 35%;
@@ -280,19 +302,22 @@ export default {
   padding-top: 40px;
   padding-bottom: 10px;
   box-sizing: border-box;
-
 }
-.bottomLeft{
-    width: 45%;
-    background: blue;
+.bottomLeft {
+  width: 35%;
 }
-.bottomRight{
-    width: 45%;
-    background: red;
+.bottomRight {
+  width: 55%;
 }
 </style>
 
 <style>
+.yearDate .el-input__inner {
+  width: 120px;
+  background-color: #0c2034; /* 你可以根据需要修改背景色 */
+  color: white; /* 你可以根据需要修改文字颜色 */
+  border: 2px solid rgb(30, 115, 180);
+}
 .date-picker-government-service-municipal {
   border-color: #066088;
 }

src/view/client/publicOversight/new/proportionOfProjectTypes/index.vue

@@ -3,19 +3,19 @@
     <div class="header">
       <div class="type">
         <div
-        class="type0"
-        :class="{ 'highlight': type === 0 }"
-        @click="setType(0)"
-      >
-        交易宗数
-      </div>
-      <div
-        class="type1"
-        :class="{ 'highlight': type === 1 }"
-        @click="setType(1)"
-      >
-        交易金额
-      </div>
+          class="type0"
+          :class="{ highlight: type === 0 }"
+          @click="setType(0)"
+        >
+          交易宗数
+        </div>
+        <div
+          class="type1"
+          :class="{ highlight: type === 1 }"
+          @click="setType(1)"
+        >
+          交易金额
+        </div>
       </div>
       <div class="title">{{ year }}年项目类型占比</div>
     </div>
@@ -34,9 +34,9 @@ export default {
   },
   data() {
     return {
-      xaxisData: ["其他交易", "资源资产", "土地产权", "工程建设","政府采购"],
-      yaxisData: [0.00,0.00, 0.00, 0.00, 0.00],
-      yaxisData2: [0.00,0.00, 0.00, 0.00, 0.00],
+      xaxisData: ["其他交易", "资源资产", "土地产权", "工程建设", "政府采购"],
+      yaxisData: ["0.00%", "0.00%", "0.00%", "0.00%", "0.00%"],
+      yaxisData2: ["0.00%", "0.00%", "0.00%", "0.00%", "0.00%"],
       type: 0, //0交易宗数 1交易金额
     };
   },
@@ -51,14 +51,24 @@ export default {
             this.xaxisData = res.data.result.xaxisData;
           }
           if (res.data.result.yaxisData.length > 0) {
-            this.yaxisData = res.data.result.yaxisData.map(Number);
+            this.yaxisData = res.data.result.yaxisData;
           }
           if (res.data.result.yaxisData2.length > 0) {
-            this.yaxisData2 = res.data.result.yaxisData2.map(Number);
+            this.yaxisData2 = res.data.result.yaxisData2;
           }
+        } else {
+          this.xaxisData = [
+            "工程建设",
+            "政府采购",
+            "土地产权",
+            "资源资产",
+            "其他交易",
+          ];
+          this.yaxisData = ["0.00%", "0.00%", "0.00%", "0.00%", "0.00%"];
+          this.yaxisData2 = ["0.00%", "0.00%", "0.00%", "0.00%", "0.00%"];
         }
+        this.drawProportionOfProjects(this.type);
       });
-      this.drawProportionOfProjects(this.type);
     },
     setType(newType) {
       this.type = newType;
@@ -68,9 +78,9 @@ export default {
     drawProportionOfProjects(type) {
       let data = [];
       if (type === 0) {
-        data = this.yaxisData;
+        data = this.yaxisData.map(value => parseFloat(value.replace('%', '')) / 100);
       } else if (type === 1) {
-        data = this.yaxisData2;
+        data = this.yaxisData2.map(value => parseFloat(value.replace('%', '')) / 100);
       }
       var chartDom = document.getElementById("proportionOfProjects");
       var myChart = this.$echarts.init(chartDom);
@@ -86,12 +96,31 @@ export default {
         },
         yAxis: {
           type: "value",
+          min: 0,
+          max: 1,
           axisTick: { show: false }, // 去掉 y 轴的刻度线
           axisLine: { lineStyle: { color: "white" } },
           splitLine: { show: false }, // 去掉 y 轴的网格线
-          axisLabel: {           axisLine: { lineStyle: { color: "white" } },
+          axisLabel: {formatter: function (value) {
+          return (value * 100).toFixed(2) + '%';
+        } },
         },
-
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params) {
+            if (type === 0) {
+              return (
+                params[0].name + "<br/>" + "交易宗数占比: " + (params[0].value * 100).toFixed(2) + "%"
+              );
+            } else if (type === 1) {
+              return (
+                params[0].name + "<br/>" + "交易金额占比: " + (params[0].value * 100).toFixed(2) + "%"
+              );
+            }
+          },
         },
         series: [
           {
@@ -128,7 +157,7 @@ export default {
     year(newYear) {
       this.getCategoryTradeProportion();
     },
-}
+  },
 };
 </script>
 <style scoped>
@@ -137,6 +166,7 @@ export default {
   height: 100%;
   display: flex;
   flex-direction: column;
+  background: rgba(72, 104, 210, 0.444);
 }
 .header {
   display: flex;
@@ -151,7 +181,8 @@ export default {
   margin-top: 10px;
   font-size: 16px;
 }
-.type0, .type1 {
+.type0,
+.type1 {
   padding: 5px 10px;
   margin: 0 10px;
   background: #3f7ad3;
@@ -160,13 +191,15 @@ export default {
   color: white;
   border: 4px solid transparent;
 }
-.type0.highlight, .type1.highlight {
+.type0.highlight,
+.type1.highlight {
   border-color: #03ebed; /* 高亮边框颜色 */
 }
 .title {
   color: #8dbbfb;
   font-size: 22px;
   font-weight: 700;
+  padding: 5px;
 }
 #proportionOfProjects {
   width: 100%;

src/view/client/publicOversight/new/publicResourceTransactions/index.vue

@@ -1,12 +1,347 @@
 <template>
-  <div class="main">公共资源交易</div>
+  <div class="main">
+    <div class="title">公共资源交易</div>
+    <div class="table">
+      <el-table
+        ref="scroll_Table"
+        :data="tableData"
+        style="width: 100%"
+        height="100%"
+        :cell-style="{ background: 'transparent' }"
+      >
+        <el-table-column
+          prop="itemName"
+          label="交易项目名称"
+          min-width="20"
+          align="center"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="ownerUnit"
+          label="业主单位"
+          min-width="20"
+          align="center"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="budgetAmount"
+          label="预算金额"
+          min-width="30"
+          align="center"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="transactionAmount"
+          label="成交金额"
+          min-width="20"
+          align="center"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="transactionDate"
+          label="交易日期"
+          min-width="20"
+          align="center"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+      </el-table>
+    </div></div>
 </template>
-<script></script>
-<style scoped>
+<script>
+import { publicpversightApi } from "../index.js";
+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() {
+      publicpversightApi.getResourceTransactionList().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) {
+    //   gettable.getDetail({ id: row.id }).then((res) => {
+    //     const { code, result } = res.data;
+    //     if (code === 200) {
+    //       this.detail = { ...result };
+    //       this.dialogVisible = true;
+    //     }
+    //   });
+    //   gettable
+    //     .getTranferList({ pageNum: 1, pageSize: 10 })
+    //     .then((res) => {
+    //       const { code, result } = res.data;
+    //       if (code === 200) {
+    //         this.transferTableData = result;
+    //       }
+    //     });
+    // },
+    // transferPageChange(page) {
+    //   gettable
+    //     .getTranferList({ pageNum: page, pageSize: 10 })
+    //     .then((res) => {
+    //       const { code, result } = res.data;
+    //       if (code === 200) {
+    //         this.transferTableData = result;
+    //       }
+    //     });
+    // },
+  },
+};
+</script>
+<style lang="scss" scoped>
 .main{
   width: 100%;
   height: 100%;
-  background: red;
-  
+  background: rgba(72, 104, 210, 0.444);
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+.title{
+  line-height: 20px;
+  color: #8dbbfb;
+  font-size: 22px;
+  font-weight: 700;
+}
+.table{
+  flex: 1;
+    overflow: hidden;
+
+}
+.table /deep/ .el-table {
+    background-color: transparent;
+    color: #3e7aa3;
+    font-size: calc(100vw * 12 / 1920);
+  }
+
+  .table /deep/ .el-table tr {
+    background-color: transparent;
+  }
+  .table /deep/ .el-table th {
+    background-color: transparent;
+  }
+  .table /deep/ .el-table td {
+    background-color: transparent;
+    border-bottom: 0px solid #dfe6ec;
+  }
+  .table /deep/ .el-table--enable-row-transition .el-table__body td,
+  .el-table .cell {
+    background-color: transparent;
+  }
+
+  .table /deep/ .el-table__row > td {
+    border: none;
+  }
+
+  .table /deep/ .el-table th.is-leaf {
+    border: none;
+  }
+
+  .table /deep/ .el-table::before {
+    height: 0;
+  }
+
+  .table ::-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/publicOversight/new/regionalTransactions/index.vue

@@ -1,5 +1,366 @@
 <template>
-  <div>区域交易情况</div>
+  <div class="main">
+    <div class="title">{{ year }}各区域交易情况</div>
+    <div class="content">
+      <div class="contentLeft">
+        <div class="item">
+          <div class="detail">
+            <div>{{ saveAmount }}</div>
+            <div>亿元</div>
+          </div>
+          <div class="title">节约金额</div>
+        </div>
+      </div>
+      <div class="contentCenter">
+        <div id="map"></div>
+      </div>
+      <div class="contentRight">
+        <div class="item">
+          <div class="detail">
+            <div>{{ transactionCount }}</div>
+            <div>宗</div>
+          </div>
+          <div class="title">交易宗数</div>
+        </div>
+        <div class="item">
+          <div class="detail">
+            <div>{{ transactionAmount }}</div>
+            <div>亿元</div>
+          </div>
+          <div class="title">交易金额</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
-<script></script>
-<style scoped></style>
+<script>
+import { publicpversightApi } from "../index.js";
+import bazhong from "./baZhongMap.json";
+export default {
+  name: "regionalTransactions",
+  props: {
+    year: {
+      type: String,
+      required: true,
+    },
+  },
+  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: "",
+      saveAmount: 0,
+      transactionCount: 0,
+      transactionAmount: 0,
+    };
+  },
+  mounted() {
+    // this.getCurrentAreaTradeInfo();
+    this.drawLine();
+  },
+  watch: {
+    year(newYear) {
+      this.getCurrentAreaTradeInfo();
+    },
+    areaName(newAreaName) {
+      this.getCurrentAreaTradeInfo();
+    },
+  },
+  methods: {
+    getCurrentAreaTradeInfo() {
+      publicpversightApi
+        .getCurrentAreaTradeInfo({
+          areaName: this.areaName,
+          year: this.year,
+        })
+        .then((res) => {
+          if (res.data.code === 200) {
+            this.saveAmount = res.data.result.saveAmount;
+            this.transactionCount = res.data.result.transactionCount;
+            this.transactionAmount = res.data.result.transactionAmount;
+          }
+        });
+    },
+    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("map"));
+      this.$echarts.registerMap("BaZhong", bazhong);
+      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: "23%",
+            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: 1.1, //地图大小
+            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);
+      const highlightOrder = ["通江县", "市本级", "恩阳区", "平昌县", "南江县"];
+      let curIndx = 0;
+      if (this.ifLoop) {
+    app.timeTicket = setInterval(() => {
+      let data = allData.map(item => ({
+        name: item.regionType,
+        value: item.order,
+        selected: false,
+      }));
+
+      if (curIndx < highlightOrder.length) {
+        // 高亮当前区域
+        data = data.map(item => ({
+          ...item,
+          selected: item.name === highlightOrder[curIndx],
+        }));
+        if (highlightOrder[curIndx] === "市本级") {
+              that.areaName = "巴州区";
+            } else {
+              that.areaName = highlightOrder[curIndx];
+            }
+      } else {
+        // 高亮所有区域
+        data = data.map(item => ({
+          ...item,
+          selected: true,
+        }));
+        that.areaName = "";
+      }
+
+      myCharts.setOption({
+        series: [
+          {
+            hoverAnimation: false,
+            data: data,
+          },
+        ],
+      });
+
+      curIndx = (curIndx + 1) % (highlightOrder.length + 1);
+    }, 5000);
+  }
+      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>
+.main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: rgba(72, 104, 210, 0.444);
+  padding: 10px;
+}
+.title {
+  line-height: 20px;
+  color: #8dbbfb;
+  font-size: 22px;
+  font-weight: 700;
+  text-align: center;
+}
+.content {
+  flex: 1;
+  display: flex;
+  justify-content: space-around;
+  gap: 10px;
+}
+.contentLeft {
+  width: 25%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+.contentCenter {
+  width: 40%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+#map {
+  width: 100%;
+  height: 100%;
+}
+.contentRight {
+  width: 25%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+.item {
+  width: 200px;
+}
+.detail {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: space-around;
+  color: #8dbbfb;
+  font-size: 38px;
+  font-weight: 900;
+  padding: 20px;
+  background: linear-gradient(
+    to bottom,
+    rgba(3, 9, 26, 0.444),
+    rgba(132, 145, 191, 0.444)
+  );
+  border-radius: 10px 10px 0 0;
+  font-family: "Times New Roman", Times, serif;
+}
+.title {
+  color: white;
+  font-size: 26px;
+  /* font-weight: 700; */
+  margin-top: 10px;
+}
+</style>

src/view/client/publicOversight/new/transactionsInThePastYear/index.vue

@@ -34,9 +34,48 @@ export default {
   },
   data() {
     return {
-      xaxisData: ["01月", "02月", "03月", "04月", "05月", "06月", "07月", "08月", "09月", "10月", "11月", "12月"],
-      yaxisData: ["0.00", "0.00", "0.00", "0.00","0.00", "0.00", "0.00", "0.00","0.00", "0.00", "0.00", "0.00"],
-      yaxisData2: ["0.00", "0.00", "0.00", "0.00","0.00", "0.00", "0.00", "0.00","0.00", "0.00", "0.00", "0.00"],
+      xaxisData: [
+        "01月",
+        "02月",
+        "03月",
+        "04月",
+        "05月",
+        "06月",
+        "07月",
+        "08月",
+        "09月",
+        "10月",
+        "11月",
+        "12月",
+      ],
+      yaxisData: [
+        "0.00",
+        "0.00",
+        "0.00",
+        "0.00",
+        "0.00",
+        "0.00",
+        "0.00",
+        "0.00",
+        "0.00",
+        "0.00",
+        "0.00",
+        "0.00",
+      ],
+      yaxisData2: [
+        "0.00",
+        "0.00",
+        "0.00",
+        "0.00",
+        "0.00",
+        "0.00",
+        "0.00",
+        "0.00",
+        "0.00",
+        "0.00",
+        "0.00",
+        "0.00",
+      ],
       type: 0, //0交易宗数 1交易金额
     };
   },
@@ -57,8 +96,8 @@ export default {
             this.yaxisData2 = res.data.result.yaxisData2;
           }
         }
+        this.drawTransactionsInThePastYear(this.type);
       });
-      this.drawTransactionsInThePastYear(this.type);
     },
     setType(newType) {
       this.type = newType;
@@ -89,11 +128,36 @@ export default {
           axisLine: { lineStyle: { color: "white" } },
           splitLine: { show: false },
         },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "line",
+          },
+          formatter: function (params) {
+            if (type === 0) {
+              return (
+                params[0].name +
+                "<br/>" +
+                "交易宗数: " +
+                params[0].value +
+                "（宗）"
+              );
+            } else if (type === 1) {
+              return (
+                params[0].name +
+                "<br/>" +
+                "交易金额: " +
+                params[0].value +
+                "（亿元）"
+              );
+            }
+          },
+        },
         series: [
           {
             data: data,
-            type: "line", // 修改为 line
-            smooth: true, // 添加平滑曲线效果
+            type: "line",
+            smooth: true,
             itemStyle: {
               color: {
                 type: "linear",
@@ -152,7 +216,7 @@ export default {
     year(newYear) {
       this.getRecentlyCategoryTradeTrend();
     },
-}
+  },
 };
 </script>
 <style scoped>
@@ -161,6 +225,7 @@ export default {
   height: 100%;
   display: flex;
   flex-direction: column;
+  background: rgba(72, 104, 210, 0.444);
 }
 .header {
   display: flex;
@@ -193,6 +258,7 @@ export default {
   color: #8dbbfb;
   font-size: 22px;
   font-weight: 700;
+  padding: 5px;
 }
 #transactionsInThePastYear {
   width: 100%;