From 95b420df909117faee61ced5ab9484bb89831ed6 Mon Sep 17 00:00:00 2001
From: yangzongjia <yangzongjia>
Date: Wed, 14 Jun 2023 09:36:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=A6=96=E9=A1=B5=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Sidebar/index.vue | 275 +++++++------
 src/router/index.js                     | 120 ++++--
 src/views/index4.vue                    |   1 +
 src/views/index5.vue                    | 514 ++++++++++++++++++++++++
 src/views/index6.vue                    | 514 ++++++++++++++++++++++++
 5 files changed, 1258 insertions(+), 166 deletions(-)
 create mode 100644 src/views/index4.vue
 create mode 100644 src/views/index5.vue
 create mode 100644 src/views/index6.vue

diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 84ba837..97e250e 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -1,10 +1,9 @@
 <template>
-  <div :class="{'has-logo':showLogo}">
+  <div :class="{ 'has-logo': showLogo }">
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu :default-active="activeMenu" :background-color="variables.menuBg" :text-color="variables.menuText"
-        :unique-opened="false" :active-text-color="variables.menuActiveText" :collapse-transition="false"
-        mode="vertical">
+        :unique-opened="false" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical">
         <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
       </el-menu>
     </el-scrollbar>
@@ -12,33 +11,33 @@
 </template>
 
 <script>
