营业额详情提交

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/databoard/turnover-detail.vue

+<template>
+  <div class="turnover-detail">
+    <div class="card-board">
+      <contrast-card v-for="data in currentData.head" style="height: 100%;width: 20%;" @click.native="selectLegend(data)">
+        <title-content-mark style="color: #369afa;float: left;width: 40%;font-size: 18px" :title-style="{'font-weight': 'bold'}" :title="data.title" :content="data.amount" isBold/>
+        <div style="width: 60%; height: 100%; float:left; padding: 2% 2% 0 8%; line-height: 60px; display: flex; align-items: center;font-size: 16px;">
+          <table-column style="float: left;width: 25%;" :data="data.hb" name="title"/>
+          <table-column style="float: left;width: 40%;" :data="data.hb" name="amount"/>
+          <table-column style="float: left;width: 35%;" :data="data.hb" name="rate" cell-style-js="var res = {color: '#5eeef4'}; if(data.indexOf('+') !== -1){res.color = '#fee064'} res;"/>
+        </div>
+      </contrast-card>
+    </div>
+    <div class="menu">
+      <input type="button" :class="{'selectedBtn': currentBtn === 'day'}" value="日统计" @click="changeDimension('day')">
+      <input type="button" :class="{'selectedBtn': currentBtn === 'month'}" value="月统计" @click="changeDimension('month')">
+      <input type="button" :class="{'selectedBtn': currentBtn === 'year'}" value="年统计" @click="changeDimension('year')">
+    </div>
+    <div class="chart">
+      <div ref="chart" style="width: 100%;height: 100%;" @click=""/>
+    </div>
+  </div>
+</template>
+<script>
+
+import TitleContentMark from "../components/layout/title-content-mark.vue";
+import TableColumn from "../components/table/table-column.vue";
+import ContrastCard from "../components/card/contrast-card.vue";
+import * as echarts from "_echarts@5.4.3@echarts";
+
+export default {
+  name:"TurnoverDetail",
+  components: {ContrastCard, TableColumn, TitleContentMark},
+  data() {
+    return {
+      currentData: {},
+      mockDataDay:{
+        head:{
+          "营业额":{
+            title: "营业额",
+            amount: "20,303",
+            hb: [
+              {
+                title: "昨日",
+                amount: "21,000",
+                rate: "-3.32%",
+              },
+              {
+                title: "上月",
+                amount: "21,000",
+                rate: "+4.92%",
+              }
+            ]
+          },
+          "汽运营业额":{
+            title: "汽运营业额",
+            amount: "10,000",
+            hb: [
+              {
+                title: "昨日",
+                amount: "11,000",
+                rate: "-10.00%",
+              },
+              {
+                title: "上月",
+                amount: "10,000",
+                rate: "+0.00%",
+              }
+            ]
+          },
+          "水运营业额":{
+            title: "水运营业额",
+            amount: "20,303",
+            hb: [
+              {
+                title: "昨日",
+                amount: "11,000",
+                rate: "-10.00%",
+              },
+              {
+                title: "上月",
+                amount: "10,000",
+                rate: "+0.00%",
+              }
+            ]
+          },
+          "铁运营业额":{
+            title: "铁运营业额",
+            amount: "303",
+            hb: [
+              {
+                title: "昨日",
+                amount: "300",
+                rate: "-1.00%",
+              },
+              {
+                title: "上月",
+                amount: "301",
+                rate: "+0.64%",
+              }
+            ]
+          }
+        },
+        detail:[
+              { date: '2月1日', '汽运(元)': 0, '水运(元)': 747, '铁运(元)': 674 },
+              { date: '2月2日', '汽运(元)': 300, '水运(元)': 786, '铁运(元)': 848 },
+              { date: '2月3日', '汽运(元)': 500, '水运(元)': 547, '铁运(元)': 256 },
+              { date: '2月4日', '汽运(元)': 100, '水运(元)': 632, '铁运(元)': 677 },
+              { date: '2月5日', '汽运(元)': 300, '水运(元)': 167, '铁运(元)': 176 },
+              { date: '2月6日', '汽运(元)': 800, '水运(元)': 264, '铁运(元)': 584 },
+              { date: '2月7日', '汽运(元)': 100, '水运(元)': 116, '铁运(元)': 110 },
+              { date: '2月8日', '汽运(元)': 500, '水运(元)': 527, '铁运(元)': 610 },
+              { date: '2月9日', '汽运(元)': 1000, '水运(元)': 277, '铁运(元)': 625 },
+              { date: '2月10日', '汽运(元)': 358, '水运(元)': 854, '铁运(元)': 775 },
+              { date: '2月11日', '汽运(元)': 290, '水运(元)': 801, '铁运(元)': 355 },
+              { date: '2月12日', '汽运(元)': 239, '水运(元)': 648, '铁运(元)': 837 },
+              { date: '2月13日', '汽运(元)': 413, '水运(元)': 375, '铁运(元)': 175 },
+              { date: '2月14日', '汽运(元)': 379, '水运(元)': 678, '铁运(元)': 462 },
+              { date: '2月15日', '汽运(元)': 470, '水运(元)': 787, '铁运(元)': 707 },
+              { date: '2月16日', '汽运(元)': 893, '水运(元)': 507, '铁运(元)': 645 },
+              { date: '2月17日', '汽运(元)': 544, '水运(元)': 473, '铁运(元)': 471 },
+              { date: '2月18日', '汽运(元)': 387, '水运(元)': 799, '铁运(元)': 615 },
+              { date: '2月19日', '汽运(元)': 123, '水运(元)': 942, '铁运(元)': 988 },
+              { date: '2月20日', '汽运(元)': 795, '水运(元)': 518, '铁运(元)': 481 },
+              { date: '2月21日', '汽运(元)': 885, '水运(元)': 917, '铁运(元)': 716 },
+              { date: '2月22日', '汽运(元)': 327, '水运(元)': 682, '铁运(元)': 947 },
+              { date: '2月23日', '汽运(元)': 599, '水运(元)': 768, '铁运(元)': 284 },
+              { date: '2月24日', '汽运(元)': 731, '水运(元)': 665, '铁运(元)': 408 },
+              { date: '2月25日', '汽运(元)': 569, '水运(元)': 150, '铁运(元)': 358 },
+              { date: '2月26日', '汽运(元)': 642, '水运(元)': 747, '铁运(元)': 697 },
+              { date: '2月27日', '汽运(元)': 963, '水运(元)': 674, '铁运(元)': 532 },
+              { date: '2月28日', '汽运(元)': 522, '水运(元)': 273, '铁运(元)': 587 },
+        ]
+      },
+      mockDataMonth:{
+        head:{
+          "营业额":{
+            title: "营业额",
+            amount: "20,303",
+            hb: [
+              {
+                title: "上月",
+                amount: "21,000",
+                rate: "-3.32%",
+              },
+              {
+                title: "去年",
+                amount: "21,000",
+                rate: "+4.92%",
+              }
+            ]
+          },
+          "汽运营业额":{
+            title: "汽运营业额",
+            amount: "10,000",
+            hb: [
+              {
+                title: "上月",
+                amount: "11,000",
+                rate: "-10.00%",
+              },
+              {
+                title: "去年",
+                amount: "10,000",
+                rate: "+0.00%",
+              }
+            ]
+          },
+          "水运营业额":{
+            title: "水运营业额",
+            amount: "20,303",
+            hb: [
+              {
+                title: "上月",
+                amount: "11,000",
+                rate: "-10.00%",
+              },
+              {
+                title: "去年",
+                amount: "10,000",
+                rate: "+0.00%",
+              }
+            ]
+          },
+          "铁运营业额":{
+            title: "铁运营业额",
+            amount: "303",
+            hb: [
+              {
+                title: "上月",
+                amount: "300",
+                rate: "-1.00%",
+              },
+              {
+                title: "去年",
+                amount: "301",
+                rate: "+0.64%",
+              }
+            ]
+          }
+        },
+        detail:[
+          { date: '1月', '汽运(元)': 544, '水运(元)': 747, '铁运(元)': 674 },
+          { date: '2月', '汽运(元)': 387, '水运(元)': 747, '铁运(元)': 674 },
+          { date: '3月', '汽运(元)': 123, '水运(元)': 747, '铁运(元)': 674 },
+          { date: '4月', '汽运(元)': 795, '水运(元)': 747, '铁运(元)': 674 },
+          { date: '5月', '汽运(元)': 885, '水运(元)': 747, '铁运(元)': 674 },
+          { date: '6月', '汽运(元)': 327, '水运(元)': 747, '铁运(元)': 674 },
+          { date: '7月', '汽运(元)': 599, '水运(元)': 747, '铁运(元)': 674 },
+          { date: '8月', '汽运(元)': 731, '水运(元)': 747, '铁运(元)': 674 },
+          { date: '9月', '汽运(元)': 569, '水运(元)': 747, '铁运(元)': 674 },
+          { date: '10月', '汽运(元)': 642, '水运(元)': 747, '铁运(元)': 674 },
+          { date: '11月', '汽运(元)': 963, '水运(元)': 747, '铁运(元)': 674 },
+          { date: '12月', '汽运(元)': 522, '水运(元)': 747, '铁运(元)': 674 },
+        ]
+      },
+      mockDataYear:{
+        head:{
+        "营业额":{
+          title: "营业额",
+          amount: "20,303",
+          hb: [
+            {
+              title: "去年",
+              amount: "21,000",
+              rate: "-3.32%",
+            },
+          ]
+        },
+        "汽运营业额":{
+          title: "汽运营业额",
+          amount: "10,000",
+          hb: [
+            {
+              title: "去年",
+              amount: "11,000",
+              rate: "-10.00%",
+            },
+          ]
+        },
+        "水运营业额":{
+          title: "水运营业额",
+          amount: "20,303",
+          hb: [
+            {
+              title: "去年",
+              amount: "11,000",
+              rate: "-10.00%",
+            },
+          ]
+        },
+        "铁运营业额":{
+          title: "铁运营业额",
+          amount: "303",
+          hb: [
+            {
+              title: "去年",
+              amount: "300",
+              rate: "-1.00%",
+            },
+          ]
+        }
+        },
+        detail:[
+          { date: '2022年', '汽运(元)': 544, '水运(元)': 747, '铁运(元)': 674 },
+          { date: '2023年', '汽运(元)': 387, '水运(元)': 747, '铁运(元)': 674 },
+        ]
+      },
+      chart: null,
+      currentBtn: "day",
+      currentLegend: '汽运(元)',
+      chartOption:{
+        legend: {
+          textStyle: {
+            color: 'white'
+          }
+        },
+        tooltip: {},
+        dataset: {
+          dimensions: ['date', '汽运(元)', '水运(元)', '铁运(元)'],
+          source: []
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            interval: 0,
+            rotate: 45,
+            color: 'white'
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            color: 'white'
+          }
+        },
+        // Declare several bar series, each will be mapped
+        // to a column of dataset.source by default.
+        series: [
+            {
+              type: 'bar',
+              color: {
+                type: 'linear',
+                x: 0, y: 0, x2: 0, y2: 1,
+                colorStops: [
+                  {offset: 0, color: '#00CCD2'},
+                  {offset: 1, color: '#00A2FF'}
+                ]
+              },
+            },
+            {
+              type: 'bar',
+              color: {
+                type: 'linear',
+                x: 0, y: 0, x2: 0, y2: 1,
+                colorStops: [
+                  {offset: 0, color: '#FFFAB7'},
+                  {offset: 1, color: '#FFF459'}
+                ]
+              },
+            },
+            {
+              type: 'bar',
+              color: {
+                type: 'linear',
+                x: 0, y: 0, x2: 0, y2: 1,
+                colorStops: [
+                  {offset: 0, color: '#81FBB8'},
+                  {offset: 1, color: '#28C76F'}
+                ]
+              },
+            },
+            {
+              type: 'line',
+              color: 'red',
+              data: []
+            }
+        ]
+      }
+    }
+  },
+  watch: {},
+  methods: {
+    resizeChart() {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    },
+    changeDimension(dimension){
+      this.currentBtn = dimension;
+      switch (dimension) {
+        case 'day':
+          this.currentData = this.mockDataDay;
+          this.refreshChart();
+          break;
+        case 'month':
+          this.currentData = this.mockDataMonth;
+          this.refreshChart();
+          break;
+        case 'year':
+          this.currentData = this.mockDataYear;
+          this.refreshChart();
+          break;
+        default:
+          return;
+      }
+    },
+    refreshChart(){
+      this.chartOption.dataset.source = this.currentData.detail
+      if (this.chart){
+        this.chart.setOption(this.chartOption);
+      }
+    },
+    selectLegend(data){
+      let name;
+      this.chart.dispatchAction({
+        type: 'legendAllSelect'
+      });
+      switch (data.title) {
+        case '营业额':
+          break;
+        case '汽运营业额':
+          name = "汽运(元)";
+          break;
+        case '水运营业额':
+          name = "水运(元)";
+          break;
+        case '铁运营业额':
+          name = "铁运(元)";
+          break;
+        default:
+            break;
+      }
+      if (name){
+        this.chart.dispatchAction({
+          type: 'legendInverseSelect'
+        });
+        this.chart.dispatchAction({
+          type: 'legendSelect',
+          name: name
+        })
+        this.chartOption.series[3].encode = {x: 'date',y: name};
+        this.chartOption.series[3].data = undefined;
+      }else {
+        this.chartOption.series[3].data = [];
+      }
+      this.chart.setOption(this.chartOption);
+
+    },
+  },
+  mounted() {
+    this.currentData = this.mockDataDay;
+    this.refreshChart();
+    setTimeout(() => {
+      let chartDom = this.$refs.chart;
+      this.chart = echarts.init(chartDom);
+      this.chart.setOption(this.chartOption);
+      window.addEventListener('resize', this.resizeChart);
+    }, 500)
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.resizeChart);
+  },
+  props:{
+  },
+
+}
+</script>
+<style scoped>
+.turnover-detail{
+  width: 100%;
+  height: 100%;
+}
+.card-board{
+  width: 100%;
+  height: 25%;
+  display: flex;
+  justify-content: space-between;
+  padding: 2rem;
+}
+.menu{
+  width: 100%;
+  height: 5%;
+  display: flex;
+  align-items: center;
+  padding-left: 5%;
+}
+.chart{
+  width: 100%;
+  height: 70%;
+}
+input[type="button"]{
+  height: 80%;
+  margin: 0.5%;
+  border: none;
+  font-size: 12px;
+  border-radius: 25px;
+  padding: 0 10px;
+  color: #00c8d6;
+  background-color: #1234a1;
+}
+.selectedBtn{
+  color: #1234a1 !important;
+  background-color: #00c8d6 !important;
+}
+.unSelectedBtn{
+  color: #00c8d6;
+  background-color: #1234a1;
+}
+</style>

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
     }
   ]
 })