diff --git a/src/views/businessManagement/statisticAnalysis/compontents/ColumnarChat.vue b/src/views/businessManagement/statisticAnalysis/compontents/ColumnarChat.vue index 4ee6623..c0772f7 100644 --- a/src/views/businessManagement/statisticAnalysis/compontents/ColumnarChat.vue +++ b/src/views/businessManagement/statisticAnalysis/compontents/ColumnarChat.vue @@ -11,30 +11,30 @@ import VueChart from "./VueChart.vue"; import { computed } from "vue"; -const props = defineProps({ - month_data: { - type: Array, - default: () => [] - }, - day_data: { - type: Array, - default: () => [] - }, - data: { - type: Array, - default: () => [] - } -}); +// const props = defineProps({ +// month_data: { +// type: Array, +// default: () => [] +// }, +// day_data: { +// type: Array, +// default: () => [] +// }, +// data: { +// type: Array, +// default: () => [] +// } +// }); -const total_data = computed(() => { - if (!props.data || props.data.length === 0) { - return 0; - } else { - return props.data.reduce(function (sum, item: any) { - return sum + item.value; - }, 0); - } -}); +// const total_data = computed(() => { +// if (!props.data || props.data.length === 0) { +// return 0; +// } else { +// return props.data.reduce(function (sum, item: any) { +// return sum + item.value; +// }, 0); +// } +// }); // function customLabelFormatter(params) { // const text = params.value.toString(); // const coloredText = text.replace( @@ -48,14 +48,14 @@ const chartOption = computed(() => { return { xAxis: { type: "category", - data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] + data: ["Mon", "Tue", "Wed", "Thu", "Fri"] }, yAxis: { type: "value" }, series: [ { - data: [120, 200, 150, 80, 70, 110, 130], + data: [170, 160, 210, 120, 120], type: "bar" } ] diff --git a/src/views/businessManagement/statisticAnalysis/compontents/LineChat.vue b/src/views/businessManagement/statisticAnalysis/compontents/LineChat.vue index e37c2ff..8c579a8 100644 --- a/src/views/businessManagement/statisticAnalysis/compontents/LineChat.vue +++ b/src/views/businessManagement/statisticAnalysis/compontents/LineChat.vue @@ -9,32 +9,32 @@ import VueChart from "./VueChart.vue"; import { computed } from "vue"; -const props = defineProps({ - month_data: { - type: Array, - default: () => [] - }, - day_data: { - type: Array, - default: () => [] - }, - data: { - type: Array, - default: () => [] - } -}); +// const props = defineProps({ +// month_data: { +// type: Array, +// default: () => [] +// }, +// day_data: { +// type: Array, +// default: () => [] +// }, +// data: { +// type: Array, +// default: () => [] +// } +// }); -const name_list = computed(() => { - return props.data.map((item: any) => { - return item.name; - }); -}); +// const name_list = computed(() => { +// return props.data.map((item: any) => { +// return item.name; +// }); +// }); -const value_list = computed(() => { - return props.data.map((item: any) => { - return item.value; - }); -}); +// const value_list = computed(() => { +// return props.data.map((item: any) => { +// return item.value; +// }); +// }); const chartOption = computed(() => { return { @@ -47,7 +47,7 @@ const chartOption = computed(() => { }, series: [ { - data: [820, 932, 901, 934, 1290, 1330, 1320], + data: [22, 45, 23, 80, 24, 100, 22], type: "line", smooth: true } diff --git a/src/views/businessManagement/statisticAnalysis/compontents/PieChart.vue b/src/views/businessManagement/statisticAnalysis/compontents/PieChart.vue index e247890..de56d4b 100644 --- a/src/views/businessManagement/statisticAnalysis/compontents/PieChart.vue +++ b/src/views/businessManagement/statisticAnalysis/compontents/PieChart.vue @@ -11,30 +11,30 @@ import VueChart from "./VueChart.vue"; import { computed } from "vue"; -const props = defineProps({ - month_data: { - type: Array, - default: () => [] - }, - day_data: { - type: Array, - default: () => [] - }, - data: { - type: Array, - default: () => [] - } -}); +// const props = defineProps({ +// month_data: { +// type: Array, +// default: () => [] +// }, +// day_data: { +// type: Array, +// default: () => [] +// }, +// data: { +// type: Array, +// default: () => [] +// } +// }); -const total_data = computed(() => { - if (!props.data || props.data.length === 0) { - return 0; - } else { - return props.data.reduce(function (sum, item: any) { - return sum + item.value; - }, 0); - } -}); +// const total_data = computed(() => { +// if (!props.data || props.data.length === 0) { +// return 0; +// } else { +// return props.data.reduce(function (sum, item: any) { +// return sum + item.value; +// }, 0); +// } +// }); // function customLabelFormatter(params) { // const text = params.value.toString(); // const coloredText = text.replace( @@ -75,8 +75,8 @@ const chartOption = computed(() => { show: false }, data: [ - { value: 1048, name: "待审批" }, - { value: 735, name: "已审批" } + { value: 735, name: "已审批" }, + { value: 2532, name: "待审批" } ] } ] diff --git a/src/views/businessManagement/statisticAnalysis/index.vue b/src/views/businessManagement/statisticAnalysis/index.vue index f1d327d..747a37a 100644 --- a/src/views/businessManagement/statisticAnalysis/index.vue +++ b/src/views/businessManagement/statisticAnalysis/index.vue @@ -35,7 +35,7 @@ const dataList = ref([]);
报送知识数据概览
- 全部知识 75,485 @@ -45,34 +45,28 @@ const dataList = ref([]);
- 本月新增全部知识 - 75,485 + 1,235 环比:下降3% - +
- 本周撤回全部知识 - 75,485 + 256 环比:下降3% - + >环比:上升3% +
- 今日新增 - 75,485 - 环比:下降3% - - + >环比:下降3% +
@@ -113,95 +107,112 @@ const dataList = ref([]); .statisticAnalysis { display: flex; margin: 0 80px; + .statisticAnalysis-nav { - padding-top: 8px; - width: 136px; - height: calc(100vh - 200px); - background: #ffffff; - border-radius: 8px 8px 8px 8px; + display: flex; flex-direction: column; align-items: center; - display: flex; + width: 136px; + height: calc(100vh - 200px); + padding-top: 8px; + background: #fff; + border-radius: 8px; + .nav-item { - width: 120px; - height: 104px; - background: #ffffff; - border-radius: 6px 6px 6px 6px; - margin-bottom: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; + width: 120px; + height: 104px; + margin-bottom: 16px; cursor: pointer; + background: #fff; + border-radius: 6px; + img { width: 40px; height: 40px; } + span { + margin-top: 8px; font-size: 18px; color: #0052d9; - margin-top: 8px; } } + .actived { background: #0052d9; + span { font-size: 18px; - color: #ffffff; + color: #fff; } } } + .statisticAnalysis-main { flex: 1; margin-left: 16px; + .data-view { display: flex; flex-direction: row-reverse; + .data-view-pie { width: 284px; // height: 288px; - background: #ffffff; - border-radius: 8px 8px 8px 8px; + background: #fff; + border-radius: 8px; } + .data-view-content { - margin-right: 16px; - background: #ffffff; - border-radius: 8px 8px 8px 8px; - flex: 1; - padding: 24px; display: flex; + flex: 1; flex-direction: column; + padding: 24px; + margin-right: 16px; + background: #fff; + border-radius: 8px; + .header { - font-weight: bold; font-size: 20px; - color: #333333; + font-weight: bold; + color: #333; } + .content-list { - margin-top: 24px; display: flex; justify-content: space-between; + margin-top: 24px; + .content-list-item { display: flex; + flex-direction: column; width: 100%; padding: 32px; - flex-direction: column; - border-radius: 6px 6px 6px 6px; margin-right: 16px; + border-radius: 6px; + .title { - font-weight: 400; font-size: 20px; + font-weight: 400; } + .num { margin-top: 8px; - font-weight: bold; font-size: 36px; + font-weight: bold; } + .desc { display: flex; + align-items: center; margin-top: 34px; font-size: 16px; - color: #666666; - align-items: center; + color: #666; + img { width: 20px; height: 12px; @@ -212,23 +223,26 @@ const dataList = ref([]); } } } + .chart-card { - padding: 0 24px; - background: #ffffff; - border-radius: 8px 8px 8px 8px; - margin-top: 16px; - height: calc(100vh - 535px); display: flex; flex-direction: column; + height: calc(100vh - 535px); + padding: 0 24px; + margin-top: 16px; + background: #fff; + border-radius: 8px; + .chart-card-header { display: flex; - height: 70px; align-items: center; justify-content: space-between; + height: 70px; + span { - font-weight: bold; font-size: 20px; - color: #333333; + font-weight: bold; + color: #333; } .chart-card-header-time { @@ -236,12 +250,15 @@ const dataList = ref([]); align-items: center; } } + .chart-card-content { display: flex; flex: 1; + .left { width: 50%; } + .right { flex: 1; } diff --git a/src/views/systemManagement/accountManagement/compontents/accountDrawer.vue b/src/views/systemManagement/accountManagement/compontents/accountDrawer.vue index a87f8cf..cb9bb96 100644 --- a/src/views/systemManagement/accountManagement/compontents/accountDrawer.vue +++ b/src/views/systemManagement/accountManagement/compontents/accountDrawer.vue @@ -336,14 +336,11 @@ onMounted(() => { /> -