md

src/views/emis/emisSettleBill/PayBackStat/PayBackLineGL.vue

@@ -0,0 +1,296 @@
+<template>
+  <div class="dashboard-container">
+
+
+      <el-row :gutter="10" >
+            <el-col :span="12">
+                <CardWithHeader header="运单趋势(最近1个月)"  height="400px">
+                  <template v-slot:body>
+                    <LineOrderChart :chart-data="orderStateData" />
+                  </template>
+                </CardWithHeader>
+            </el-col>
+
+            <el-col :span="12">
+                <CardWithHeader header="收款趋势(最近1个月)"  height="400px">
+                  <template v-slot:body>
+                    <LineOrderChart :chart-data="recdStateData" />
+                  </template>
+                </CardWithHeader>
+            </el-col>
+
+      </el-row>
+
+  </div>
+</template>
+
+<script>
+
+import { getQueryStatInfoMap,getLatestMonthCreateOrderMapList } from "@/api/emis/emisWaybill";
+import {timeDiffTime,timeFormat} from '@/utils/dateUtils'
+
+import { calculateRecedMoney } from "@/api/emis/emisSettleBill";
+
+import CardWithHeader from '@/components/CardWithHeader/index.vue';
+import LineOrderChart from '@/views/emis/common/LineOrderChart.vue';
+
+import { mapGetters } from 'vuex'
+export default {
+  name: 'Index',
+  components: {
+    CardWithHeader,
+    LineOrderChart
+  },
+  data() {
+      return {
+        loading: false,
+        noticeList:[],
+        orderStateData:{
+          xAxisData:[],
+          orderStateData:[]
+        },
+        recdStateData:{
+          xAxisData:[],
+          orderStateData:[]
+        },
+
+        quickActionList:[],
+        queryStatInfoMap:null,
+        dateRange:[],
+        layout: [
+        { x: 0, y: 0, w: 3, h: 2, i: '1', static: false },
+        { x: 6, y: 0, w: 3, h: 2, i: '2', static: false },
+      ],
+
+      }
+  },
+  computed: {
+      ...mapGetters(['avatar', 'nickName','ownerSiteName']),
+  },
+  created() {
+    this.initOrderStatData();
+    this.initRecdStatData();
+  },
+  methods: {
+
+     initOrderStatData(){
+
+      // 查询统计
+      let qParam={
+        sendSiteCode:null,
+        params:{
+          sendSiteCode:null,
+          problemQueryType:2,
+          problemQueryIds:'173,170,151',
+        }
+      }
+
+      if(this.$store.getters.ownerSiteCode!='88888'){
+        qParam.sendSiteCode=this.$store.getters.ownerSiteCode;
+      }
+
+      const end = new Date()
+      const start = new Date()
+      start.setHours(0,0,0,0)
+      end.setHours(23,59,59,0)
+      this.dateRange=[timeFormat(start), timeFormat(end)]
+
+
+      let extQParam=this.addDateRange(qParam, this.dateRange,"sendDate");
+
+       getQueryStatInfoMap(extQParam).then(response => {
+        this.queryStatInfoMap = response.data;
+      });
+
+      getLatestMonthCreateOrderMapList().then(response => {
+        console.log("====>getLatestMonthCreateOrderMapList===>",response);
+
+        let xData=[];
+        let yData=[];
+        // 做数据转换
+        response.data.forEach(item => {
+            xData.push(item.createDay);
+            yData.push(item.totalNum);
+        });
+
+        this.orderStateData.xAxisData=[...xData];
+        this.orderStateData.orderStateData=[...yData];
+        console.log("====>this.orderStateData===>",this.orderStateData);
+
+      });
+
+     },
+     // 收款数据图表统计
+     initRecdStatData(){
+        // 查询统计
+        let qParam={
+        }
+
+        const end = new Date()
+        const start = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+        start.setHours(0,0,0,0)
+        end.setHours(23,59,59,0)
+        this.dateRange=[timeFormat(start), timeFormat(end)]
+        let extQParam=this.addDateRange(qParam, this.dateRange,"Date");
+        calculateRecedMoney(extQParam).then(response => {
+          console.log("====>calculateRecedMoney===>",response);
+          let xData=[];
+          let yData=[];
+          // 做数据转换
+          response.data.forEach(item => {
+              xData.push(item.tradeDay);
+              yData.push(item.payMoney);
+          });
+
+          this.recdStateData.xAxisData=[...xData];
+          this.recdStateData.orderStateData=[...yData];
+          console.log("====>this.recdStateData===>",this.recdStateData);
+
+        });
+
+     },
+     goRouterPath(clickPath) {
+      // 跳转预警详情页面
+      this.$router.push({
+        path: clickPath,
+        query: {
+        },
+      });
+    },
+     ishttp(url) {
+        return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
+     },
+     change(val) {
+      const path = val.path;
+      if(this.ishttp(val.path)) {
+        // http(s):// 路径新窗口打开
+        const pindex = path.indexOf("http");
+        window.open(path.substr(pindex, path.length), "_blank");
+      } else {
+        this.$router.push(val.path)
+      }
+      this.search = ''
+      this.options = []
+      this.$nextTick(() => {
+        this.show = false
+      })
+      this.initQuickActionList();
+    },
+
+     layoutUpdatedEvent(newLayout) {
+        this.layout = newLayout;
+     },
+     moveEvent(){
+
+     },
+     movedEvent(){
+
+     },
+     cardLayOut(){
+
+     }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.h-overview {
+    text-align: center;
+
+    .title {
+      margin-top: 10px;
+      font-size: 14px;
+      color: var(--el-text-color-regular);
+    }
+
+    .count {
+        margin-top: 10px;
+        span {
+            font-size: 20px;
+            color: #000;
+            font-weight: 500;
+            line-height: 32px;
+            cursor: pointer;
+        }
+    }
+}
+
+.xd-home-notice-item {
+  padding: 10px 8px;
+  font-size: 13px;
+}
+
+
+.chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
+}
+
+.h-systemInfo {
+    margin-left: 18px;
+    height: 216px;
+}
+@-moz-document url-prefix() {
+    .h-systemInfo {
+        height: auto;
+    }
+}
+
+.system-label {
+    font-weight: 400 !important;
+    font-size: 14px !important;
+    color: #1f2329;
+}
+
+.system-content {
+    font-size: 13px !important;
+}
+
+.monitor-tags {
+    position: absolute;
+    top: -10px;
+    left: 20px;
+
+    .el-tag {
+        margin-right: 10px;
+        margin-bottom: 10px;
+    }
+}
+
+.right-count {
+    flex-shrink: 0;
+    text-align: right;
+    white-space: nowrap;
+
+    .count-item {
+      display: inline-block;
+      margin: 0 4px 0 24px;
+
+      .el-tag{
+        width: 26px;
+        height: 26px;
+        border-radius: 50%;
+      }
+
+      .header{
+        display: flex;
+        align-items: center;
+        margin-bottom: 4px;
+        font-size: 14px;
+        font-weight: 800;
+
+        .title{
+          margin-left: 8px;
+        }
+      }
+      .num{
+        font-weight: normal;
+        text-align: center;
+      }
+    }
+}
+
+
+</style>