档案首页统计颜色更改

src/views/using/components/echarts/ArrRoundChart.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="hc-bar-chart-box">
-        <div ref="echart" class="hc-bar-chart-echarts" :style="`width : ${chart?.clientWidth}px`"/>
+        <div ref="echart" class="hc-bar-chart-echarts" :style="`width : ${chart?.clientWidth}px`" />
     </div>
 </template>
 
@@ -10,22 +10,22 @@ import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 const props = defineProps({
     datas: {
         type: Object,
-        default: () => ({})
+        default: () => ({}),
     },
     config: {
         type: Object,
-        default: () => ({})
+        default: () => ({}),
     },
 })
 
 //初始变量
-let chart = null;
+let chart = null
 const echart = ref(null)
 const datas = ref(props.datas)
 
 //监听
 watch(() => [
-    props.datas
+    props.datas,
 ], ([data]) => {
     datas.value = data
     setDatas(data)
@@ -39,12 +39,12 @@ const initChart = () => {
 
 //设置数据
 const setDatas = (data) => {
-    let AxisData = [];
-    const {name, key} = props.config;
+    let AxisData = []
+    const { name, key } = props.config
     for (let i = 0; i < name.length; i++) {
         AxisData.push({
             name: name[i],
-            value: data[key[i]]
+            value: data[key[i]],
         })
     }
     setOptions(AxisData)
@@ -52,48 +52,48 @@ const setDatas = (data) => {
 
 //监听浏览器窗口变化
 const windowResize = () => {
-    window.addEventListener("resize", resizeEvent);
+    window.addEventListener('resize', resizeEvent)
 }
 
 const resizeEvent = () => {
     window.requestAnimationFrame(() => {
-        chart.resize();
+        chart.resize()
     })
 }
 
 //设置图表
 const setOptions = (AxisData) => {
-    const {color, label} = props.config;
+    const { color, label } = props.config
     chart.setOption({
         color: color,
         tooltip: {
-            trigger: 'item'
+            trigger: 'item',
         },
         series: [
             {
                 name: label,
                 type: 'pie',
-                radius: ['50%', '80%'],
-                center: ["50%", "50%"],
+                radius: ['40%', '80%'],
+                center: ['50%', '50%'],
                 avoidLabelOverlap: false,
                 itemStyle: {
-                    borderRadius: 5,
-                    borderColor: '#fff',
-                    borderWidth: 2
+                    // borderRadius: 5,
+                    // borderColor: '#fff',
+                    // borderWidth: 2,
                 },
                 emphasis: {
                     label: {
                         show: true,
                         fontSize: '20',
-                        fontWeight: 'bold'
-                    }
+                        fontWeight: 'bold',
+                    },
                 },
                 data: AxisData,
                 label:{
                     formatter: '{b}\ {c}',
-                }
-            }
-        ]
+                },
+            },
+        ],
     })
 }
 
@@ -107,20 +107,20 @@ onMounted(() => {
 
 //被卸载
 onUnmounted(() => {
-    window.removeEventListener("resize",resizeEvent);
+    window.removeEventListener('resize', resizeEvent)
     chart.dispose()
     chart = null
 })
 
 const onResize = () => {
     nextTick(() => {
-        chart.resize();
+        chart.resize()
     })
 }
 
 // 暴露出去
 defineExpose({
-    onResize
+    onResize,
 })
 </script>
 

src/views/using/stats.vue

@@ -3,80 +3,92 @@
         <HcCard scrollbar>
             <template #header>
                 <div class="hc-project-box">
-                    <HcIcon name="stack" class="project-icon"/>
-                    <span class="project-alias">{{projectInfo?.projectAlias}}</span>
+                    <HcIcon name="stack" class="project-icon" />
+                    <span class="project-alias">{{ projectInfo?.projectAlias }}</span>
                 </div>
             </template>
             <div class="hc-chart-flex">
                 <el-row :gutter="20" class="h-full">
                     <el-col :span="8" class="h-full">
                         <div class="hc-chart-card-box">
-                            <div class="header">原生、数字化文件数量（份）</div>
-                            <div class="body" v-loading="isNativeLoading">
-                                <BarChart ref="nativeChartRef" :config="nativeChartConfig" :datas="nativeChartData"/>
+                            <div class="header">
+                                原生、数字化文件数量（份）
+                            </div>
+                            <div v-loading="isNativeLoading" class="body">
+                                <BarChart ref="nativeChartRef" :config="nativeChartConfig" :datas="nativeChartData" />
                             </div>
                         </div>
                     </el-col>
                     <el-col :span="8" class="h-full">
                         <div class="hc-chart-card-box gird">
-                            <HcBorderNeon align="right" neon/>
-                            <div class="header">档案总存储</div>
+                            <HcBorderNeon align="right" neon />
+                            <div class="header">
+                                档案总存储
+                            </div>
                             <div class="body num-text">
-                                <span class="font-FZGongYHJW">{{ tableData[0]?.auto||0 }}卷</span>
-                                <div class="size-data" v-loading="isSizeLoading">电子文件存储量：{{ allArchiveFileSizedata }}</div>
+                                <span class="font-FZGongYHJW">{{ tableData[0]?.auto || 0 }}卷</span>
+                                <div v-loading="isSizeLoading" class="size-data">
+                                    电子文件存储量：{{ allArchiveFileSizedata }}
+                                </div>
                             </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"/>
+                            <HcBorderNeon align="right" />
+                            <div class="header">
+                                已组案卷
+                            </div>
+                            <div v-loading="isHasBeenLoading" class="body">
+                                <ArrRoundChart ref="hasBeenChartRef" :config="hasBeenChartConfig" :datas="hasBeenChartData" />
                             </div>
                         </div>
                     </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"  />
+                            <HcBorderNeon align="left" />
+                            <div class="header">
+                                档案年限占比
+                            </div>
+                            <div v-loading="isFixedLoading" class="body">
+                                <!-- <RoundPieChart ref="fixedChartRef" :datas="fixedChartData" /> -->
+                                <ArrRoundChart ref="fixedChartRef" :config="fixedChartConfig" :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"/>
+                            <HcBorderNeon align="left" neon />
+                            <div class="header">
+                                已销毁案卷
+                            </div>
+                            <div v-loading="isDestroyLoading" class="body">
+                                <ArrRoundChart ref="destroyChartRef" :config="destroyChartConfig" :datas="destroyChartData" />
                             </div>
                         </div>
                     </el-col>
                 </el-row>
             </div>
 
-            <el-table :data="tableData" lazy :load="loadData" v-loading="isLoading" border row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" >
-                <el-table-column prop="name" label="归档目录文件夹"></el-table-column>
-                <el-table-column prop="auto" label="已组卷" align="center" width="100"></el-table-column>
-                <el-table-column prop="deleted" label="已销毁" align="center" width="100"></el-table-column>
+            <el-table v-loading="isLoading" :data="tableData" lazy :load="loadData" border row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+                <el-table-column prop="name" label="归档目录文件夹" />
+                <el-table-column prop="auto" label="已组卷" align="center" width="100" />
+                <el-table-column prop="deleted" label="已销毁" align="center" width="100" />
             </el-table>
-
         </HcCard>
     </div>
 </template>
 
 <script setup>
-import {ref, onMounted,watch} from "vue";
-import {useAppStore} from "~src/store";
-import BarChart from "./components/echarts/BarChart.vue"
-import ArrRoundChart from "./components/echarts/ArrRoundChart.vue"
-import RoundPieChart from "./components/echarts/RoundPieChart.vue"
-import archivesStatsApi from "~api/using/stats.js";
-import {getObjValue,getArrValue} from "js-fast-way"
+import { onMounted, ref, watch } from 'vue'
+import { useAppStore } from '~src/store'
+import BarChart from './components/echarts/BarChart.vue'
+import ArrRoundChart from './components/echarts/ArrRoundChart.vue'
+import RoundPieChart from './components/echarts/RoundPieChart.vue'
+import archivesStatsApi from '~api/using/stats.js'
+import { getArrValue, getObjValue } from 'js-fast-way'
 
 //变量
 const useAppState = useAppStore()
-const projectId = ref(useAppState.getProjectId);
-const contractId = ref(useAppState.getContractId);
-const projectInfo = ref(useAppState.getProjectInfo);
+const projectId = ref(useAppState.getProjectId)
+const contractId = ref(useAppState.getContractId)
+const projectInfo = ref(useAppState.getProjectInfo)
 
 //渲染完成
 onMounted(() => {
@@ -90,7 +102,7 @@ onMounted(() => {
 })
 //监听
 watch(() => [
-    useAppState.getProjectId
+    useAppState.getProjectId,
 ], ([ProjectId]) => {
     projectId.value = ProjectId
     gethasBeenChartData()
@@ -105,27 +117,27 @@ const nativeChartRef = ref(null)
 const nativeChartConfig = {
     name: ['原生', '数字化'],
     key: ['key1', 'key2'],
-    color: ['#D97558', '#E4C377'],
+    color: ['#FFBF6B', '#74F9FD'],
     label: '',
 }
 
 //原生、数字化文件数量 图表数据
 const isNativeLoading = ref(false)
 const nativeChartData = ref([
-    {title: '施工', key1: 100, key2: 50},
-    {title: '监理', key1: 60, key2: 80},
-    {title: '业主', key1: 4, key2: 30},
+    { title: '施工', key1: 100, key2: 50 },
+    { title: '监理', key1: 60, key2: 80 },
+    { title: '业主', key1: 4, key2: 30 },
 ])
 //获取原生文件数量
 const getnativeChartData = async () => {
     const { error, code, data } = await archivesStatsApi.getallnativeChartData({
         projectId: projectId.value,
 
-    });
+    })
     if (!error && code === 200) {
-        nativeChartData.value = getArrValue(data);
+        nativeChartData.value = getArrValue(data)
     } else {
-        nativeChartData.value = [];
+        nativeChartData.value = []
     }
 }
 
@@ -134,26 +146,33 @@ const hasBeenChartRef = ref(null)
 const hasBeenChartConfig = {
     name: ['施工', '监理', '业主'],
     key: ['key1', 'key2', 'key3'],
-    color: ['#D9A67B', '#D97558', '#E4C377'],
+    color: ['#81B336', '#1040F3', '#EA9B43'],
     label: '已组案卷',
 }
 
 //已组案卷 图表数据
 const isHasBeenLoading = ref(false)
 const hasBeenChartData = ref({
-    key1: 3210, key2: 850, key3: 1203
+    key1: 3210, key2: 850, key3: 1203,
 })
+//档案年限占比fixedChartConfig
+const fixedChartConfig = {
+    name: ['永久', '30年', '10年'],
+    key: ['key1', 'key2', 'key3'],
+    color: ['#DF868F', '#7727F5', '#74F9FD'],
+    label: '档案年限占比',
+}
 //获取已组案卷
 const gethasBeenChartData = async () => {
 
     const { error, code, data } = await archivesStatsApi.getallArchiveByContractType({
         projectId: projectId.value,
 
-    });
+    })
     if (!error && code === 200) {
-        hasBeenChartData.value = getObjValue(data);
+        hasBeenChartData.value = getObjValue(data)
     } else {
-        hasBeenChartData.value = {};
+        hasBeenChartData.value = {}
     }
 }
 
@@ -165,19 +184,31 @@ const fixedChartData = ref([
     { value: 735, name: '30年' },
     { value: 580, name: '20年' },
     { value: 484, name: '10年' },
-    { value: 300, name: '5年' }
+    { value: 300, name: '5年' },
 ])
 //获取档案年限
 const getfixedChartData = async () => {
     const { error, code, data } = await archivesStatsApi.getallArchiveAge({
         projectId: projectId.value,
 
-    });
+    })
     if (!error && code === 200) {
-        console.log(data,'data');
-        fixedChartData.value = getArrValue(data);
+        let objarr = getArrValue(data)
+        let obj = { key1: 0, key2: 0, key3: 0 }
+        objarr.forEach((ele) => {
+            if (ele.name === '永久') {
+                obj['key1'] = ele.value
+            } else if (ele.name === '30年') {
+                obj['key2'] = ele.value
+            } else if (ele.name === '31年') {
+                obj['key3'] = ele.value
+            }
+
+        })
+       
+        fixedChartData.value = obj
     } else {
-        fixedChartData.value = [];
+        fixedChartData.value = {}
     }
 }
 
@@ -186,75 +217,75 @@ const destroyChartRef = ref(null)
 const destroyChartConfig = {
     name: ['施工', '监理', '业主'],
     key: ['key1', 'key2', 'key3'],
-    color: ['#63686E', '#42494F', '#999FA6'],
+    color: ['#81B336', '#1040F3', '#EA9B43'],
     label: '已销毁案卷',
 }
 
 //已销毁案卷 图表数据
 const isDestroyLoading = ref(false)
 const destroyChartData = ref({
-    key1: 202, key2: 150, key3: 100
+    key1: 202, key2: 150, key3: 100,
 })
 //获取已销毁案卷
 const getdestroyChartData = async () => {
     const { error, code, data } = await archivesStatsApi.getallArchiveDestory({
         projectId: projectId.value,
 
-    });
+    })
     if (!error && code === 200) {
-        destroyChartData.value = getObjValue(data);
-        console.log(data,'已销毁');
+        destroyChartData.value = getObjValue(data)
+        console.log(data, '已销毁')
     } else {
-        destroyChartData.value = [];
+        destroyChartData.value = []
     }
 }
 //获取总存储数据
 const allArchiveFileSizedata = ref('')
