2 年之前 · acd2ffee43
--- a/index.html
+++ b/index.html
@@ -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>
			
--- a/src/global/components/hc-border-neon/index.vue
+++ b/src/global/components/hc-border-neon/index.vue
@@ -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>
			
--- a/src/global/components/index.js
+++ b/src/global/components/index.js
@@ -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)
			
 
				 }
			
--- a/src/styles/app/theme.scss
+++ b/src/styles/app/theme.scss
@@ -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;
			
 
				-        }
			
 
				-    }
			
 
				 }
			
--- a/src/styles/page/using/scoped/query.scss
+++ b/src/styles/page/using/scoped/query.scss
@@ -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);
			
 
				                         }
			
 
				                     }
			
 
				                 }
			
--- a/src/views/using/components/echarts/BarChart.vue
+++ b/src/views/using/components/echarts/BarChart.vue
@@ -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
			
--- a/src/views/using/stats.vue
+++ b/src/views/using/stats.vue
@@ -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>