领域细分页面提交

src/module/databoard/assets/index.css

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

src/module/databoard/components/card/winners-list.vue

@@ -3,9 +3,9 @@
     <table>
       <tbody>
       <tr v-for="(row, idx) in $props.rows" :key="idx" :style="{height: 100 / rows.length + '%'}">
-        <td><div class="col_number">{{ idx + 1 }}</div></td>
-        <td class="winner_span">{{ row.title }}</td>
-        <td v-for="(col, idz) in row.column" :key="idz">
+        <td v-if="showIcon"><div class="col_number">{{ idx + 1 }}</div></td>
+        <td class="winner_span" :style="columnsStyle['title']">{{ row.title }}</td>
+        <td v-for="(col, idz) in row.column" :key="idz" :style="columnsStyle[col.key]">
           <p class="key_span">{{ col.key }}</p>
           <p class="value_span">{{ col.value }}</p>
         </td>
@@ -19,13 +19,22 @@
 export default {
   name: "WinnersList",
   props: {
+    showIcon: {
+      type: Boolean,
+      default: true
+    },
+    columnsStyle:{
+      type: Object,
+    },
     rows: {
       type: Array,
-      default: [
+      default:function(){
+        return [
           {title: '标题列', column: [{key: '字段', value: '0'}]},
           {title: '标题列', column: [{key: '字段', value: '0'}]},
           {title: '标题列', column: [{key: '字段', value: '0'}]}
-      ]
+        ];
+      }
     }
   },
   data() {

src/module/databoard/components/chart/line-bar-chart.vue

+<template>
+  <div ref="chart" @click=""/>
+</template>
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "LineBarChart",
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  watch: {
+    data(n, o){
+      this.refreshData();
+    },
+    x(n,o){
+      this.refreshData();
+    },
+    y(n,o){
+      this.refreshData();
+    },
+    title(n, o){
+      this.refreshData();
+    },
+    formatter(n,o){
+      this.refreshData();
+    },
+    barFormatter(n,o){
+      this.refreshData();
+    },
+    lineFormatter(n,o){
+      this.refreshData();
+    },
+  },
+  methods: {
+    resizeChart() {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    },
+    refreshData(){
+      this.option.title.text = this.title;
+      this.option.dataset.source = this.data;
+      this.option.dataset.dimensions = [this.x,this.y];
+      this.option.tooltip.formatter = this.formatter;
+      this.option.series[0].label.formatter = this.barFormatter;
+      this.option.series[1].label.formatter = this.lineFormatter;
+      if (this.chart){
+        this.chart.setOption(this.option);
+      }
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      let chartDom = this.$refs.chart;
+      this.refreshData();
+      this.chart = echarts.init(chartDom);
+      this.chart.setOption(this.option);
+      window.addEventListener('resize', this.resizeChart);
+    }, 500)
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.resizeChart);
+  },
+  props: {
+    title: {
+      type: String,
+      default: "折线条形图",
+    },
+    x: {
+      type: String,
+      default: "x",
+    },
+    y: {
+      type: String,
+      default: "y",
+    },
+    data: {
+      type: Array,
+      default: function (){
+        return [
+            {
+              "x": "2月1日",
+              "y": 747,
+            },
+            {
+              "x": "2月2日",
+              "y": 786,
+            },
+            {
+              "x": "2月3日",
+              "y": 547,
+            },
+          ]
+      }
+    },
+    option:{
+      type: Object,
+      default: function () {
+        return {
+          tooltip: {
+            trigger: 'axis',
+          },
+          title: {
+            text: '折线条形图',
+            textStyle:{
+              color: 'white',
+            },
+            left: 'center'
+          },
+          grid:{
+            left: "5%",
+            right: "3%",
+          },
+          dataset: {
+            dimensions: ['x', 'y'],
+            source: [
+              {
+                "x": "2月1日",
+                "y": 747,
+              },
+              {
+                "x": "2月2日",
+                "y": 786,
+              },
+              {
+                "x": "2月3日",
+                "y": 547,
+              },
+            ]
+          },
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              interval: 0,
+              rotate: 15,
+              color: 'white'
+            }
+          },
+          yAxis: [
+            {
+              type: 'value',
+              axisLabel: {
+                color: 'white'
+              }
+            },
+            {
+              type: 'value',
+              axisLabel: {
+                color: 'white'
+              },
+              splitLine: false
+            }
+          ],
+          series: [
+            {
+              type: 'bar',
+              label: {
+                show: true,
+                position: 'top',
+                color: "#00CCD2"
+              },
+              color: {
+                type: 'linear',
+                x: 0, y: 0, x2: 0, y2: 1,
+                colorStops: [
+                  {offset: 0, color: '#00CCD2'},
+                  {offset: 1, color: '#00A2FF'}
+                ]
+              }
+
+            },
+            {
+              type: 'line',
+              color: 'red',
+              label: {
+                show: true,
+                position: 'bottom',
+                color: "red"
+              },
+            }
+          ]
+        }
+      }
+    },
+    formatter:{
+      type: Function
+    },
+    barFormatter:{
+      type: Function
+    },
+    lineFormatter:{
+      type: Function
+    }
+  },
+};
+</script>
+<style scoped>
+</style>

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

