2023-11-16

supervise-report-ui/src/main.js

@@ -49,9 +49,9 @@ VueAMap.initAMapApiLoader({
 
 Vue.config.productionTip = false
 
-let token = null
-// let token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyTm8iOiI4NWUwYWY0Yi1lMGJhLTQyM2UtOTIxMS1kYjI2MDg2NTgwM2YiLCJpc3MiOiJXQksiLCJleHAiOjE3MDAyMDA0MzJ9.S-GQgEwnJIW7miKc6KF5w_le5YpsWyCdqkHAzBqwpmE'
-token = GetQueryString('token')
+// let token = null
+let token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyTm8iOiI4NWUwYWY0Yi1lMGJhLTQyM2UtOTIxMS1kYjI2MDg2NTgwM2YiLCJpc3MiOiJXQksiLCJleHAiOjE3MDAyMTA3MjF9.wq9OgbpBnuvHdJsVzaVA1FM4pdhY-dJM9GUGSkp5mPk'
+// token = GetQueryString('token')
 if (token) {
   setStorage(token)
   const href = window.location.href

supervise-report-ui/src/router/index.js

@@ -32,19 +32,19 @@ export const constantRoutes = [
 
   }, {
     path: '/index',
-    redirect: '/projectDaily/index',
-    // component: Layout,
-    // children: [{
-    //   path: '/index',
-    //   component: () =>
-    //     import('@/views/index.vue'),
-    //   name: 'index',
-    //   meta: {
-    //     title: '主页',
-    //     noCache: true,
-    //     affix: true
-    //   }
-    // }]
+    // redirect: '/projectDaily/index',
+    component: Layout,
+    children: [{
+      path: '/index',
+      component: () =>
+        import('@/views/index.vue'),
+      name: 'index',
+      meta: {
+        title: '主页',
+        noCache: true,
+        affix: true
+      }
+    }]
   },
   ...codemenu,
   {

supervise-report-ui/src/utils/index.js

@@ -45,7 +45,9 @@ export function parseTime(time, cFormat) {
   const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
     const value = formatObj[key]
     // Note: getDay() returns 0 on Sunday
-    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
+    if (key === 'a') {
+      return ['日', '一', '二', '三', '四', '五', '六'][value]
+    }
     return value.toString().padStart(2, '0')
   })
   return time_str
@@ -115,3 +117,59 @@ export function param2Obj(url) {
   })
   return obj
 }
+export function getDateRang(val) {
+  const now = new Date(); // 当前日期
+  const nowDayOfWeek = now.getDay(); // 今天本周的第几天
+  const nowDay = now.getDate(); // 当前日
+  const nowMonth = now.getMonth(); // 当前月
+  const nowYear = now.getFullYear(); // 当前年
+  const jd = Math.ceil((nowMonth + 1) / 3);
+  let startTime;
+  let endTime;
+  let customTime = [];
+  switch (val) {
+    case 'yesterday': // 昨日
+      startTime = new Date(nowYear, nowMonth, nowDay - 1);
+      endTime = new Date(nowYear, nowMonth, nowDay - 1);
+      break;
+    case 'week': // 本周
+      startTime = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek);
+      endTime = new Date(nowYear, nowMonth, nowDay + 6 - nowDayOfWeek);
+      break;
+    case 'pastWeek': // 近 7 日
+      startTime = new Date(nowYear, nowMonth, nowDay - 6);
+      endTime = new Date(nowYear, nowMonth, nowDay);
+      break;
+    case 'month': // 本月
+      startTime = new Date(nowYear, nowMonth, 1);
+      endTime = new Date(nowYear, nowMonth + 1, 0);
+      break;
+    case 'pastMonth': // 近 31 日
+      startTime = new Date(nowYear, nowMonth, nowDay - 30);
+      endTime = new Date(nowYear, nowMonth, nowDay);
+      break;
+    case 'quarter': // 本季度
+      startTime = new Date(nowYear, (jd - 1) * 3, 1);
+      endTime = new Date(nowYear, jd * 3, 0);
+      break;
+    case 'year': // 今年
+      startTime = new Date(nowYear, 0, 1);
+      endTime = new Date(nowYear, 11, 31);
+      break;
+    default: // 自定义时间
+      customTime = val.split(' - ');
+      break;
+  }
+  // return customTime.length ? customTime : [formatDate(startTime), formatDate(endTime)];
+  return formatDate(startTime)
+}
+
+
+export function formatDate(date) {
+  const y = date.getFullYear();
+  let m = date.getMonth() + 1;
+  m = m < 10 ? `0${m}` : m;
+  let d = date.getDate();
+  d = d < 10 ? `0${d}` : d;
+  return `${y}-${m}-${d}`;
+}

supervise-report-ui/src/views/index - 副本.vue

