Trang chủ Khám phá Trợ giúp
Đăng ký Đăng nhập
web
/
archives
2
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu kéo về 0 Wiki
Browse Source

更新

ZaiZai 2 năm trước cách đây
mục cha
de105989c5
commit
acd2ffee43
7 tập tin đã thay đổi với 253 bổ sung và 38 xóa
Split View Hiển thị tình trạng sai khác
  1. 0 7
      index.html
  2. 221 0
      src/global/components/hc-border-neon/index.vue
  3. 2 0
      src/global/components/index.js
  4. 0 15
      src/styles/app/theme.scss
  5. 1 2
      src/styles/page/using/scoped/query.scss
  6. 17 6
      src/views/using/components/echarts/BarChart.vue
  7. 12 8
      src/views/using/stats.vue

+ 0 - 7
index.html
Xem Tập Tin 

@@ -9,13 +9,6 @@
 
         <link rel="stylesheet" href="/plugins/remixicon-v3.3.0/remixicon.css"/>
 
         <link rel="stylesheet" href="/plugins/fonts/index.css"/>
 
         <script type='text/javascript' src='http://47.110.251.215:6831/web-apps/apps/api/documents/api.js'></script>
 
-        <style>
 
-            @property --d {
 
-                syntax: '<angle>';
 
-                inherits: true;
 
-                initial-value: 0deg;
 
-            }
 
-        </style>
 
         <title></title>
 
     </head>
 
     <body>

+ 221 - 0
src/global/components/hc-border-neon/index.vue
Xem Tập Tin 

@@ -0,0 +1,221 @@
 
+<template>
 
+    <div class="hc-border-neon" :class="[isAlign, isNeon ? 'is-neon':'']">
 
+        <i class="top"/>
 
+        <i class="bottom"/>
 
+        <i class="left"/>
 
+        <i class="right"/>
 
+    </div>
 
+</template>
 
+
 
+<script setup>
 
+import {ref, watch} from "vue";
 
+
 
+const props = defineProps({
 
+    align: {
 
+        type: String,
 
+        default: 'left'
 
+    },
 
+    neon: {
 
+        type: Boolean,
 
+        default: false
 
+    },
 
+})
 
+
 
+const isAlign = ref(props.align)
 
+const isNeon = ref(props.neon)
 
+
 
+//监听
 
+watch(() => [
 
+    props.align,
 
+    props.neon,
 
+], ([val, neon]) => {
 
+    isAlign.value = val
 
+    isNeon.value = neon
 
+})
 
+</script>
 
+
 
+<style lang="scss">
 
+html.dark {
 
+    .hc-border-neon {
 
+        position: absolute;
 
+        top: 0;
 
+        left: 0;
 
+        bottom: 0;
 
+        right: 0;
 
+        border-radius: inherit;
 
+        overflow: hidden;
 
+        i.top {
 
+            position: absolute;
 
+            top: 0;
 
+            right: -100%;
 
+            height: 2px;
 
+            width: 100%;
 
+            background-image: linear-gradient(
 
+                    270deg,
 
+                    transparent,
 
+                    #03e9f4,
 
+                    transparent
 
+            );
 
+        }
 
+        i.bottom {
 
+            position: absolute;
 
+            bottom: 0;
 
+            left: -100%;
 
+            height: 2px;
 
+            width: 100%;
 
+            background-image: linear-gradient(
 
+                    270deg,
 
+                    transparent,
 
+                    #03e9f4,
 
+                    transparent
 
+            );
 
+        }
 
+        i.left {
 
+            position: absolute;
 
+            width: 2px;
 
+            height: 100%;
 
+            top: -100%;
 
+            left: 0;
 
+            background-image: linear-gradient(
 
+                    0deg,
 
+                    transparent,
 
+                    #03e9f4,
 
+                    transparent
 
+            );
 
+        }
 
+        i.right {
 
+            position: absolute;
 
+            width: 2px;
 
+            height: 100%;
 
+            bottom: -100%;
 
+            right: 0;
 
+            background-image: linear-gradient(
 
+                    360deg,
 
+                    transparent,
 
+                    #03e9f4,
 
+                    transparent
 
+            );
 
+        }
 
+        &.left {
 
+            i.left {
 
+                animation: hc-border-neon-two 4s linear 1s infinite;
 
+            }
 
+            i.bottom {
 
+                animation: hc-border-neon-one 4s linear 2s infinite;
 
+            }
 
+            i.right {
 
+                animation: hc-border-neon-four 4s linear 3s infinite;
 
+            }
 
+            i.top {
 
+                animation: hc-border-neon-three 4s linear infinite;
 
+            }
 
+            &.is-neon {
 
+                i.left {
 
+                    bottom: -100%;
 
+                    right: initial;
 
+                    top: initial;
 
+                    left: 0;
 
+                    animation: hc-border-neon-four 4s linear 1s infinite;
 
+                }
 
+                i.top {
 
+                    left: 0;
 
+                    right: initial;
 
+                    bottom: initial;
 
+                    animation: hc-border-neon-one 4s linear 2s infinite;
 
+                }
 
+                i.right {
 
+                    top: 0;
 
+                    bottom: initial;
 
+                    animation: hc-border-neon-two 4s linear 3s infinite;
 
+                }
 
+                i.bottom {
 
+                    bottom: 0;
 
+                    left: initial;
 
+                    right: -100%;
 
+                    animation: hc-border-neon-three 4s linear infinite;
 
+                }
 
+            }
 
+        }
 
+        &.right {
 
+            i.right {
 
+                animation: hc-border-neon-four 4s linear 1s infinite;
 
+            }
 
+            i.top {
 
+                animation: hc-border-neon-three 4s linear 2s infinite;
 
+            }
 
+            i.left {
 
+                animation: hc-border-neon-two 4s linear 3s infinite;
 
+            }
 
+            i.bottom {
 
+                animation: hc-border-neon-one 4s linear infinite;
 
+            }
 
+            &.is-neon {
 
+                i.left {
 
+                    bottom: -100%;
 
+                    right: initial;
 
+                    top: initial;
 
+                    left: 0;
 
+                    animation: hc-border-neon-four 4s linear 3s infinite;
 
+                }
 
+                i.right {
 
+                    top: 0;
 
+                    bottom: initial;
 
+                    animation: hc-border-neon-two 4s linear 1s infinite;
 
+                }
 
+                i.top {
 
+                    left: 0;
 
+                    right: initial;
 
+                    bottom: initial;
 
+                    animation: hc-border-neon-one 4s linear infinite;
 
+                }
 
+                i.bottom {
 
+                    bottom: 0;
 
+                    left: initial;
 
+                    right: -100%;
 
+                    animation: hc-border-neon-three 4s linear 2s infinite;
 
+                }
 
+            }
 
+        }
 
+    }
 
+}
 