-  import {
-    mapGetters
-  } from 'vuex'
-  import Logo from './Logo'
-  import SidebarItem from './SidebarItem'
-  import variables from '@/styles/variables.scss'
-  import {
-    getrolemenus,
-    loginDetails
-  } from '@/api/system/Role/role.js'
-  import {
-    getStorage
-  } from '@/utils/auth'
-  export default {
-    components: {
-      SidebarItem,
-      Logo
-    },
-    data() {
-      return {
-        YongHuid: [],
-        routes: [
+import {
+  mapGetters
+} from 'vuex'
+import Logo from './Logo'
+import SidebarItem from './SidebarItem'
+import variables from '@/styles/variables.scss'
+import {
+  getrolemenus,
+  loginDetails
+} from '@/api/system/Role/role.js'
+import {
+  getStorage
+} from '@/utils/auth'
+export default {
+  components: {
+    SidebarItem,
+    Logo
+  },
+  data() {
+    return {
+      YongHuid: [],
+      routes: [
         {
           alwaysShow: true,
           component: "index",
           meta: {
-           // icon: "el-icon-menu",
+            // icon: "el-icon-menu",
 
             icon: "icon-shouye",
 
@@ -57,7 +56,7 @@
           //   path: "/index",
           // }]
         },
-          {
+        {
           alwaysShow: true,
           component: "monitor",
           meta: {
@@ -206,7 +205,7 @@
           //   name: "/baojingchaxun/baojingchaxunList",
           //   path: "/baojingchaxun/baojingchaxunList",
           // }]
-        } ,
+        },
         {
           alwaysShow: true,
           component: "shebeizhuangtai",
@@ -297,117 +296,127 @@
           name: "",
           path: "/index4",
         },
-        // {
-        //   alwaysShow: true,
-        //   component: "daping",
-        //   meta: {
-        //     icon: "icon-jiance",
-        //     title: "布防大屏",
-        //   },
-        //   name: "",
-        //   path: "/daping",
-        // }
+        {
+          alwaysShow: true,
+          component: "index5",
+          meta: {
+            icon: "icon-rizhi2",
+            title: "index5",
+          },
+          name: "",
+          path: "/index5",
+        },
+        {
+          alwaysShow: true,
+          component: "index6",
+          meta: {
+            icon: "icon-rizhi2",
+            title: "index6",
+          },
+          name: "",
+          path: "/index6",
+        },
       ],
-        params: {
-          sourceSid: '5b8b2224-7272-4c56-a8d6-1dc426e2f3df',
-          userSid: '',
-        }
+      params: {
+        sourceSid: '5b8b2224-7272-4c56-a8d6-1dc426e2f3df',
+        userSid: '',
       }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    // routes() {
+    // f4d2e507-c4ed-451c-b364-04c08f962045
+    //   console.log('78979789', this.$router.options.routes)
+    //   return this.$router.options.routes
+    // },
+    activeMenu() {
+      // const route = this.$route
+      // const {
+      //   meta,
+      //   path
+      // } = route
+      // // if set path, the sidebar will highlight the path you set
+      // if (meta.activeMenu) {
+      //   return meta.activeMenu
+      // }
+      // return path
+      return "/index";
     },
-    computed: {
-      ...mapGetters([
-        'sidebar'
-      ]),
-      // routes() {
-      // f4d2e507-c4ed-451c-b364-04c08f962045
-      //   console.log('78979789', this.$router.options.routes)
-      //   return this.$router.options.routes
-      // },
-      activeMenu() {
-        // const route = this.$route
-        // const {
-        //   meta,
-        //   path
-        // } = route
-        // // if set path, the sidebar will highlight the path you set
-        // if (meta.activeMenu) {
-        //   return meta.activeMenu
-        // }
-        // return path
-        return "/index";
-      },
-      showLogo() {
-        return this.$store.state.settings.sidebarLogo
-      },
-      variables() {
-        return variables
-      },
-      isCollapse() {
-        return !this.sidebar.opened
-      }
+    showLogo() {
+      return this.$store.state.settings.sidebarLogo
     },
-    created() {
-      this.postHuoquyonghu()
+    variables() {
+      return variables
     },
-    methods: {
-      // 获取用户信息
-      postHuoquyonghu() {
-        // var token = getStorage()
-        // loginDetails(token).then((response) => {
-        //   console.log('resss', response)
-        //   if (response.code === '200') {
-        //     this.YongHuid = response.data
-        //     this.params.userSid = this.YongHuid.sid
-        //     getrolemenus(this.params).then((res) => {
-        //       const userRoles = this.resRouter(res.data)
-        //       userRoles.push({
-        //         path: '*',
-        //         redirect: '/404',
-        //         hidden: true
-        //       })
-        //       return userRoles
-        //     })
-        //   }
-        // })
-        this.routes.push({
-          path: "*",
-          redirect: "/404",
-          hidden: true,
-        });
-        console.log("左侧菜单", this.routes);
-        return this.routes;
-      },
-      resRouter(menus) {
-        // 递归，将后台传来数组
-        for (var i = 0; i < menus.length; i++) {
-          if (menus[i].children && menus[i].children.length != 0) {
-            this.resRouter(menus[i].children)
-          }
-          if (menus[i].children.length == 0) {
-            delete menus[i].children
-            delete menus[i].redirect
-          }
-          if (menus[i].component == '') {
-            console.log('55555', menus[i])
-            menus[i] = {
-              path: menus[i].path,
-              component: '',
-              redirect: menus[i].path,
-              children: [menus[i]],
-            }
-          } else {
-            // menus[i] = {
-            //   path: menus[i].path,
-            //   component: '',
-            //   redirect: menus[i].path,
-            //   children: [menus[i]],
-            // }
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  },
+  created() {
+    this.postHuoquyonghu()
+  },
+  methods: {
+    // 获取用户信息
+    postHuoquyonghu() {
+      // var token = getStorage()
+      // loginDetails(token).then((response) => {
+      //   console.log('resss', response)
+      //   if (response.code === '200') {
+      //     this.YongHuid = response.data
+      //     this.params.userSid = this.YongHuid.sid
+      //     getrolemenus(this.params).then((res) => {
+      //       const userRoles = this.resRouter(res.data)
+      //       userRoles.push({
+      //         path: '*',
+      //         redirect: '/404',
+      //         hidden: true
+      //       })
+      //       return userRoles
+      //     })
+      //   }
+      // })
+      this.routes.push({
+        path: "*",
+        redirect: "/404",
+        hidden: true,
+      });
+      console.log("左侧菜单", this.routes);
+      return this.routes;
+    },
+    resRouter(menus) {
+      // 递归，将后台传来数组
+      for (var i = 0; i < menus.length; i++) {
+        if (menus[i].children && menus[i].children.length != 0) {
+          this.resRouter(menus[i].children)
+        }
+        if (menus[i].children.length == 0) {
+          delete menus[i].children
+          delete menus[i].redirect
+        }
+        if (menus[i].component == '') {
+          console.log('55555', menus[i])
+          menus[i] = {
+            path: menus[i].path,
+            component: '',
+            redirect: menus[i].path,
+            children: [menus[i]],
           }
+        } else {
+          // menus[i] = {
+          //   path: menus[i].path,
+          //   component: '',
+          //   redirect: menus[i].path,
+          //   children: [menus[i]],
+          // }
         }
-        this.routes = menus
-        console.log('左侧菜单', this.routes)
-        return menus
-      },
+      }
+      this.routes = menus
+      console.log('左侧菜单', this.routes)
+      return menus
     },
-  }
+  },
+}
 </script>
diff --git a/src/router/index.js b/src/router/index.js
index ecedeb2..b2f260b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -29,7 +29,7 @@ export const constantRoutes = [
     path: "/login",
     component: () => import("@/views/login/login.vue"),
   },
- 
+
   {
     path: "/daping",
     component: () => import("@/views/daping/daping.vue"),
@@ -89,41 +89,95 @@ export const constantRoutes = [
           affix: true,
         },
       }]
-    },
+  },
+  {
+    path: "/index2",
+    component: Layout,
+    redirect: "/index2",
+    children: [
       {
         path: "/index2",
-        component: Layout,
-        redirect: "/index2",
-        children: [
-          {
-            path: "/index2",
-            component: () => import("@/views/index2.vue"),
-            name: "index2",
-            meta: {
-              title: "报警",
-              noCache: true,
-              affix: true,
-            },
-          }
-        ],
+        component: () => import("@/views/index2.vue"),
+        name: "index2",
+        meta: {
+          title: "报警",
+          noCache: true,
+          affix: true,
+        },
+      }
+    ],
+  },
+  {
+    path: "/index3",
+    component: Layout,
+    redirect: "/index3",
+    children: [
+      {
+        path: "/index3",
+        component: () => import("@/views/index3.vue"),
+        name: "index3",
+        meta: {
+          title: "报警",
+          noCache: true,
+          affix: true,
         },
-          {
-            path: "/index3",
-            component: Layout,
-            redirect: "/index3",
-            children: [
-              {
-                path: "/index3",
-                component: () => import("@/views/index3.vue"),
-                name: "index3",
-                meta: {
-                  title: "报警",
-                  noCache: true,
-                  affix: true,
-                },
-              }
-           
-            ],
+      }
+
+    ],
+  },
+  {
+    path: "/index4",
+    component: Layout,
+    redirect: "/index4",
+    children: [
+      {
+        path: "/index4",
+        component: () => import("@/views/index4.vue"),
+        name: "index4",
+        meta: {
+          title: "报警",
+          noCache: true,
+          affix: true,
+        },
+      }
+
+    ],
+  },
+  {
+    path: "/index5",
+    component: Layout,
+    redirect: "/index5",
+    children: [
+      {
+        path: "/index5",
+        component: () => import("@/views/index5.vue"),
+        name: "index5",
+        meta: {
+          title: "报警",
+          noCache: true,
+          affix: true,
+        },
+      }
+
+    ],
+  },
+  {
+    path: "/index6",
+    component: Layout,
+    redirect: "/index6",
+    children: [
+      {
+        path: "/index6",
+        component: () => import("@/views/index6.vue"),
+        name: "index6",
+        meta: {
+          title: "报警",
+          noCache: true,
+          affix: true,
+        },
+      }
+
+    ],
   },
   {
     path: "/monitor",
diff --git a/src/views/index4.vue b/src/views/index4.vue
new file mode 100644
index 0000000..565f1b0
--- /dev/null
+++ b/src/views/index4.vue
@@ -0,0 +1 @@
+231
\ No newline at end of file
diff --git a/src/views/index5.vue b/src/views/index5.vue
new file mode 100644
index 0000000..3c7e02a
--- /dev/null
+++ b/src/views/index5.vue
@@ -0,0 +1,514 @@
+<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="选择日期">
+        </el-date-picker>
+      </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>
+
+        <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>
+
+        <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>
+
+        <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>
+
+        <div style="flex: 0.1;"></div>
+
+        <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>
+
+
+    <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: 30px;
+      }
+      .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>
diff --git a/src/views/index6.vue b/src/views/index6.vue
new file mode 100644
index 0000000..3c7e02a
--- /dev/null
+++ b/src/views/index6.vue
@@ -0,0 +1,514 @@
+<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="选择日期">
+        </el-date-picker>
+      </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>
+
+        <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>
+
+        <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>
+
+        <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>
+
+        <div style="flex: 0.1;"></div>
+
+        <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>
+
+
+    <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: 30px;
+      }
+      .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>