-const isSizeLoading=ref(false)
+const isSizeLoading = ref(false)
 const getallArchiveFileSize = async () => {
-    isSizeLoading.value=true
+    isSizeLoading.value = true
     const { error, code, data } = await archivesStatsApi.getallArchiveSize({
         projectId: projectId.value,
 
-    });
+    })
     if (!error && code === 200) {
-        allArchiveFileSizedata.value = data;
-        isSizeLoading.value=false
+        allArchiveFileSizedata.value = data
+        isSizeLoading.value = false
 
     } else {
-        allArchiveFileSizedata.value = '';
-        isSizeLoading.value=false
+        allArchiveFileSizedata.value = ''
+        isSizeLoading.value = false
     }
 
 }
 //初始数据获取
 const isLoading = ref(false)
 const tableData = ref([])
-const nodeId=ref(0)
+const nodeId = ref(0)
 //获取归档目录文件夹getArchiveTreeAndArchiveCount
 const gettableData = async () => {
-    isLoading.value=true
+    isLoading.value = true
     const { error, code, data } = await archivesStatsApi.getArchiveTreeAndArchiveCount({
         projectId: projectId.value,
         nodeId:nodeId.value,
 
-    });
+    })
     if (!error && code === 200) {
-        let resdata= getArrValue(data);
-        tableData.value=resdata
-        isLoading.value=false
+        let resdata = getArrValue(data)
+        tableData.value = resdata
+        isLoading.value = false
 
     } else {
-        tableData.value=resdata
+        tableData.value = resdata
     }
-    isLoading.value=false
+    isLoading.value = false
 
 }
-const loadData = (tree, treeNode,resolve)=>{
-     archivesStatsApi.getArchiveTreeAndArchiveCount({ projectId: projectId.value,nodeId:tree.id,}).then((response) => {
-        console.log(response,'response');
+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);
+        resolve(resdata)
     })
 }
 </script>