+
 
+@keyframes hc-border-neon-one {
 
+    0% {
 
+        left: -100%;
 
+    }
 
+    50%,
 
+    100% {
 
+        left: 100%;
 
+    }
 
+}
 
+
 
+@keyframes hc-border-neon-two {
 
+    0% {
 
+        top: -100%;
 
+    }
 
+    50%,
 
+    100% {
 
+        top: 100%;
 
+    }
 
+}
 
+
 
+@keyframes hc-border-neon-three {
 
+    0% {
 
+        right: -100%;
 
+    }
 
+    50%,
 
+    100% {
 
+        right: 100%;
 
+    }
 
+}
 
+
 
+@keyframes hc-border-neon-four {
 
+    0% {
 
+        bottom: -100%;
 
+    }
 
+    50%,
 
+    100% {
 
+        bottom: 100%;
 
+    }
 
+}
 
+</style>

+ 2 - 0
src/global/components/index.js
Xem Tập Tin 

@@ -3,6 +3,7 @@ import HcSmsAuth from './hc-sms-auth/index.vue'
 
 import HcReportModal from './hc-report-modal/index.vue'
 
 import HcReportExperts from './hc-report-experts/index.vue'
 
 import HcTasksUser from './hc-tasks-user/index.vue'
 
+import HcBorderNeon from './hc-border-neon/index.vue'
 
 
 //注册全局组件
 
 export const setupComponents = (App) => {
 
@@ -11,4 +12,5 @@ export const setupComponents = (App) => {
 
     App.component('HcReportModal', HcReportModal)
 
     App.component('HcReportExperts', HcReportExperts)
 
     App.component('HcTasksUser', HcTasksUser)
 
+    App.component('HcBorderNeon', HcBorderNeon)
 
 }

+ 0 - 15
src/styles/app/theme.scss
Xem Tập Tin 

@@ -339,19 +339,4 @@ html.dark {
 
             color: white;
 
         }
 
     }
 
-    .border-neon {
 
-        &:before {
 
-            content: "";
 
-            position: absolute;
 
-            inset: -1px;
 
-            padding: 2px;
 
-            border-radius: inherit;
 
-            background: conic-gradient(from var(--d, 0deg), #21D4FD, #0000 30deg 120deg, #B721FF 150deg 180deg, #0000 210deg 300deg, #21D4FD 330deg);
 
-            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
 
-            -webkit-mask-composite: xor;
 
-            mask-composite: intersect;
 
-            --d: 0deg;
 
-            transition: .5s, 60s linear --d;
 
-        }
 
-    }
 
 }

+ 1 - 2
src/styles/page/using/scoped/query.scss
Xem Tập Tin 

@@ -347,7 +347,6 @@
 
                         white-space: nowrap;
 
                         overflow: hidden;
 
                         cursor: pointer;
 
-                        transform: skew(4deg,0);
 
                         transition: transform .2s;
 
                         &.query {
 
                             background: #ffddc6;
 
@@ -358,7 +357,7 @@
 
                             color: white;
 
                             background: #A16222;
 
                             border: 1px solid #bbbbbb;
 
-                            transform: scale(1.2) skew(4deg,0);
 
+                            transform: scale(1.2);
 
                         }
 
                     }
 
                 }

+ 17 - 6
src/views/using/components/echarts/BarChart.vue
Xem Tập Tin 