@@ -86,6 +86,7 @@ export default {
   height: var(--titleHeight);
   margin-left: 10%;
   line-height: 30px;
+  white-space: nowrap;
 }
 
 .center-title{

src/module/databoard/components/table/table-column.vue

 <template>
   <table>
     <thead v-if="showHead">
-    <tr><th>{{title}}&nbsp;</th></tr>
+    <tr><th :style="eval('title',title)">{{title}}&nbsp;</th></tr>
     </thead>
     <tbody>
-    <tr v-for="row in data"><td :style="eval(cellStyleJs,row[name])">{{row[name]}}</td></tr>
+    <tr v-for="row in data"><td :style="eval('cell',(row[name]?row[name]:''))">{{row[name]?row[name]:''}}</td></tr>
     </tbody>
   </table>
 </template>
@@ -17,12 +17,17 @@ export default {
     }
   },
   methods: {
-    eval(str,data){
-      let res;
-      if (str){
-        res = eval(str);
-      }else if (this.cellStyleFunction) {
-        res = this.cellStyleFunction(data);
+    eval(type,data){
+      let res = type === "title"?this.titleStyle:this.cellStyle;
+      if (res){
+        return res;
+      }
+      let styleJs = type === "title"?this.titleStyleJs:this.cellStyleJs;
+      let styleFunction = type === "title"?this.titleStyleFunction:this.cellStyleFunction;
+      if (styleJs){
+        res = eval(styleJs);
+      }else if (styleFunction) {
+        res = styleFunction(data);
       }
       return res;
     }
@@ -42,12 +47,24 @@ export default {
     data: {
       type: Array,
     },
+    cellStyle: {
+      type: Object,
+    },
     cellStyleJs: {
       type: String,
     },
     cellStyleFunction:{
       type: Function
     },
+    titleStyle: {
+      type: Object,
+    },
+    titleStyleJs: {
+      type: String,
+    },
+    titleStyleFunction:{
+      type: Function
+    },
   }
 
 }

src/module/databoard/databoard/order-proportion.vue

+<template>
+  <div class="turnover-detail">
+    <div class="menu">
+      <input type="button" :class="{'selectedBtn': currentBtn.subdivide === 'domain'}" value="领域细分" @click="clickBtn('subdivide','domain')">
+      <input type="button" :class="{'selectedBtn': currentBtn.subdivide === 'area'}" value="区域细分" @click="clickBtn('subdivide','area')">
+      <input type="button" :class="{'selectedBtn': currentBtn.subdivide === 'base'}" value="基地细分" @click="clickBtn('subdivide','base')">
+      <input type="button" :class="{'selectedBtn': currentBtn.subdivide === 'business'}" value="事业部细分" @click="clickBtn('subdivide','business')">
+    </div>
+    <div class="menu">
+      <input type="button" :class="{'selectedBtn': currentBtn.date === 'day'}" value="日统计" @click="clickBtn('date','day')">
+      <input type="button" :class="{'selectedBtn': currentBtn.date  === 'month'}" value="月统计" @click="clickBtn('date','month')">
+      <input type="button" :class="{'selectedBtn': currentBtn.date  === 'year'}" value="年统计" @click="clickBtn('date','year')">
+    </div>
+    <div class="card-board" v-if="currentBtn.subdivide === 'domain'">
+      <contrast-card v-for="data in currentData.head" style="height: 100%;width: 18%;" :class="{'selectCard': currentCard === data.title}" @click.native="selectCard(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: 40px; 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="card-board" v-if="currentBtn.subdivide !== 'domain'">
+      <contrast-card v-for="data in currentData.head" style="height: 100%;width: 18%;" :class="{'selectCard': currentCard === data.title}" @click.native="selectCard(data)" :style="listCardStyle">
+        <div style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 28px; display: flex; align-items: center; font-size: 14px;">
+          <table-column style="float: left;width: 35%;" :data="data.data" name="title" :title="data.title" show-head :title-style="{'font-size': '18px','padding-left':'7%','white-space': 'nowrap'}"/>
+          <table-column style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;" :data="data.data" name="today" show-head/>
+          <table-column style="float: left;width: 20%;" :data="data.data" name="yesterday" title="昨日" show-head/>
+        </div>
+      </contrast-card>
+    </div>
+    <div class="chart">
+      <display-board class="trade_left" :title="listTitle" title_size="large">
+        <winners-list style="height: 96%" id="ar_company_list" :rows="currentData[currentCard]?currentData[currentCard].list:[]" :show-icon="false" :columns-style="{'title':{'width':'50%'},'订单量（万吨）':{'width':'30%'}}"/>
+      </display-board>
+      <line-bar-chart style="width: 75%;height: 100%;" :data="currentData[currentCard]?currentData[currentCard].detail:[]" x="company" y="value" :title="chartTitle" :formatter="formatter" :line-formatter="lineFormatter"/>
+    </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";
+import data from "./mockData/order_proportion.json";
+import DisplayBoard from "../components/container/display-board.vue";
+import WinnersList from "../components/card/winners-list.vue";
+import LineBarChart from "../components/chart/line-bar-chart.vue";
+
+export default {
+  name:"OrderProportion",
+  components: {LineBarChart, WinnersList, DisplayBoard, ContrastCard, TableColumn, TitleContentMark},
+  data() {
+    return {
+      currentData: {},
+      mockData: data,
+      chart: null,
+      currentCard:null,
+      listTitle: "当日订单量占比",
+      chartTitle: "当日订单委托单位占比",
+      listCardStyle:{
+        width: "18%",
+      },
+      currentBtn:{
+        date: "day",
+        subdivide: "domain",
+      },
+    }
+  },
+  methods: {
+    back(){
+      this.$router.push({path: '/'});
+    },
+    changeDimension(){
+      this.currentData = this.mockData[this.currentBtn.subdivide][this.currentBtn.date];
+      this.currentCard = this.currentData.head[0].title;
+      this.calcCardWidth();
+    },
+    clickBtn(type,dimension){
+      this.currentBtn[type] = dimension;
+      this.changeDimension();
+    },
+    selectCard(data){
+      this.currentCard = data.title;
+    },
+    formatter(param){
+      return "订单量：<br>" + param[0].marker + param[0].name + "：\t" + param[0].data.value + "<br> " + param[1].marker + "占比：" + param[1].data.proportion + "%";
+    },
+    lineFormatter(param){
+      return param.data.proportion + '%';
+    },
+    calcCardWidth(){
+      this.listCardStyle.width = "calc((100% - 4rem) / " + this.currentData.head.length + ")";
+    }
+  },
+  mounted() {
+    this.changeDimension();
+    setTimeout(() => {
+      let chartDom = this.$refs.chart;
+      this.chart = echarts.init(chartDom);
+      this.chart.setOption(this.chartOption);
+    }, 500)
+  },
+}
+</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: 2%;
+}
+.chart{
+  width: 100%;
+  height: 65%;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 2rem 2rem 2rem;
+}
+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;
+}
+.selectCard{
+  background-color: var(--card-background-select-color) !important;
+}
+</style>