@@ -0,0 +1,506 @@
+<template>
+
+  <div class="index" style="height: calc(100vh - 200px);overflow-x: hidden;overflow-y: auto;">
+
+    <div class="index_top">
+
+      <div style="flex: 1;">
+        <span class="index_top_text" @click="show">数据总览</span>
+        <el-date-picker v-model="params.date" type="date" clearable value-format="yyyy-MM-dd" placeholder="选择日期" />
+      </div>
+
+      <!-- <div class="index_top_right">{{info.notice}}</div> -->
+
+    </div>
+
+    <div class="index_content">
+
+      <div class="index_content_top">
+
+        <div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
+
+          <img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
+
+          <div style="display: flex;flex-direction: column; margin-left: 10px;">
+            <span style="font-size: 20px;">￥27608927.45</span>
+            <div style="margin-top: 10px;">
+              <span style="font-size: 14px;color: #999;">当月销售商品收到现金</span>
+              <span style="font-size: 14px; margin-left: 10px; color: #13BDA0 ;">↑ 25.6%</span>
+            </div>
+          </div>
+
+        </div>
+
+        <div style="flex: 0.3;" />
+
+        <div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
+
+          <img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
+
+          <div style="display: flex;flex-direction: column; margin-left: 10px;">
+            <span style="font-size: 20px;">￥1244255.22</span>
+            <div style="margin-top: 10px;">
+              <span style="font-size: 14px;color: #999;">其他与营业活动有关的现金</span>
+              <span style="font-size: 14px; margin-left: 10px; color: #13BDA0 ;">↑ 9.8%</span>
+            </div>
+          </div>
+
+        </div>
+
+        <div style="flex: 0.3;" />
+
+        <div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
+
+          <img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
+
+          <div style="display: flex;flex-direction: column; margin-left: 10px;">
+            <span style="font-size: 20px;">￥636449.84</span>
+            <div style="margin-top: 10px;">
+              <span style="font-size: 14px;color: #999;">分销商进货额</span>
+              <span style="font-size: 14px; margin-left: 10px; color: #FF4747  ;">↓ 15.6%</span>
+            </div>
+          </div>
+
+        </div>
+
+        <div style="flex: 0.3;" />
+
+        <div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
+
+          <img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
+
+          <div style="display: flex;flex-direction: column; margin-left: 10px;">
+            <span style="font-size: 20px;">￥3822945.45</span>
+            <div style="margin-top: 10px;">
+              <span style="font-size: 14px;color: #999;">实际发货额</span>
+              <span style="font-size: 14px; margin-left: 10px; color: #FF4747 ;">↓ 15.6%</span>
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+
+      <div class="index_content_bottom">
+
+        <div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
+          <span style="font-weight: 600;">销售报表</span>
+          <div id="main1" ref="main1" class="middle" />
+        </div>
+
+        <div style="flex: 0.1;" />
+
+        <div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
+          <span style="font-weight: 600;">在途商品</span>
+          <div id="main2" ref="main2" class="middle" />
+        </div>
+
+      </div>
+
+    </div>
+
+    <!-- <div class="index_bottom">
+
+      <div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 0.4;">
+        <div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
+          <span style="font-weight: 600;">快捷操作</span>
+          <span style="color: #4386FF; font-size: 13px;  text-decoration: underline;">查看更多</span>
+        </div>
+
+        <div style="display: flex;align-items: center; margin-top: 10px;">
+          <img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />
+          <span style="font-weight: 500;margin-left: 10px;">销售报表</span>
+
+        </div>
+
+        <div style="display: flex;align-items: center; margin-top: 10px;">
+          <img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />
+          <span style="font-weight: 500;margin-left: 10px;">销售汇总日报表</span>
+
+        </div>
+
+        <div style="display: flex;align-items: center; margin-top: 10px;">
+          <img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />
+          <span style="font-weight: 500;margin-left: 10px;">在途商品管理表</span>
+
+        </div>
+
+        <div style="display: flex;align-items: center; margin-top: 10px;">
+          <img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />
+          <span style="font-weight: 500;margin-left: 10px;">在途商品汇总统计表</span>
+
+        </div>
+
+      </div>
+
+      <div style="flex: 0.1;"></div> -->
+
+    <!-- <div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
+        <div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
+          <span style="font-weight: 600;">最新消息</span>
+          <span style="color: #4386FF; font-size: 13px;  text-decoration: underline;">查看更多</span>
+        </div>
+
+        <div style="margin-top: 20px;" v-for="(item, index) in newMessageList" :key="index">
+          <div
+            style="display: flex;flex-direction: row; justify-content: space-between; align-items: center; padding-top: 20px;"
+            @click="companyInfo(item.sid)">
+            <span
+              style="font-size: 16px;color: #444;overflow: hidden;margin-right:20px;flex: 1;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1 ;-webkit-box-orient: vertical;">{{ item.name }}</span>
+            <span style="font-size: 13px;color: #999;">{{ item.date }}</span>
+          </div>
+        </div>
+
+      </div> -->
+
+    <!-- <div style="flex: 0.1;"></div> -->
+
+    <!-- <div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
+        <div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
+          <span style="font-weight: 600;">警报中心</span>
+          <span style="color: #4386FF; font-size: 13px;  text-decoration: underline;">查看更多</span>
+        </div>
+
+        <div style="margin-top: 20px;" v-for="(item, index) in larmCenterList" :key="index">
+          <div
+            style="display: flex;flex-direction: row; justify-content: space-between; align-items: center; padding-top: 20px;"
+            @click="companyInfo(item.sid)">
+            <span style="font-size: 16px;color: #444;overflow: hidden;margin-right:20px;flex: 1;
+                 text-overflow: ellipsis;
+                 display: -webkit-box;
+                 -webkit-line-clamp: 1 ;
+                 -webkit-box-orient: vertical;">{{ item.name }}</span>
+            <span style="font-size: 13px;color: #999;">{{ item.date }}</span>
+          </div>
+        </div> -->
+
+    <!-- </div> -->
+  </div>
+  </div>
+</template>
+
+</div>
+<script>
+  import * as echarts from 'echarts'
+  import {
+    login1
+  } from '@/api/system/user/login.js'
+  export default {
+    name: '',
+    data() {
+      return {
+        token: '',
+        params: {
+          date: null
+        },
+        info: {
+          date: '',
+          notice: '通知：请于2023年3月3日16点向***3189帐户回款1231234元。[点击回款]'
+        },
+        newMessageList: [{
+          sid: '1',
+          name: '[消息]您的订单已经审核完毕等待放款。',
+          date: '2023-01-01'
+
+        }, {
+          sid: '2',
+          name: '[通知]通知仓库商品产生1级风险，请及时做出回复。',
+          date: '2023-01-01'
+
+        }, {
+          sid: '3',
+          name: '[消息]您的订单由于商品不存在被退回。',
+          date: '2023-01-01'
+
+        }, {
+          sid: '4',
+          name: '[消息]请于2023年3月3日16点向***3189帐户回款231234元。',
+          date: '2023-01-01'
+
+        }],
+        larmCenterList: [{
+            sid: '1',
+            name: '仓库于2023年3月3日产生1级风险。',
+            date: '2023-01-01'
+
+          }, {
+            sid: '2',
+            name: '[通知]通知仓库商品产生1级出回复。',
+            date: '2023-01-01'
+
+          }, {
+            sid: '3',
+            name: '[消息]您的订单由于商品不存在被退回。',
+            date: '2023-01-01'
+
+          }, {
+            sid: '4',
+            name: '[消息]请于2**3189帐户回款231234元。',
+            date: '2023-01-01'
+
+          }
+
+        ]
+      }
+    },
+    mounted() {
+      this.drawLine1()
+      this.drawLine2()
+    },
+
+    methods: {
+      show() {
+        this.drawLine1()
+        this.drawLine2()
+      },
+      drawLine1() {
+        // let mychart = echarts.init(this.$refs.main1)
+        var myChart = echarts.init(document.getElementById('main1'))
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'cross',
+              crossStyle: {
+                color: '#999'
+              }
+            }
+          },
+          toolbox: {
+            feature: {
+              dataView: {
+                // 数据视图
+                show: false,
+                readOnly: false
+              },
+              magicType: {
+                // 切换图形
+                show: false,
+                type: ['line', 'bar']
+              },
+              // 还原
+              restore: {
+                show: false
+              },
+              // 下载
+              saveAsImage: {
+                show: false
+              }
+
+            }
+          },
+          grid: {
+            height: 220
+          },
+          legend: {
+            data: ['分销商进货额', '实际发货额']
+          },
+          xAxis: [{
+            type: 'category',
+            data: ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6', '1-7'],
+            axisPointer: {
+              type: 'shadow'
+            }
+          }],
+          yAxis: [{
+              type: 'value',
+              name: '人民币/万元',
+              min: 0,
+              max: 250,
+              interval: 50,
+              axisLabel: {
+                formatter: '{value}'
+              }
+            },
+            {
+              type: 'value',
+              name: '百分比%',
+              min: 0,
+              max: 25,
+              interval: 5,
+              axisLabel: {
+                formatter: '{value}'
+              }
+            }
+          ],
+          series: [{
+              name: '分销商进货额',
+              type: 'bar',
+              tooltip: {
+                valueFormatter: function(value) {
+                  return value + ' 万元'
+                }
+              },
+              data: [
+                2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+              ]
+            },
+            {
+              name: '实际发货额',
+              type: 'bar',
+              tooltip: {
+                valueFormatter: function(value) {
+                  return value + ' 万元'
+                }
+              },
+              data: [
+                2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+              ]
+            }
+          ]
+        })
+      },
+
+      // 饼状图图初始化
+      drawLine2() {
+        // 基于准备好的dom，初始化echarts实例
+        // let mychart =  echarts.init(this.$refs.main2)
+        var myChart = echarts.init(document.getElementById('main2'))
+        // 绘制图表
+        // console.log('option', obj)
+        myChart.setOption({
+          legend: {
+            top: 'bottom'
+          },
+          toolbox: {
+            show: true,
+            feature: {
+              mark: {
+                show: true
+              },
+              // 数据图标
+              dataView: {
+                show: false,
+                readOnly: false
+              },
+              // 刷新图标
+              restore: {
+                show: false
+              },
+              // 下载图标
+              saveAsImage: {
+                show: false
+              }
+            }
+          },
+          tooltip: {
+            show: true,
+            trigger: 'item'
+          },
+          series: [{
+            name: '在途商品',
+            type: 'pie',
+            radius: [20, 100],
+            center: ['50%', '40%'],
+            roseType: 'area',
+            itemStyle: {
+              borderRadius: 8
+            },
+            data: [{
+                'value': 2313123,
+                'name': '订单总额'
+              },
+              {
+                'value': 4359354,
+                'name': '实际到货价值'
+              },
+              {
+                'value': 2313123,
+                'name': '在途货价值'
+              },
+              {
+                'value': 2313123,
+                'name': '超出价值'
+              }
+            ]
+          }]
+        })
+      }
+
+      //  	getToken(){
+      //  		let params = {
+      //  			password: "329653",
+      //					roleSid: "",
+      //					token: "",
+      //					userName: "15097329653",
+      //					verifyCode: ""
+      //  		}
+      //  		login1(params).then(res => {
+      //  			this.token = res.data.token
+      //  			window.sessionStorage.setItem('token', res.data.token)
+      //        })
+      //  	}
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .imgDemo {
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(#fff, #f5f7f4, #fff);
+  }
+
+  .middle {
+    justify-content: center;
+    width: 100%;
+    height: 300px;
+
+  }
+
+  .index {
+    padding: 40px 80px;
+    background: #FFFFFF;
+
+    .index_top {
+
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .index_top_text {
+        font-size: 25px;
+        font-weight: bold;
+        color: #000;
+        margin-right: 20px;
+      }
+
+      .index_top_right {
+        font-size: 14px;
+        font-weight: bold;
+        color: #FF5046;
+      }
+    }
+    .index_content {
+      display: flex;
+      flex-direction: column;
+      margin-top: 30px;
+
+      .index_content_top {
+        display: flex;
+        flex-direction: row;
+      }
+
+      .index_content_bottom {
+        display: flex;
+        flex-direction: row;
+        margin-top: 60px;
+      }
+      .item_border {
+    border-radius: 10px;
+    border: 1px solid #cddbf7;
+}
+    }
+    .index_bottom {
+      margin-top: 20px;
+      display: flex;
+      .item_border {
+    border-radius: 10px;
+    border: 1px solid #cddbf7;
+}
+    }
+  }
+
+  canvas {}
+</style>

supervise-report-ui/src/views/index.vue

@@ -1,506 +1,453 @@
 <template>
 
-  <div class="index" style="height: calc(100vh - 200px);overflow-x: hidden;overflow-y: auto;">
+  <div class="index">
 
-    <div class="index_top">
+    <div class="title">
 
-      <div style="flex: 1;">
-        <span class="index_top_text" @click="show">数据总览</span>
-        <el-date-picker v-model="params.date" type="date" clearable value-format="yyyy-MM-dd" placeholder="选择日期" />
-      </div>
+      <span class="title-text">数据总览</span>
 
-      <!-- <div class="index_top_right">{{info.notice}}</div> -->
+      <div class="title-select">
 
-    </div>
+        <el-select v-model="wareValue" placeholder="请选择仓库" style="width: 250px;margin-right: 50px;">
+          <el-option v-for="item in warehouse" :key="item.value" :label="item.label" :value="item.value">
+          </el-option>
+        </el-select>
 
-    <div class="index_content">
+        <el-date-picker v-model="times" @change="selectTime" type="date" placeholder="选择日期" format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd" style="width: 200px;">
+        </el-date-picker>
 
-      <div class="index_content_top">
+      </div>
 
-        <div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
+    </div>
 
-          <img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
+    <div class="top">
 
-          <div style="display: flex;flex-direction: column; margin-left: 10px;">
-            <span style="font-size: 20px;">￥27608927.45</span>
-            <div style="margin-top: 10px;">
-              <span style="font-size: 14px;color: #999;">当月销售商品收到现金</span>
-              <span style="font-size: 14px; margin-left: 10px; color: #13BDA0 ;">↑ 25.6%</span>
-            </div>
-          </div>
+      <div class="top-left">
 
-        </div>
+        <div class="top-left-item">
 
-        <div style="flex: 0.3;" />
+          <div class="top-left-item-left">
+            <img src="@/assets/loginImg/data.png" />
+            <span>动产质押类项目</span>
+          </div>
+          <div class="top-left-item-centre">
+            <span class="top-left-item-centre-span">1</span>
+            <span>个</span>
+          </div>
+          <span class="top-left-item-right">165161655元</span>
 
-        <div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
+        </div>
 
-          <img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
+        <div class="top-left-item">
 
-          <div style="display: flex;flex-direction: column; margin-left: 10px;">
-            <span style="font-size: 20px;">￥1244255.22</span>
-            <div style="margin-top: 10px;">
-              <span style="font-size: 14px;color: #999;">其他与营业活动有关的现金</span>
-              <span style="font-size: 14px; margin-left: 10px; color: #13BDA0 ;">↑ 9.8%</span>
-            </div>
+          <div class="top-left-item-left">
+            <img src="@/assets/loginImg/file.png" />
+            <span>保证类项目</span>
+          </div>
+          <div class="top-left-item-centre">
+            <span class="top-left-item-centre-span">1</span>
+            <span>个</span>
           </div>
+          <span class="top-left-item-right">165161655元</span>
 
         </div>
 
-        <div style="flex: 0.3;" />
-
-        <div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
-
-          <img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
+        <div class="top-left-item">
 
-          <div style="display: flex;flex-direction: column; margin-left: 10px;">
-            <span style="font-size: 20px;">￥636449.84</span>
-            <div style="margin-top: 10px;">
-              <span style="font-size: 14px;color: #999;">分销商进货额</span>
-              <span style="font-size: 14px; margin-left: 10px; color: #FF4747  ;">↓ 15.6%</span>
-            </div>
+          <div class="top-left-item-left">
+            <img src="@/assets/loginImg/projet.png" />
+            <span>应收帐款质押类项目</span>
           </div>
+          <div class="top-left-item-centre">
+            <span class="top-left-item-centre-span">1</span>
+            <span>个</span>
+          </div>
+          <span class="top-left-item-right">165161655元</span>
 
         </div>
 
-        <div style="flex: 0.3;" />
 
-        <div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">
+      </div>
+
+      <div class="top-right">
 
-          <img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;">
+        <div class="top-right-item">
 
-          <div style="display: flex;flex-direction: column; margin-left: 10px;">
-            <span style="font-size: 20px;">￥3822945.45</span>
-            <div style="margin-top: 10px;">
-              <span style="font-size: 14px;color: #999;">实际发货额</span>
-              <span style="font-size: 14px; margin-left: 10px; color: #FF4747 ;">↓ 15.6%</span>
-            </div>
-          </div>
+          <span class="top-right-item-text1">账户余额</span>
+          <span class="top-right-item-text2">￥155651.15</span>
+          <span class="top-right-item-text3">↑ 15.66%</span>
+          <span class="top-right-item-text4">↓ 12.21%</span>
 
         </div>
+        <div class="top-right-item-view"></div>
 
-      </div>
+        <div class="top-right-item">
 
-      <div class="index_content_bottom">
+          <span class="top-right-item-text1">应收账款</span>
+          <span class="top-right-item-text2">￥155651.15</span>
+          <span class="top-right-item-text3">↑ 15.66%</span>
+          <span class="top-right-item-text4">↓ 12.21%</span>
 
-        <div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
-          <span style="font-weight: 600;">销售报表</span>
-          <div id="main1" ref="main1" class="middle" />
         </div>
+        <div class="top-right-item-view"></div>
 
-        <div style="flex: 0.1;" />
+        <div class="top-right-item">
 
-        <div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
-          <span style="font-weight: 600;">在途商品</span>
-          <div id="main2" ref="main2" class="middle" />
-        </div>
+          <span class="top-right-item-text1">库存货值</span>
+          <span class="top-right-item-text2">￥155651.15</span>
+          <span class="top-right-item-text3">↑ 15.66%</span>
+          <span class="top-right-item-text4">↓ 12.21%</span>
 
-      </div>
+        </div>
+        <div class="top-right-item-view"></div>
 
-    </div>
+        <div class="top-right-item">
 
-    <!-- <div class="index_bottom">
+          <span class="top-right-item-text1">在途货值</span>
+          <span class="top-right-item-text2">￥155651.15</span>
+          <span class="top-right-item-text3">↑ 15.66%</span>
+          <span class="top-right-item-text4">↓ 12.21%</span>
 
-      <div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 0.4;">
-        <div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
-          <span style="font-weight: 600;">快捷操作</span>
-          <span style="color: #4386FF; font-size: 13px;  text-decoration: underline;">查看更多</span>
         </div>
+        <span class="top-right-item-view"></span>
 
-        <div style="display: flex;align-items: center; margin-top: 10px;">
-          <img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />
-          <span style="font-weight: 500;margin-left: 10px;">销售报表</span>
-
-        </div>
+        <div class="top-right-item">
 
-        <div style="display: flex;align-items: center; margin-top: 10px;">
-          <img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />
-          <span style="font-weight: 500;margin-left: 10px;">销售汇总日报表</span>
+          <span class="top-right-item-text1">预付款</span>
+          <span class="top-right-item-text2">￥155651.15</span>
+          <span class="top-right-item-text3">↑ 15.66%</span>
+          <span class="top-right-item-text4">↓ 12.21%</span>
 
         </div>
 
-        <div style="display: flex;align-items: center; margin-top: 10px;">
-          <img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />
-          <span style="font-weight: 500;margin-left: 10px;">在途商品管理表</span>
 
-        </div>
+      </div>
+
+    </div>
 
-        <div style="display: flex;align-items: center; margin-top: 10px;">
-          <img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />
-          <span style="font-weight: 500;margin-left: 10px;">在途商品汇总统计表</span>
+    <div class="centre">
 
-        </div>
+      <div class="centre-title">
 
+        <img src="@/assets/loginImg/char.png" />
+        <span>库存分析图</span>
+        <div class="centre-title-view"></div>
       </div>
 
-      <div style="flex: 0.1;"></div> -->
+      <div id="main" style="width: 100%;height: 20px;margin-top: 20px;"></div>
 
-    <!-- <div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
-        <div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
-          <span style="font-weight: 600;">最新消息</span>
-          <span style="color: #4386FF; font-size: 13px;  text-decoration: underline;">查看更多</span>
-        </div>
+    </div>
 
-        <div style="margin-top: 20px;" v-for="(item, index) in newMessageList" :key="index">
-          <div
-            style="display: flex;flex-direction: row; justify-content: space-between; align-items: center; padding-top: 20px;"
-            @click="companyInfo(item.sid)">
-            <span
-              style="font-size: 16px;color: #444;overflow: hidden;margin-right:20px;flex: 1;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1 ;-webkit-box-orient: vertical;">{{ item.name }}</span>
-            <span style="font-size: 13px;color: #999;">{{ item.date }}</span>
-          </div>
-        </div>
 
-      </div> -->
+    <div class="bom">
 
-    <!-- <div style="flex: 0.1;"></div> -->
 
-    <!-- <div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
-        <div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
-          <span style="font-weight: 600;">警报中心</span>
-          <span style="color: #4386FF; font-size: 13px;  text-decoration: underline;">查看更多</span>
-        </div>
 
-        <div style="margin-top: 20px;" v-for="(item, index) in larmCenterList" :key="index">
-          <div
-            style="display: flex;flex-direction: row; justify-content: space-between; align-items: center; padding-top: 20px;"
-            @click="companyInfo(item.sid)">
-            <span style="font-size: 16px;color: #444;overflow: hidden;margin-right:20px;flex: 1;
-                 text-overflow: ellipsis;
-                 display: -webkit-box;
-                 -webkit-line-clamp: 1 ;
-                 -webkit-box-orient: vertical;">{{ item.name }}</span>
-            <span style="font-size: 13px;color: #999;">{{ item.date }}</span>
-          </div>
-        </div> -->
+    </div>
 
-    <!-- </div> -->
-  </div>
   </div>
+
 </template>
 
 </div>
 <script>
   import * as echarts from 'echarts'
   import {
-    login1
-  } from '@/api/system/user/login.js'
+    getDateRang
+  } from '@/utils/index'
   export default {
     name: '',
     data() {
       return {
-        token: '',
-        params: {
-          date: null
-        },
-        info: {
-          date: '',
-          notice: '通知：请于2023年3月3日16点向***3189帐户回款1231234元。[点击回款]'
-        },
-        newMessageList: [{
-          sid: '1',
-          name: '[消息]您的订单已经审核完毕等待放款。',
-          date: '2023-01-01'
-
-        }, {
-          sid: '2',
-          name: '[通知]通知仓库商品产生1级风险，请及时做出回复。',
-          date: '2023-01-01'
-
-        }, {
-          sid: '3',
-          name: '[消息]您的订单由于商品不存在被退回。',
-          date: '2023-01-01'
-
-        }, {
-          sid: '4',
-          name: '[消息]请于2023年3月3日16点向***3189帐户回款231234元。',
-          date: '2023-01-01'
-
-        }],
-        larmCenterList: [{
-            sid: '1',
-            name: '仓库于2023年3月3日产生1级风险。',
-            date: '2023-01-01'
-
-          }, {
-            sid: '2',
-            name: '[通知]通知仓库商品产生1级出回复。',
-            date: '2023-01-01'
-
-          }, {
-            sid: '3',
-            name: '[消息]您的订单由于商品不存在被退回。',
-            date: '2023-01-01'
-
-          }, {
-            sid: '4',
-            name: '[消息]请于2**3189帐户回款231234元。',
-            date: '2023-01-01'
+        times: getDateRang('yesterday'),
+        wareValue: "",
+        warehouse: [
 
+          {
+            label: "111111111",
+            value: "项目1"
+          },
+          {
+            label: "222222",
+            value: "项目2"
+          },
+          {
+            label: "333333",
+            value: "项目3"
           }
-
         ]
+
       }
     },
-    mounted() {
-      this.drawLine1()
-      this.drawLine2()
+    created() {
+      this.drawLine()
     },
 
     methods: {
-      show() {
-        this.drawLine1()
-        this.drawLine2()
+
+      selectTime(val) {
+        console.log('val:', val)
+
+        this.times = val
       },
-      drawLine1() {
-        // let mychart = echarts.init(this.$refs.main1)
-        var myChart = echarts.init(document.getElementById('main1'))
+
+      // 折线图初始化
+      drawLine() {
+        // 基于准备好的dom，初始化echarts实例
+        var myChart = echarts.init(document.getElementById('main'));
         // 绘制图表
+        console.log('option', obj)
         myChart.setOption({
+          title: {
+            text: 'Stacked Line'
+          },
           tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'cross',
-              crossStyle: {
-                color: '#999'
-              }
-            }
+            trigger: 'axis'
+          },
+          legend: {
+            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
           },
           toolbox: {
             feature: {
-              dataView: {
-                // 数据视图
-                show: false,
-                readOnly: false
-              },
-              magicType: {
-                // 切换图形
-                show: false,
-                type: ['line', 'bar']
-              },
-              // 还原
-              restore: {
-                show: false
-              },
-              // 下载
-              saveAsImage: {
-                show: false
-              }
-
+              saveAsImage: {}
             }
           },
-          grid: {
-            height: 220
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
           },
-          legend: {
-            data: ['分销商进货额', '实际发货额']
+          yAxis: {
+            type: 'value'
           },
-          xAxis: [{
-            type: 'category',
-            data: ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6', '1-7'],
-            axisPointer: {
-              type: 'shadow'
-            }
-          }],
-          yAxis: [{
-              type: 'value',
-              name: '人民币/万元',
-              min: 0,
-              max: 250,
-              interval: 50,
-              axisLabel: {
-                formatter: '{value}'
-              }
+          series: [{
+              name: 'Email',
+              type: 'line',
+              stack: 'Total',
+              data: [120, 132, 101, 134, 90, 230, 210]
             },
             {
-              type: 'value',
-              name: '百分比%',
-              min: 0,
-              max: 25,
-              interval: 5,
-              axisLabel: {
-                formatter: '{value}'
-              }
-            }
-          ],
-          series: [{
-              name: '分销商进货额',
-              type: 'bar',
-              tooltip: {
-                valueFormatter: function(value) {
-                  return value + ' 万元'
-                }
-              },
-              data: [
-                2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
-              ]
+              name: 'Union Ads',
+              type: 'line',
+              stack: 'Total',
+              data: [220, 182, 191, 234, 290, 330, 310]
+            },
+            {
+              name: 'Video Ads',
+              type: 'line',
+              stack: 'Total',
+              data: [150, 232, 201, 154, 190, 330, 410]
+            },
+            {
+              name: 'Direct',
+              type: 'line',
+              stack: 'Total',
+              data: [320, 332, 301, 334, 390, 330, 320]
             },
             {
-              name: '实际发货额',
-              type: 'bar',
-              tooltip: {
-                valueFormatter: function(value) {
-                  return value + ' 万元'
-                }
-              },
-              data: [
-                2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
-              ]
+              name: 'Search Engine',
+              type: 'line',
+              stack: 'Total',
+              data: [820, 932, 901, 934, 1290, 1330, 1320]
             }
           ]
         })
       },
 
-      // 饼状图图初始化
-      drawLine2() {
-        // 基于准备好的dom，初始化echarts实例
-        // let mychart =  echarts.init(this.$refs.main2)
-        var myChart = echarts.init(document.getElementById('main2'))
-        // 绘制图表
-        // console.log('option', obj)
-        myChart.setOption({
-          legend: {
-            top: 'bottom'
-          },
-          toolbox: {
-            show: true,
-            feature: {
-              mark: {
-                show: true
-              },
-              // 数据图标
-              dataView: {
-                show: false,
-                readOnly: false
-              },
-              // 刷新图标
-              restore: {
-                show: false
-              },
-              // 下载图标
-              saveAsImage: {
-                show: false
-              }
-            }
-          },
-          tooltip: {
-            show: true,
-            trigger: 'item'
-          },
-          series: [{
-            name: '在途商品',
-            type: 'pie',
-            radius: [20, 100],
-            center: ['50%', '40%'],
-            roseType: 'area',
-            itemStyle: {
-              borderRadius: 8
-            },
-            data: [{
-                'value': 2313123,
-                'name': '订单总额'
-              },
-              {
-                'value': 4359354,
-                'name': '实际到货价值'
-              },
-              {
-                'value': 2313123,
-                'name': '在途货价值'
-              },
-              {
-                'value': 2313123,
-                'name': '超出价值'
-              }
-            ]
-          }]
-        })
-      }
 
-      //  	getToken(){
-      //  		let params = {
-      //  			password: "329653",
-      //					roleSid: "",
-      //					token: "",
-      //					userName: "15097329653",
-      //					verifyCode: ""
-      //  		}
-      //  		login1(params).then(res => {
-      //  			this.token = res.data.token
-      //  			window.sessionStorage.setItem('token', res.data.token)
-      //        })
-      //  	}
     }
   }
 </script>
 
 <style lang="scss" scoped>
-  .imgDemo {
-    width: 100%;
-    height: 100%;
-    background: radial-gradient(#fff, #f5f7f4, #fff);
-  }
-
-  .middle {
-    justify-content: center;
-    width: 100%;
-    height: 300px;
-
+  ::v-deep .el-input__inner {
+    font-size: 20px;
+    font-weight: 600;
+    font-family: sans-serif;
+    color: #101010;
+    text-align: right;
+    padding-right: 40px;
   }
 
   .index {
-    padding: 40px 80px;
-    background: #FFFFFF;
-
-    .index_top {
-
+    width: 100%;
+    height: 100%;
+    // overflow-x: hidden;
+    // overflow-y: auto;
+    background: #fff;
+    padding-left: 50px;
+    padding-right: 50px;
+    padding-top: 50px;
+
+    .title {
       display: flex;
       flex-direction: row;
       align-items: center;
+      padding-bottom: 30px;
+      border-bottom: #BBBBBB solid 3px;
 
-      .index_top_text {
+      .title-text {
+        flex: 1;
         font-size: 25px;
-        font-weight: bold;
-        color: #000;
-        margin-right: 20px;
-      }
-
-      .index_top_right {
-        font-size: 14px;
-        font-weight: bold;
-        color: #FF5046;
+        color: #101010;
+        font-weight: 600;
+        font-family: sans-serif;
       }
     }
-    .index_content {
+
+    .top {
+      margin-top: 20px;
       display: flex;
-      flex-direction: column;
-      margin-top: 30px;
+      width: 100%;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
 
-      .index_content_top {
+      .top-left {
+        width: 35%;
         display: flex;
-        flex-direction: row;
+        flex-direction: column;
+
+        .top-left-item {
+          margin-top: 10px;
+          margin-bottom: 10px;
+          display: flex;
+          width: 100%;
+          flex-direction: row;
+          align-items: center;
+
+          .top-left-item-left {
+            width: 50%;
+            align-items: center;
+            display: flex;
+            flex-direction: row;
+
+            img {
+              width: 25px;
+              height: 25px;
+            }
+
+            span {
+              font-size: 20px;
+              font-weight: 600;
+              font-family: sans-serif;
+              color: #101010;
+              margin-left: 20px;
+
+            }
+          }
+
+          .top-left-item-centre {
+            width: 20%;
+
+            .top-left-item-centre-span {
+              font-size: 18px;
+              color: #6C6C6C;
+              padding-bottom: 1px;
+              margin-left: 2px;
+              margin-right: 5px;
+              border-bottom: 1px solid #6C6C6C;
+
+            }
+
+          }
+
+          .top-left-item-right {
+            width: 30%;
+            font-size: 18px;
+            color: #101010;
+          }
+        }
       }
 
-      .index_content_bottom {
+      .top-right {
+        width: 55%;
         display: flex;
         flex-direction: row;
-        margin-top: 60px;
+        align-items: center;
+
+        .top-right-item {
+          flex: 1;
+          margin-left: 5px;
+          margin-right: 5px;
+          display: flex;
+          flex-direction: column;
+
+          .top-right-item-text1 {
+            font-size: 14px;
+            color: #999999;
+          }
+
+          .top-right-item-text2 {
+            margin-top: 15px;
+            margin-bottom: 12px;
+            font-size: 20px;
+            color: #101010;
+            font-weight: 600;
+            font-family: sans-serif;
+          }
+
+          .top-right-item-text3 {
+            font-size: 14px;
+            color: #FF5006;
+          }
+
+          .top-right-item-text4 {
+            font-size: 14px;
+            color: #58A55C;
+          }
+        }
+
+        .top-right-item-view {
+          width: 1px;
+          background: #bbb;
+          height: 80px;
+          margin-right: 20px;
+        }
       }
-      .item_border {
-    border-radius: 10px;
-    border: 1px solid #cddbf7;
-}
     }
-    .index_bottom {
-      margin-top: 20px;
+
+    .centre {
+      margin-top: 24px;
       display: flex;
-      .item_border {
-    border-radius: 10px;
-    border: 1px solid #cddbf7;
-}
+      width: 100%;
+      flex-direction: column;
+
+      .centre-title {
+        width: 100%;
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+
+        img {
+          width: 30px;
+          height: 30px;
+        }
+
+        span {
+          font-size: 20px;
+          font-weight: 600;
+          font-family: sans-serif;
+          color: #101010;
+          margin-left: 10px;
+
+        }
+
+        .centre-title-view {
+          margin-left: 10px;
+          margin-top: 10px;
+          flex: 1;
+          height: 3px;
+          background: #efefef;
+        }
+      }
     }
   }
-
-  canvas {}
 </style>