@@ -6,7 +6,9 @@
 
 
 <script setup>
 
 import * as echarts from 'echarts'
 
+import {useAppStore} from "~src/store";
 
 import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 
+const useAppState = useAppStore()
 
 const props = defineProps({
 
     datas: {
 
         type: Array,
 
@@ -22,12 +24,15 @@ const props = defineProps({
 
 let chart = null;
 
 const echart = ref(null)
 
 const datas = ref(props.datas)
 
+const AppTheme = ref(useAppState.getTheme);
 
 
 //监听
 
 watch(() => [
 
-    props.datas
 
-], ([data]) => {
 
+    props.datas,
 
+    useAppState.getTheme,
 
+], ([data, theme]) => {
 
     datas.value = data
 
+    AppTheme.value = theme
 
     setDatas(data)
 
 })
 
 
@@ -93,7 +98,10 @@ const setOptions = (AxisData, seriesData) => {
 
             }
 
         },
 
         legend: {
 
-            data: name
 
+            data: name,
 
+            textStyle: {
 
+                color: AppTheme.value === 'dark' ? '#FFFFFF' : '#000000',
 
+            },
 
         },
 
         xAxis: [
 
             {
 
@@ -103,8 +111,11 @@ const setOptions = (AxisData, seriesData) => {
 
                     width: xLabelWidth,
 
                     overflow: "breakAll",
 
                     interval: 0,
 
-                    rotate: 0
 
-                }
 
+                    rotate: 0,
 
+                    textStyle: {
 
+                        color: AppTheme.value === 'dark' ? '#FFFFFF' : '#000000',
 
+                    },
 
+                },
 
             }
 
         ],
 
         yAxis: [
 
@@ -113,7 +124,7 @@ const setOptions = (AxisData, seriesData) => {
 
                 interval: 30,
 
                 axisLabel: {
 
                     formatter: '{value}' + label
 
-                }
 
+                },
 
             }
 
         ],
 
         series: seriesData

+ 12 - 8
src/views/using/stats.vue
Xem Tập Tin 

@@ -18,13 +18,15 @@
 
                         </div>
 
                     </el-col>
 
                     <el-col :span="8" class="h-full">
 
-                        <div class="hc-chart-card-box gird border-neon animate__bounce">
 
+                        <div class="hc-chart-card-box gird">
 
+                            <HcBorderNeon align="right" neon/>
 
                             <div class="header">档案总存储</div>
 
                             <div class="body font-FZGongYHJW num-text" v-loading="isSizeLoading">
 
                                 {{ allArchiveFileSizedata }}
 
                             </div>
 
                         </div>
 
                         <div class="hc-chart-card-box gird">
 
+                            <HcBorderNeon align="right"/>
 
                             <div class="header">已组案卷</div>
 
                             <div class="body" v-loading="isHasBeenLoading">
 
                                 <ArrRoundChart ref="hasBeenChartRef" :config="hasBeenChartConfig" :datas="hasBeenChartData"/>
 
@@ -33,12 +35,14 @@
 
                     </el-col>
 
                     <el-col :span="8" class="h-full">
 
                         <div class="hc-chart-card-box gird">
 
+                            <HcBorderNeon align="left"/>
 
                             <div class="header">档案年限占比</div>
 
                             <div class="body" v-loading="isFixedLoading">
 
                                 <RoundPieChart ref="fixedChartRef" :datas="fixedChartData"/>
 
                             </div>
 
                         </div>
 
                         <div class="hc-chart-card-box gird">
 
+                            <HcBorderNeon align="left" neon/>
 
                             <div class="header">已销毁案卷</div>
 
                             <div class="body" v-loading="isDestroyLoading">
 
                                 <ArrRoundChart ref="destroyChartRef" :config="destroyChartConfig" :datas="destroyChartData"/>
 
@@ -181,7 +185,7 @@ const destroyChartRef = ref(null)
 
 const destroyChartConfig = {
 
     name: ['施工', '监理', '业主'],
 
     key: ['key1', 'key2', 'key3'],
 
-    color: ['#63686E', '#999FA6', '#42494F'],
 
+    color: ['#87ace2', '#6eb1ff', '#0e7ce5'],
 
     label: '已销毁案卷',
 
 }
 
 
@@ -245,12 +249,12 @@ const gettableData = async () => {
 
     isLoading.value=false
 
 
 }
 
-const loadData=(tree, treeNode,resolve)=>{
 
- archivesStatsApi.getArchiveTreeAndArchiveCount({ projectId: projectId.value,nodeId:tree.id,}).then((response) => {
 
-    console.log(response,'response');
 
-        let resdata=getArrValue(response.data)
 
-            resolve(resdata);
 
-        })
 
+const loadData = (tree, treeNode,resolve)=>{
 
+     archivesStatsApi.getArchiveTreeAndArchiveCount({ projectId: projectId.value,nodeId:tree.id,}).then((response) => {
 
+        console.log(response,'response');
 
+        let resdata = getArrValue(response.data)
 
+        resolve(resdata);
 
+    })
 
 }
 
 </script>