diff --git a/mock/community.ts b/mock/community.ts index 68cb57e..b5e9b95 100644 --- a/mock/community.ts +++ b/mock/community.ts @@ -11,12 +11,15 @@ export default defineFakeRoute([ method: 'GET', response: () => ({ code: 200, - data: [ - { name: '设备类型一', outside: randomNumber(), connect: randomNumber() }, - { name: '设备类型二', outside: randomNumber(), connect: randomNumber() }, - { name: '设备类型三', outside: randomNumber(), connect: randomNumber() }, - { name: '设备类型四', outside: randomNumber(), connect: randomNumber() }, - ], + data: { + list: [ + { name: '设备类型一', outside: randomNumber(), connect: randomNumber() }, + { name: '设备类型二', outside: randomNumber(), connect: randomNumber() }, + { name: '设备类型三', outside: randomNumber(), connect: randomNumber() }, + { name: '设备类型四', outside: randomNumber(), connect: randomNumber() }, + ], + total: randomNumber(9999), + }, message: '操作成功', }), }, diff --git a/src/components/DigitalNumber/DigitalNumber.tsx b/src/components/DigitalNumber/DigitalNumber.tsx index 70e9934..06659b3 100644 --- a/src/components/DigitalNumber/DigitalNumber.tsx +++ b/src/components/DigitalNumber/DigitalNumber.tsx @@ -13,18 +13,17 @@ export default defineComponent({ }, }, setup(props) { - const moneyString: string = props.separator ? formatter(props.money) : props.money.toString(); - const moneyStringList = moneyString - .split(/(\d,)/g) - .filter((item) => item !== '') - .map((item) => (!item.includes(',') ? item.split('') : item)) - .flat(); - return () => (
- {moneyStringList.map((item, index) => ( - {item} - ))} + {(props.separator ? formatter(props.money) : props.money.toString()) + .split(/(\d,)/g) + .filter((item) => item !== '') + .map((item) => (!item.includes(',') ? item.split('') : item)) + .flat() + .map((item, index) => ( + {item} + ))} + {/* {moneyStringList.value?.map((item, index) => {item})} */}
); }, diff --git a/src/store/modules/community.ts b/src/store/modules/community.ts index 62d9e21..5232a4c 100644 --- a/src/store/modules/community.ts +++ b/src/store/modules/community.ts @@ -10,18 +10,19 @@ import { export const useCommunityStore = defineStore('communityStore', { state: () => ({ // 设备总数 - devicesList: [], + devicesList: { list: [], total: 0 }, // 预警概览 alarmOverviewList: [], // 统计列表 statisticsList: [], // 设备状态 - deviceStatus: { devcies: [], security: undefined }, + deviceStatus: { devcies: [], security: 0 }, }), actions: { /* 设备总数 */ async fetchCommunityDevicesAmount() { const result = await getCommunityDevicesAmount(); + this.devicesList = result; }, /* 预警概览 */ diff --git a/src/views/community/charts/conten-body-chart.tsx b/src/views/community/charts/conten-body-chart.tsx index 5b2569f..25ccd8d 100644 --- a/src/views/community/charts/conten-body-chart.tsx +++ b/src/views/community/charts/conten-body-chart.tsx @@ -7,7 +7,6 @@ import { debounceChart } from '@/utils/chart'; let myChart = null; const option = ref({ - grid: { top: 0, right: 0, bottom: -100, left: 0, containLabel: true }, series: [ { type: 'gauge', @@ -48,8 +47,8 @@ const option = ref({ }, axisLabel: { show: false }, detail: { - fontSize: 18, - offsetCenter: [0, '-9%'], + fontSize: 24, + offsetCenter: [0, '9%'], valueAnimation: true, formatter: function (value) { return Math.round(value * 100) + '\n安全指数'; diff --git a/src/views/community/charts/left-body-chart.tsx b/src/views/community/charts/left-body-chart.tsx index 4deb5d6..ba247f7 100644 --- a/src/views/community/charts/left-body-chart.tsx +++ b/src/views/community/charts/left-body-chart.tsx @@ -50,15 +50,13 @@ export const renderBodyChart = (element: Ref) => { /** 更新图标数据 */ export const updateBodyChart = (props: any) => { const series = myChart?.getOption()?.series; - series[0].data = props.list.map((item, index) => ({ + series[0].data = props.list?.map((item, index) => ({ name: item.name, value: item.value, itemStyle: { color: colors[index], borderRadius: 10 }, })); const total = props.list.reduce((old, item) => old + item.value, 0); - // const angleAxis = myChart?.getOption()?.angleAxis; - // angleAxis[0].max = undefined; const title = myChart?.getOption()?.title; title[0].text = total; diff --git a/src/views/community/components/community-left.vue b/src/views/community/components/community-left.vue index c7ca6d9..92f565c 100644 --- a/src/views/community/components/community-left.vue +++ b/src/views/community/components/community-left.vue @@ -42,9 +42,9 @@ onMounted(() => {
- + -
+
{ height: 100%; display: flex; flex-direction: column; - justify-content: space-between; + align-items: flex-end; + justify-content: space-around; .progress-list { display: flex; flex-direction: column; justify-items: center; margin: 14px 0 0 0; + width: 100%; color: #fff; :deep(.progress) {