src/module/databoard/databoard/turnover-detail.vue

@@ -292,11 +292,14 @@ export default {
             color: 'white'
           }
         },
-        // Declare several bar series, each will be mapped
-        // to a column of dataset.source by default.
         series: [
             {
               type: 'bar',
+              label: {
+                show: true,
+                position: 'top',
+                color: "#00CCD2",
+              },
               color: {
                 type: 'linear',
                 x: 0, y: 0, x2: 0, y2: 1,
@@ -308,6 +311,11 @@ export default {
             },
             {
               type: 'bar',
+              label: {
+                show: true,
+                position: 'top',
+                color: "#FFFAB7",
+              },
               color: {
                 type: 'linear',
                 x: 0, y: 0, x2: 0, y2: 1,
@@ -319,6 +327,11 @@ export default {
             },
             {
               type: 'bar',
+              label: {
+                show: true,
+                position: 'top',
+                color: "#81FBB8",
+              },
               color: {
                 type: 'linear',
                 x: 0, y: 0, x2: 0, y2: 1,
@@ -339,6 +352,9 @@ export default {
   },
   watch: {},
   methods: {
+    back(){
+      this.$router.push({path: '/'});
+    },
     resizeChart() {
       if (this.chart) {
         this.chart.resize();

src/module/databoard/index.vue

@@ -88,8 +88,8 @@
       </div>
       <display-board class="trade_right" title="当日订单量占比">
         <div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
-          <ring-pie-chart ref="transportTypeChart" style="width: 100%;height: 50%;" name="运输类型占比" :data="mockData.drddlzb.transportType"/>
-          <ring-pie-chart ref="customerChart" style="width: 100%;height: 50%;" name="公司占比" :data="mockData.drddlzb.customer"/>
+          <ring-pie-chart ref="transportTypeChart" style="width: 100%;height: 50%;" name="运输类型占比" :data="mockData.drddlzb.transportType" @click.native="routerTo('/order-proportion')"/>
+          <ring-pie-chart ref="customerChart" style="width: 100%;height: 50%;" name="公司占比" :data="mockData.drddlzb.customer" @click.native="routerTo('/order-proportion')"/>
         </div>
       </display-board>
     </div>
@@ -377,7 +377,6 @@ export default {
       }
     },
     routerTo(path){
-      console.log(path)
       this.$router.push({path: path});
     },
     // 跳转已开票未收款页面

src/module/index/index.vue

@@ -2,6 +2,7 @@
   <div class="page">
     <div class="head" @click="goIndex">
       <div class="text_left">
+        <input class="btn" type="button" value="返回上级" v-if="$route.fullPath !== '/index'" @click="goIndex">
         <span>2023-08-01</span>
         <span>17:18:29</span>
         <span>星期三</span>
@@ -30,6 +31,7 @@ export default {
   },
   methods: {
     goIndex() {
+      console.log(this.$router)
       this.$router.push({path: '/'})
     },
     reload() {
@@ -37,14 +39,14 @@ export default {
       this.$nextTick(function () {
         this.isRouterAlive = true
       })
-    }
+    },
   },
   mounted() {
     // 倒计时器
     this.countDownTimer = setInterval(() => {
       this.countDown--
       if (this.countDown <= 0) {
-        this.reload()
+        // this.reload()
         this.countDown = 10
       }
     }, 1000)
@@ -69,4 +71,16 @@ export default {
     padding-left: 0;
   }
 }
+.btn{
+  height: 70%;
+  margin: 0.5%;
+  border: none;
+  font-size: 12px;
+  border-radius: 25px;
+  padding: 0 10px;
+  line-height: 100%;
+  color: #00c8d6;
+  background-color: #1234a1;
+  margin: auto;
+}
 </style>

src/module/index/router/index_router.js

@@ -7,6 +7,7 @@ import ArMonthlyBar from "../../databoard/components/chart/ar-monthly-bar.vue";
 import ArCompanyMonthlyBar from "../../databoard/components/chart/ar-company-monthly-bar.vue";
 import ArMonthlyCompanyBar from "../../databoard/components/chart/ar-monthly-company-bar.vue";
 import TurnoverDetail from "../../databoard/databoard/turnover-detail.vue";
+import OrderProportion from "../../databoard/databoard/order-proportion.vue";
 
 Vue.use(Router)
 
@@ -56,6 +57,11 @@ export default new Router({
       path: '/turnover-detail',
       name: 'turnoverDetail',
       component: TurnoverDetail
+    },
+    {
+      path: '/order-proportion',
+      name: 'OrderProportion',
+      component: OrderProportion
     }
   ]
 })