营业额详情提交

src/module/databoard/assets/index.css

@@ -4,7 +4,7 @@
   --container-border-color: #0d53b7; /* 容器边框色 */
   --container-shadow-color: #0930A9; /* 容器阴影色 */
   --corner-background-color: #0E5FFF; /* 容器角标色 */
-  --card-background-color: #04175566; /* 卡片背景色 */
+  --card-background-color: #041755; /* 卡片背景色 */
   --card-border1-color: #3673A3; /* 卡片边框色1 */
   --card-border2-color: #19EBFF; /* 卡片边框色2 */
   --white-text-color: white; /* 白色文本 */

src/module/databoard/components/chart/ring-pie-chart.vue

@@ -14,7 +14,7 @@ export default {
         },
         series: [
           {
-            name: '',
+            name: this.name,
             type: 'pie',
             radius: ['40%', '70%'],
             avoidLabelOverlap: false,
@@ -46,6 +46,10 @@ export default {
       data(newValue, oldValue){
           this.option.data = newValue;
           this.chart.setOption(this.option);
+      },
+      name(newName, oldName){
+        this.option.series.name = newName;
+        this.chart.setOption(this.option);
       }
   },
   methods: {

src/module/databoard/components/layout/title-content-mark.vue

 <template>
   <div class="bd" :class="{'center-bd': isCenter}">
-    <div class="title" v-if="title" :class="{'center-title': isCenter}" :style="{'--titleHeight': titleHeight}">
+    <div class="title" v-if="title" :class="{'center-title': isCenter}" :style="titleStyle,{'--titleHeight': titleHeight}">
       {{title}}
     </div>
     <div class="content" :style="{'--titleHeight': titleHeight}">
@@ -47,6 +47,9 @@ export default {
     isBold:{
       type: Boolean,
     },
+    titleStyle:{
+      type: [String,Object],
+    },
     contentStyle:{
       type: [String,Object],
     },

src/module/databoard/index.vue

 <template>
-  <div class="main" @click="testClick">
+  <div class="main">
     <div class="middle">
       <display-board class="trade_left" title="营业情况">
         <div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
-          <contrast-card v-for="data in mockData.yyqk" style="height: 28%;">
+          <contrast-card v-for="data in mockData.yyqk" style="height: 28%;" @click.native="routerTo(paths[data.title])">
             <title-content-mark style="width: 40%;color: #369afa;float: left;" :title="data.title" :content="data.amount" :mark="data.unit"/>
             <div style="width: 60%; height: 100%; float:left; padding: 4% 4% 0 12%; line-height: 26px;; display: flex; align-items: center;">
               <table-column style="float: left;width: 25%;" :data="data.hb" name="title"/>
@@ -104,7 +104,6 @@ import MainBarChart from "./components/chart/main-bar-chart.vue";
 import WinnersList from "./components/card/winners-list.vue";
 import TitleContentMark from "./components/layout/title-content-mark.vue";
 import TableColumn from "./components/table/table-column.vue";
-import * as echarts from "_echarts@5.4.3@echarts";
 import RingPieChart from "./components/chart/ring-pie-chart.vue";
 
 export default {
@@ -348,6 +347,11 @@ export default {
           ]
         },
       },
+      paths:{
+        "营业额": "/turnover-detail",
+        "成本": "/turnover-detail",
+        "毛利": "/turnover-detail",
+      },
       charts:{}
     }
   },
@@ -364,7 +368,9 @@ export default {
         this.charts[chartsKey].resize();
       }
     },
-    testClick(){
+    routerTo(path){
+      console.log(path)
+      this.$router.push({path: path});
     }
   },
   mounted() {

src/module/index/router/index_router.js

@@ -4,6 +4,7 @@ import Main from '../index.vue'
 import index from '../../databoard/index.vue'
 import MainBarChart from "../../databoard/components/chart/main-bar-chart.vue";
 import WinnersList from "../../databoard/components/card/winners-list.vue";
+import TurnoverDetail from "../../databoard/databoard/turnover-detail.vue";
 
 Vue.use(Router)
 
@@ -28,6 +29,11 @@ export default new Router({
       path: '/winner_list',
       name: 'winnerList',
       component: WinnersList
+    },
+    {
+      path: '/turnover-detail',
+      name: 'turnoverDetail',
+      component: TurnoverDetail
     }
   ]
 })