首页和大屏代码提交

package.json

@@ -36,13 +36,15 @@
     "path-to-regexp": "6.2.0",
     "pinia": "2.0.22",
     "screenfull": "6.0.0",
+    "spark-md5": "^3.0.2",
     "vform3-builds": "3.0.8",
     "vue": "3.2.45",
     "vue-cropper": "1.0.3",
     "vue-echarts": "^6.7.1",
     "vue-i18n": "9.2.2",
     "vue-router": "4.1.4",
-    "vue-types": "^5.0.3"
+    "vue-types": "^5.0.3",
+    "vue3-seamless-scroll": "^2.0.1"
   },
   "devDependencies": {
     "@iconify/json": "^2.2.40",

pnpm-lock.yaml

@@ -62,6 +62,9 @@ dependencies:
   screenfull:
     specifier: 6.0.0
     version: 6.0.0
+  spark-md5:
+    specifier: ^3.0.2
+    version: 3.0.2
   vform3-builds:
     specifier: 3.0.8
     version: 3.0.8
@@ -83,6 +86,9 @@ dependencies:
   vue-types:
     specifier: ^5.0.3
     version: 5.1.1(vue@3.2.45)
+  vue3-seamless-scroll:
+    specifier: ^2.0.1
+    version: 2.0.1
 
 devDependencies:
   '@iconify/json':
@@ -745,8 +751,8 @@ packages:
       vue-i18n:
         optional: true
     dependencies:
-      '@intlify/message-compiler': 10.0.0-alpha.2
+      '@intlify/message-compiler': 10.0.0-alpha.3
-      '@intlify/shared': 10.0.0-alpha.2
+      '@intlify/shared': 10.0.0-alpha.3
       jsonc-eslint-parser: 1.4.1
       source-map: 0.6.1
       vue-i18n: 9.2.2(vue@3.2.45)
@@ -768,11 +774,11 @@ packages:
     dependencies:
       '@intlify/shared': 9.2.2
 
-  /@intlify/message-compiler@10.0.0-alpha.2:
+  /@intlify/message-compiler@10.0.0-alpha.3:
-    resolution: {integrity: sha512-OGwttsMwB2BUzhZLraoAfAqcza5UyLMEU013ort3LbmdE6ke/pFONFyxjNQdmFWzW2K868AIVgwx4zo8lbmhjg==}
+    resolution: {integrity: sha512-WjM1KAl5enpOfprfVAJ3FzwACmizZFPgyV0sn+QXoWH8BG2ahVkf7uVEqQH0mvUr2rKKaScwpzhH3wZ5F7ZdPw==}
     engines: {node: '>= 16'}
     dependencies:
-      '@intlify/shared': 10.0.0-alpha.2
+      '@intlify/shared': 10.0.0-alpha.3
       source-map-js: 1.0.2
     dev: true
 
@@ -783,8 +789,8 @@ packages:
       '@intlify/shared': 9.2.2
       source-map: 0.6.1
 
-  /@intlify/shared@10.0.0-alpha.2:
+  /@intlify/shared@10.0.0-alpha.3:
-    resolution: {integrity: sha512-pWlpsC3IqkDuIH/5bNlyyiUbAXYymeNXkznORzPWT3qpAe8MazPOm14wMHGn/wESCdB5b9txQson4+CH0ym1hQ==}
+    resolution: {integrity: sha512-fi2q48i+C6sSCAt3vOj/9LD3tkr1wcvLt+ifZEHrpPiwHCyKLDYGp5qBNUHUBBA/iqFTeWdtHUbHE9z9OeTXkw==}
     engines: {node: '>= 16'}
     dev: true
 
@@ -808,7 +814,7 @@ packages:
         optional: true
     dependencies:
       '@intlify/bundle-utils': 4.0.0(vue-i18n@9.2.2)
-      '@intlify/shared': 10.0.0-alpha.2
+      '@intlify/shared': 10.0.0-alpha.3
       '@rollup/pluginutils': 4.2.1
       '@vue/compiler-sfc': 3.2.45
       debug: 4.3.4
@@ -4524,6 +4530,10 @@ packages:
     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
     deprecated: Please use @jridgewell/sourcemap-codec instead
 
+  /spark-md5@3.0.2:
+    resolution: {integrity: sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw==}
+    dev: false
+
   /split-string@3.1.0:
     resolution: {integrity: sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==}
     engines: {node: '>=0.10.0'}
@@ -4695,6 +4705,11 @@ packages:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
 
+  /throttle-debounce@5.0.0:
+    resolution: {integrity: sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==}
+    engines: {node: '>=12.22'}
+    dev: false
+
   /tinybench@2.6.0:
     resolution: {integrity: sha512-N8hW3PG/3aOoZAN5V/NSAEDz0ZixDSSt5b/a05iqtpgfLWMSVuCo7w0k2vVvEjdrIoeGqZzweX2WlyioNIHchA==}
     dev: true
@@ -5332,6 +5347,12 @@ packages:
       vue: 3.2.45
     dev: false
 
+  /vue3-seamless-scroll@2.0.1:
+    resolution: {integrity: sha512-mI3BaDU3pjcPUhVSw3/xNKdfPBDABTi/OdZaZqKysx4cSdNfGRbVvGNDzzptBbJ5S7imv5T55l6x/SqgnxKreg==}
+    dependencies:
+      throttle-debounce: 5.0.0
+    dev: false
+
   /vue@3.2.45:
     resolution: {integrity: sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA==}
     dependencies:

src/components/ImageUpload/index.vue

@@ -1,42 +1,29 @@
 <template>
-  <div class="component-upload-image">
+    <div class="component-upload-image">
-    <el-upload
+        <el-upload multiple :action="uploadImgUrl" list-type="picture-card" :on-success="handleUploadSuccess"
-      multiple
+            :before-upload="handleBeforeUpload" :limit="limit" :on-error="handleUploadError" :on-exceed="handleExceed"
-      :action="uploadImgUrl"
+            ref="imageUpload" :before-remove="handleDelete" :show-file-list="true" :headers="headers"
-      list-type="picture-card"
+            :file-list="fileList" :on-preview="handlePictureCardPreview" :class="{ hide: fileList.length >= limit }">
-      :on-success="handleUploadSuccess"
+            <el-icon class="avatar-uploader-icon">
-      :before-upload="handleBeforeUpload"
+                <plus />
-      :limit="limit"
+            </el-icon>
-      :on-error="handleUploadError"
+        </el-upload>
-      :on-exceed="handleExceed"
+        <!-- 上传提示 -->
-      ref="imageUpload"
+        <div class="el-upload__tip" v-if="showTip">
-      :before-remove="handleDelete"
+            请上传
-      :show-file-list="true"
+            <template v-if="fileSize">
-      :headers="headers"
+                大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
-      :file-list="fileList"
+            </template>
-      :on-preview="handlePictureCardPreview"
+            <template v-if="fileType">
-      :class="{ hide: fileList.length >= limit }"
+                格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
-    >
+            </template>
-      <el-icon class="avatar-uploader-icon">
+            的文件
-        <plus />
+        </div>
-      </el-icon>
-    </el-upload>
-    <!-- 上传提示 -->
-    <div class="el-upload__tip" v-if="showTip">
-      请上传
-      <template v-if="fileSize">
-        大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
-      </template>
-      <template v-if="fileType">
-        格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
-      </template>
-      的文件
-    </div>
 
-    <el-dialog v-model="dialogVisible" title="预览" width="800px" append-to-body>
+        <el-dialog v-model="dialogVisible" title="预览" width="800px" append-to-body>
-      <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
+            <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
-    </el-dialog>
+        </el-dialog>
-  </div>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -44,7 +31,8 @@ import { listByIds, delOss } from "@/api/system/oss";
 import { ComponentInternalInstance } from "vue";
 import { OssVO } from "@/api/system/oss/types";
 import { propTypes } from '@/utils/propTypes';
-import {globalHeaders} from "@/utils/request";
+import { globalHeaders } from "@/utils/request";
+import SparkMD5 from 'spark-md5'
 
 const props = defineProps({
     modelValue: [String, Object, Array],
@@ -109,6 +97,8 @@ watch(() => props.modelValue, async val => {
 
 /** 上传前loading加载 */
 const handleBeforeUpload = (file: any) => {
+    getMD5(file)
+
     let isImg = false;
     if (props.fileType.length) {
         let fileExtension = "";
@@ -206,6 +196,19 @@ const listToString = (list: any[], separator?: string) => {
     }
     return strs != "" ? strs.substring(0, strs.length - 1) : "";
 }
+
+const getMD5 = (file: any) => {
+    const spark = new SparkMD5.ArrayBuffer()
+    const fileReader = new FileReader()
+    fileReader.onload = (e: any) => {
+        spark.append(e.target.result)
+        const md5 = spark.end()
+        console.log('md5', md5)
+        // file.md5 = md5
+        // upload(file)
+    }
+    fileReader.readAsArrayBuffer(file)
+}
 </script>
 
 <style scoped lang="scss">

src/views/bigScreen/index.vue

@@ -61,19 +61,24 @@
       </div>
 
       <div class="item-right">
-        <div class="item-right-1 boxall">
-          <div class="alltitle">标题名称</div>
-          <div class="boxnav">
-            <v-chart :option="rightBar1Option" autoresize />
-          </div>
-        </div>
-
         <div class="item-right-2 boxall">
           <div class="alltitle">标题名称</div>
           <div class="boxnav">
-            <table border="0" cellspacing="0">
+            <div class="item-th">
+              <span>字段1</span>
+              <span>字段2</span>
+              <span>字段3</span>
+            </div>
+            <vue3-seamless-scroll :list="list" class="scroll">
+              <div class="item" v-for="(item, index) in list" :key="index">
+                <span>{{ item.title }}</span>
+                <span>{{ item.date }}</span>
+                <span>{{ item.date }}</span>
+              </div>
+            </vue3-seamless-scroll>
+            <!-- <table border="0" cellspacing="0">
               <tr>
-                <th></th>
+                <th>字段</th>
                 <th>字段</th>
                 <th>字段</th>
                 <th>字段</th>
@@ -115,7 +120,14 @@
                 <td>10</td>
                 <td> 199</td>
               </tr>
-            </table>
+            </table> -->
+          </div>
+        </div>
+
+        <div class="item-right-1 boxall">
+          <div class="alltitle">标题名称</div>
+          <div class="boxnav">
+            <v-chart :option="rightBar1Option" autoresize />
           </div>
         </div>
 
@@ -133,6 +145,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
+import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
 import '@/utils/flexible'
 import * as echarts from 'echarts';
 import { use } from 'echarts/core'
@@ -165,6 +178,44 @@ function time() {
   showTime.value = y + "年" + mt + "月" + day + "日" + h + "时" + m + "分" + s + "秒";
 }
 
+const list = ref([
+  {
+    title: "展示数据第1条",
+    date: Date.now(),
+  },
+  {
+    title: "展示数据第2条",
+    date: Date.now(),
+  },
+  {
+    title: "展示数据第3条",
+    date: Date.now(),
+  },
+  {
+    title: "展示数据第4条",
+    date: Date.now(),
+  },
+  {
+    title: "展示数据第5条",
+    date: Date.now(),
+  },
+  {
+    title: "展示数据第6条",
+    date: Date.now(),
+  },
+  {
+    title: "展示数据第7条",
+    date: Date.now(),
+  },
+  {
+    title: "展示数据第8条",
+    date: Date.now(),
+  },
+  {
+    title: "展示数据第9条",
+    date: Date.now(),
+  },
+]);
 
 onMounted(() => {
   time()
@@ -1054,6 +1105,7 @@ li {
       padding: .0625rem;
       margin-left: .125rem;
       margin-right: .125rem;
+      margin-top: 10px;
 
       .no-hd {
         height: .75rem;
@@ -1132,12 +1184,12 @@ li {
     }
 
     table th {
-      font-size: 0.2rem;
+      font-size: .225rem;
       background: rgba(0, 0, 0, .1);
     }
 
     table td {
-      font-size: 0.2rem;
+      font-size: 0.2125rem;
       color: rgba(255, 255, 255, .6);
     }
 
@@ -1146,6 +1198,41 @@ li {
       border-bottom: 1px solid rgba(255, 255, 255, .1);
       padding: .1rem 0;
     }
+
+    .item-th {
+      border: 1px solid rgba(255, 255, 255, .1);
+      padding: .1rem 0;
+      font-size: .2rem;
+      color: rgba(255, 255, 255, .6);
+      background: rgba(0, 0, 0, .1);
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+
+      span {
+        flex: 0 1 33.33%;
+      }
+    }
+
+    .scroll {
+      height: 2.375rem;
+      width: 100%;
+      overflow: hidden;
+    }
+
+    .scroll .item {
+      border: 1px solid rgba(255, 255, 255, .1);
+      padding: .1rem 0;
+      font-size: .2rem;
+      color: rgba(255, 255, 255, .6);
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+
+      span {
+        flex: 0 1 33.33%;
+      }
+    }
   }
 }
 </style>

src/views/index.vue

@@ -3,53 +3,28 @@
     <div class="item header">
       <el-card>
         <div class="card-header">
-          <div class="user-info">
+          <ul>
-            <div> <img :src="userStore.avatar" /></div>
+            <li><img :src="userStore.avatar" />{{ getGreeting() }}</li>
-            <div>上午好，{{ userStore.nickname }}</div>
+            <li>
-
+              <el-button round>
-            <el-button round style="margin-left: 20px;">
+                <router-link target="_blank" to="/bigScreen">
-              <router-link target="_blank" to="/bigScreen">
+                  <el-icon>
-                <el-icon>
+                    <FullScreen />
-                  <FullScreen />
+                  </el-icon><span>可视大屏</span>
-                </el-icon><span>可视大屏</span>
+                </router-link>
-              </router-link>
+              </el-button>
-            </el-button>
+            </li>
-          </div>
+          </ul>
-
-          <div class="user-list">
-            <ul>
-              <li>
-                <el-icon color="#50DCB6" size="25px">
-                  <Message />
-                </el-icon>
-                <span>消息</span>
-                <div>200</div>
-              </li>
-              <li>
-                <el-icon color="#50DCB6" size="25px">
-                  <Message />
-                </el-icon>
-                <span>待办</span>
-                <div>200</div>
-              </li>
-              <li>
-                <el-icon color="#50DCB6" size="25px">
-                  <Message />
-                </el-icon>
-                <span>项目</span>
-                <div>200</div>
-              </li>
-            </ul>
-          </div>
         </div>
       </el-card>
     </div>
-    <div class="item" v-for="(item, index) in 4">
+
+    <div class="item">
       <el-card style="height: 200px;">
         <template #header>
           <div class="card-header">
-            <span>访客数</span>
+            <span>总用户数</span>
-            <el-tag type="success">日</el-tag>
+            <!-- <el-tag type="success">日</el-tag> -->
           </div>
         </template>
 
@@ -66,7 +41,7 @@
             </li>
             <li>
               <div class="card-item-2">
-                <span>总访客数</span>
+                <span>总用户数</span>
                 <span>2000</span>
               </div>
             </li>
@@ -75,8 +50,109 @@
       </el-card>
     </div>
 
-    <div class="item item-chart" v-for="(item, index) in 4">
+    <div class="item">
-      <v-chart :option="option" autoresize />
+      <el-card style="height: 200px;">
+        <template #header>
+          <div class="card-header">
+            <span>总测评数</span>
+            <!-- <el-tag type="success">日</el-tag> -->
+          </div>
+        </template>
+
+        <div class="card-content">
+          <ul>
+            <li>
+              <div class="card-item-1">
+                <span>2000</span>
+
+                <el-icon color="#FA6B6D" size="40px">
+                  <Avatar />
+                </el-icon>
+              </div>
+            </li>
+            <li>
+              <div class="card-item-2">
+                <span>总测评数</span>
+                <span>2000</span>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </el-card>
+    </div>
+
+    <div class="item">
+      <el-card style="height: 200px;">
+        <template #header>
+          <div class="card-header">
+            <span>总预警数</span>
+            <!-- <el-tag type="success">日</el-tag> -->
+          </div>
+        </template>
+
+        <div class="card-content">
+          <ul>
+            <li>
+              <div class="card-item-1">
+                <span>2000</span>
+
+                <el-icon color="#FA6B6D" size="40px">
+                  <Avatar />
+                </el-icon>
+              </div>
+            </li>
+            <li>
+              <div class="card-item-2">
+                <span>总预警数</span>
+                <span>2000</span>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </el-card>
+    </div>
+
+    <div class="item">
+      <el-card style="height: 200px;">
+        <template #header>
+          <div class="card-header">
+            <span>总干预数</span>
+            <!-- <el-tag type="success">日</el-tag> -->
+          </div>
+        </template>
+
+        <div class="card-content">
+          <ul>
+            <li>
+              <div class="card-item-1">
+                <span>2000</span>
+
+                <el-icon color="#FA6B6D" size="40px">
+                  <Avatar />
+                </el-icon>
+              </div>
+            </li>
+            <li>
+              <div class="card-item-2">
+                <span>总干预数</span>
+                <span>2000</span>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </el-card>
+    </div>
+
+    <div class="item item-chart">
+      <div>
+        <v-chart :option="leftPieOption" autoresize />
+      </div>
+      <div>
+        <v-chart :option="centerBarOption" autoresize />
+      </div>
+      <div>
+        <v-chart :option="rightBarOption" autoresize />
+      </div>
     </div>
   </div>
 </template>
@@ -104,50 +180,346 @@ use([
   GridComponent
 ]);
 
+function getGreeting() {
+  // 获取当前时间
+  let timeNow = new Date();
+  // 获取当前小时
+  let hours = timeNow.getHours();
+  // 设置默认文字
+  let state = ``;
+  // 判断当前时间段
+  if (hours >= 0 && hours <= 10) {
+    state = `早上好,  ${userStore.nickname}`;
+  } else if (hours > 10 && hours <= 14) {
+    state = `中午好,  ${userStore.nickname}`;
+  } else if (hours > 14 && hours <= 18) {
+    state = `下午好,  ${userStore.nickname}`;
+  } else if (hours > 18 && hours <= 24) {
+    state = `晚上好,  ${userStore.nickname}`;
+  }
+  return state;
+}
+
+const leftPieOption = ref({
+  title: {
+    text: '预警统计',
+    subtext: '严重度',
+    x: 'center',
+    y: '40%',
+    textStyle: {
+      color: '#95989D',
+      fontSize: 20,
+      lineHeight: 10,
+    },
+    subtextStyle: {
+      color: '#95989D',
+      fontSize: 16,
+      lineHeight: 10,
+    },
+  },
+  tooltip: {
+    trigger: 'item',
+    formatter: "{b} : {c} ({d}%)"
+  },
+
+  visualMap: {
+    show: false,
+    min: 500,
+    max: 600,
+    inRange: {
+      //colorLightness: [0, 1]
+    }
+  },
+  series: [{
+    name: '访问来源',
+    type: 'pie',
+    radius: ['50%', '70%'],
+    center: ['50%', '50%'],
+    color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
+    data: [{
+      "value": 1924,
+      "name": "字段名称1"
+    }, {
+      "value": 1055,
+      "name": "字段名称2"
+    }, {
+      "value": 1532,
+      "name": "字段名称3"
+    }
+    ].sort(function (a, b) {
+      return a.value - b.value
+    }),
+    roseType: 'radius',
+
+    label: {
+      normal: {
+        formatter: ['{c|{c}万}', '{b|{b}}'].join('\n'),
+        rich: {
+          c: {
+            color: '#95989D',
+            fontSize: 20,
+            fontWeight: 'bold',
+            lineHeight: 5
+          },
+          b: {
+            color: '#95989D',
+            fontSize: 14,
+            height: 44
+          },
+        },
+      }
+    },
+    labelLine: {
+      normal: {
+        lineStyle: {
+          color: 'rgb(98,137,169)',
+        },
+        smooth: 0.2,
+        length: 10,
+        length2: 20,
+
+      }
+    }
+  }]
+})
+
+const centerBarOption = ref({
+  title: {
+    text: '年级统计',
+    x: 'right',
+    y: '1%',
+    textStyle: {
+      color: '#95989D',
+      fontSize: 20,
+      lineHeight: 10,
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: { // 坐标轴指示器，坐标轴触发有效
+      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+    }
+  },
+  legend: {
+    data: ['字段1', '字段2', '字段3'],
+    right: 'center',
+    top: 0,
+    textStyle: {
+      color: "#95989D"
+    },
+    itemWidth: 12,
+    itemHeight: 10,
+    // itemGap: 35
+  },
+  grid: {
+    left: '0',
+    right: '20',
+    bottom: '0',
+    top: '15%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    data: ['字段1', '字段2', '字段3', '字段3', '字段4', '字段5', '字段6', '字段7', '字段8', '字段9'],
+    axisLine: {
+      lineStyle: {
+        color: '#95989D'
+      }
+    },
+    axisLabel: {
+      //rotate:-90,
+      formatter: function (value: any) { return value.split("").join("\n"); },
+      textStyle: {
+        color: '#95989D',
+        fontSize: 14,
+      },
+      lineStyle: {
+        color: '#95989D',
+      }
+    }
+  },
+
+  yAxis: {
+    type: 'value',
+    splitNumber: 4,
+    axisTick: { show: false },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: '#95989D'
+      }
+    },
+    axisLabel: {
+      textStyle: {
+        color: '#95989D',
+        fontSize: 14,
+      }
+    },
+    axisLine: { show: false },
+  },
+
+  series: [{
+    name: '字段1',
+    type: 'bar',
+    stack: 'a',
+    barWidth: '30', barGap: 0,
+    itemStyle: {
+      normal: {
+        color: '#8bd46e',
+      }
+    },
+    data: [331, 497, 440, 81, 163, 366, 57, 188, 172, 2295]
+  },
+  {
+    name: '字段2',
+    type: 'bar',
+    stack: 'a',
+    barWidth: '30', barGap: 0,
+    itemStyle: {
+      normal: {
+        color: '#f5804d',
+        barBorderRadius: 0,
+      }
+    },
+    data: [48, -97, 56, -59, 90, 98, 64, 61, -8, 253]
+  },
+  {
+    name: '字段3',
+    type: 'bar',
+    stack: 'a',
+    barWidth: '30', barGap: 0,
+    itemStyle: {
+      normal: {
+        color: '#248ff7',
+        barBorderRadius: 0,
+      }
+    },
+    data: [-13, -21, -112, 5, 0, -5, 72, -3, 8, -69]
+  }
+  ]
+})
+
+const rightBarOption = ref({
+  title: {
+    text: '量表使用次数',
+    x: 'center',
+    y: '1%',
+    textStyle: {
+      color: '#95989D',
+      fontSize: 20,
+      lineHeight: 10,
+    }
+  },
+  grid: {
+    left: '2%',
+    top: '5%',
+    right: '5%',
+    bottom: '0%',
+    containLabel: true
+  },
+  xAxis: [{
+    show: false,
+  }],
+  yAxis: [{
+    axisTick: 'none',
+    axisLine: 'none',
+    offset: '7',
+    axisLabel: {
+      textStyle: {
+        color: '#95989D',
+        fontSize: '14',
+      }
+    },
+    data: ['字段1', '字段2', '字段3', '字段4', '字段5', '字段6', '字段7', '字段8', '字段9']
+
+  }, {
+    axisTick: 'none',
+    axisLine: 'none',
+    axisLabel: {
+      textStyle: {
+        color: '#95989D',
+        fontSize: '14',
+      }
+    },
+    data: [1514, 1619, 1623, 1968, 2158, 2456, 3506, 4664, 8390]
+
+  }, {
+    name: '单位：件',
+    nameGap: '50',
+    nameTextStyle: {
+      color: 'rgba(255,255,255,.6)',
+      fontSize: '16',
+    },
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(0,0,0,0)'
+      }
+    },
+    data: [],
+  }],
+  series: [{
+    name: '条',
+    type: 'bar',
+    yAxisIndex: 0,
+    data: [25, 30, 34, 40, 43, 48, 52, 56, 70],
+    label: {
+      normal: {
+        show: true,
+        position: 'right',
+        formatter: function (param: any) {
+          return param.value + '%';
+        },
+        textStyle: {
+          color: 'rgba(255,255,255,.8)',
+          fontSize: '12',
+        }
+      }
+    },
+    barWidth: 15,
+    itemStyle: {
+      normal: {
+        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+          offset: 0,
+          color: '#03c893'
+        },
+        {
+          offset: 1,
+          color: '#0091ff'
+        }
+        ]),
+        barBorderRadius: 15,
+      }
+    },
+    z: 2
+  }, {
+    name: '白框',
+    type: 'bar',
+    yAxisIndex: 1,
+    barGap: '-100%',
+    data: [99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
+    barWidth: 15,
+    itemStyle: {
+      normal: {
+        color: 'rgba(0,0,0,.2)',
+        barBorderRadius: 15,
+      }
+    },
+    z: 1
+  }]
+});
+
+
+
 // import { initWebSocket } from '@/utils/websocket';
 
 // onMounted(() => {
 //   let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'
 //   initWebSocket(protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + "/resource/websocket");
 // });
-const option = ref({
-  title: {
-    text: '图表统计',
-    left: 'center'
-  },
-  tooltip: {
-    trigger: 'item'
-  },
-  series: [
-    {
-      name: 'Access From',
-      type: 'pie',
-      radius: '50%',
-      data: [
-        { value: 1048, name: 'Search Engine' },
-        { value: 735, name: 'Direct' },
-        { value: 580, name: 'Email' },
-        { value: 484, name: 'Union Ads' },
-        { value: 300, name: 'Video Ads' }
-      ],
-      emphasis: {
-        itemStyle: {
-          shadowBlur: 10,
-          shadowOffsetX: 0,
-          shadowColor: 'rgba(0, 0, 0, 0.5)'
-        }
-      }
-    }
-  ]
-})
 </script>
 
 <style scoped lang="scss">
 .app-container {
-  // position: relative;
-  // background: url('@/assets/images/welcome.png') no-repeat top center;
-  // background-size: cover;
-  // text-align: right;
   width: 100%;
   height: calc(100vh - 85px);
   display: grid;
@@ -165,46 +537,33 @@ const option = ref({
     grid-column: 1 / 5;
 
     .card-header {
-      padding: 15px 0;
+      ul {
-      display: flex;
+        width: 100%;
-      justify-content: space-between;
-
-      .user-info {
         display: flex;
+        justify-content: space-between;
         align-items: center;
 
         img {
           height: 80px;
           border-radius: 50%;
           margin-right: 20px;
-        }
+          vertical-align: middle;
-      }
-
-      .user-list ul {
-        width: 500px;
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
-        font-size: 16px;
-
-        li {
-          flex: 0 1 100px;
-
-          span {
-            margin-left: 7px;
-          }
-
-          div {
-            color: #000;
-          }
         }
       }
     }
   }
 
   .item-chart {
-    background-color: #fff;
+    margin-top: 6px;
-    padding: 20px 5px;
+    grid-column: 1 / 5;
+    display: flex;
+    justify-content: space-between;
+
+    div {
+      flex: 0 1 33%;
+      background-color: #fff;
+      padding: 20px 0;
+    }
   }
 
   .item {