修正ts类型
This commit is contained in:
Zy
@@ -1,7 +1,10 @@
|
||||
<script name="repairEcharts" setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { workSpaceRepairTrendListApi } from '@/api/workflow';
|
||||
import Echarts from '@/components/Echarts/index.vue';
|
||||
import { getLast7Days } from '@/utils/time';
|
||||
import { EChartsOption } from 'echarts';
|
||||
import type { EChartsOption } from 'echarts';
|
||||
|
||||
// 使用 ref 而不是 shallowRef，以确保深层响应式，或者在更新时重新赋值整个对象
|
||||
const chartConfig = shallowRef<EChartsOption>({
|
||||
grid: {
|
||||
left: '1%',
|
||||
@@ -11,7 +14,8 @@ const chartConfig = shallowRef<EChartsOption>({
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
data: getLast7Days()
|
||||
type: 'category', // 建议明确指定类型
|
||||
data: [] as string[]
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
@@ -21,7 +25,7 @@ const chartConfig = shallowRef<EChartsOption>({
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [100, 140, 230, 100, 130, 180, 173],
|
||||
data: [] as number[],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
name: '维修单数',
|
||||
@@ -31,10 +35,10 @@ const chartConfig = shallowRef<EChartsOption>({
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1, // 从上到下渐变
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: '#e2edff' }, // 顶部：半透明蓝色
|
||||
{ offset: 1, color: '#f2f9ff' } // 底部：极浅蓝/透明
|
||||
{ offset: 0, color: '#e2edff' },
|
||||
{ offset: 1, color: '#f2f9ff' }
|
||||
]
|
||||
}
|
||||
},
|
||||
@@ -52,6 +56,53 @@ const chartConfig = shallowRef<EChartsOption>({
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 获取维修列表数据
|
||||
function getRepairList() {
|
||||
const id = localStorage.getItem('villageid');
|
||||
if (!id) return;
|
||||
|
||||
workSpaceRepairTrendListApi(id)
|
||||
.then((res: any[]) => {
|
||||
if (!res || res.length === 0) {
|
||||
return;
|
||||
}
|
||||
const map = res.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
|
||||
// 提取日期和数量
|
||||
const dates = map.map((item) => item.date);
|
||||
const counts = map.map((item) => item.count);
|
||||
|
||||
// 如果使用的是 ref，直接修改属性即可触发响应式
|
||||
chartConfig.value = {
|
||||
grid: chartConfig.value.grid,
|
||||
yAxis: chartConfig.value.yAxis,
|
||||
tooltip: chartConfig.value.tooltip,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: dates
|
||||
},
|
||||
series: [
|
||||
{
|
||||
...chartConfig.value.series?.[0],
|
||||
type: 'line', // 确保 type 存在
|
||||
data: counts
|
||||
}
|
||||
]
|
||||
} as EChartsOption;
|
||||
|
||||
// 注意：如果 <Echarts> 组件内部没有正确监听 options 的变化，
|
||||
// 可能需要强制触发更新，例如：
|
||||
// chartConfig.value = { ...chartConfig.value };
|
||||
// 但大多数封装好的 Echarts 组件会 watch options 并调用 setOption
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('获取维修趋势数据失败:', err);
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getRepairList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
<span class="echarts_units">单位（个）</span>
|
||||
</div>
|
||||
<div class="flex flex-items-center justify-center">
|
||||
<span class="echarts_all_baoxiu">全部保修</span>
|
||||
<span class="echarts_all_baoxiu">全部报修</span>
|
||||
<i class="echarts_all_arrow"></i>
|
||||
</div>
|
||||
</div>
|
||||
@@ -63,7 +63,15 @@
|
||||
<div class="flex flex-col h-full">
|
||||
<div class="villageInfoBox">
|
||||
<div class="iconbox">
|
||||
<el-image :src="summicon"></el-image>
|
||||
<div :title="`${weather_icon.title} ${weather_icon.wind_direction} ${weather_icon.wind_power} 温度${weather_icon.temperature}°C`">
|
||||
{{ getWeatherIcon(weather_icon.iconvalue) }}
|
||||
</div>
|
||||
<!-- <el-image :src="summicon"></el-image> -->
|
||||
<!-- <svg xmlns="http://www.w3.org/2000/svg" color="white" width="70" height="70" fill="currentColor" class="qi-100" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M7.655 2.357a.5.5 0 0 0 .854-.353v-1.5a.5.5 0 0 0-1 0v1.5a.5.5 0 0 0 .146.353Zm-4.08 1.861c.06.026.126.039.191.039l.001-.001a.5.5 0 0 0 .355-.855l-1.064-1.06a.5.5 0 0 0-.707.708l1.062 1.06a.498.498 0 0 0 .162.11ZM.503 8.496h1.5a.5.5 0 1 0 0-1h-1.5a.5.5 0 0 0 0 1Zm1.914 5.221a.501.501 0 0 0 .631-.063l1.063-1.06a.5.5 0 0 0-.708-.707l-1.062 1.06a.5.5 0 0 0 .076.77Zm5.225 2.14a.5.5 0 0 0 .854-.354v-1.5a.5.5 0 0 0-1 0v1.5a.5.5 0 0 0 .146.354Zm5.467-2.084a.5.5 0 0 0 .544-.816l-1.06-1.06a.498.498 0 0 0-.832.152.5.5 0 0 0 .126.555l1.06 1.06a.496.496 0 0 0 .162.109Zm.893-5.263h1.5a.5.5 0 1 0 0-1h-1.5a.5.5 0 0 0 0 1Zm-2.031-4.327a.5.5 0 0 0 .633-.063l1.06-1.06a.5.5 0 1 0-.708-.708l-1.06 1.06a.5.5 0 0 0 .075.77Zm-6.466.075a4.5 4.5 0 1 1 5 7.484 4.5 4.5 0 0 1-5-7.484Zm4.445.832a3.5 3.5 0 1 0-3.89 5.82 3.5 3.5 0 0 0 3.89-5.82Z"
|
||||
/>
|
||||
</svg> -->
|
||||
</div>
|
||||
<div class="villageinfo">
|
||||
<div class="villagename">{{ villageinfo.villageName }}</div>
|
||||
@@ -254,7 +262,8 @@ import { UploadUserFile } from 'element-plus';
|
||||
import { getVillageByIdAPI } from '@/api/system/community';
|
||||
import { getLast7Days, numToWeek2 } from '@/utils/time';
|
||||
import { EChartsOption } from 'echarts';
|
||||
import { workSpaceTotalListApi } from '@/api/workflow';
|
||||
import { workSpaceIncomeTrendListApi, workSpaceTotalListApi, workSpaceWeatherApi } from '@/api/workflow';
|
||||
import { getWeatherIcon } from '@/utils/weather';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { com_resident_type } = toRefs<any>(proxy?.useDict('com_resident_type'));
|
||||
@@ -269,12 +278,26 @@ const list = ref([
|
||||
{ name: '投诉总数量', value: 458, icon: icon6 }
|
||||
]);
|
||||
|
||||
const weather_icon = ref({
|
||||
iconvalue: null,
|
||||
title: '',
|
||||
// 当前温度 °C
|
||||
temperature: null,
|
||||
// 风向
|
||||
'wind_direction': '',
|
||||
// 风力等级
|
||||
'wind_power': '',
|
||||
// 相对湿度 %
|
||||
'humidity': null
|
||||
});
|
||||
function getVillageinfo() {
|
||||
const id = localStorage.getItem('villageid');
|
||||
workSpaceTotalListApi(id).then((res) => {
|
||||
list.value[0].value = res.totalResident;
|
||||
list.value[1].value = res.totalHouse;
|
||||
list.value[2].value = res.totalParking;
|
||||
list.value[3].value = res.totalDevice;
|
||||
list.value[4].value = res.totalMaterial;
|
||||
list.value[5].value = res.totalComplaint;
|
||||
});
|
||||
getVillageByIdAPI(id).then((res) => {
|
||||
@@ -283,10 +306,22 @@ function getVillageinfo() {
|
||||
villageId: res.data.villageId,
|
||||
villageName: res.data.villageName
|
||||
};
|
||||
const city = res.data.city.replaceAll('/', '');
|
||||
workSpaceWeatherApi(city).then((res) => {
|
||||
weather_icon.value = {
|
||||
iconvalue: res.weather_icon,
|
||||
title: res.weather,
|
||||
wind_direction: res.wind_direction,
|
||||
wind_power: res.wind_power,
|
||||
humidity: res.humidity,
|
||||
temperature: res.temperature
|
||||
};
|
||||
});
|
||||
houseStore.updateVilageinfo(res.data);
|
||||
});
|
||||
}
|
||||
getVillageinfo();
|
||||
|
||||
// ! echarts 切换
|
||||
const active_index = ref(0);
|
||||
const actions = ref([
|
||||
@@ -300,8 +335,10 @@ const actions = ref([
|
||||
name: '支出'
|
||||
}
|
||||
]);
|
||||
changeChartConfig(0);
|
||||
function changeActive_index(val: number) {
|
||||
active_index.value = val;
|
||||
changeChartConfig(val);
|
||||
}
|
||||
|
||||
const chartConfig = shallowRef<EChartsOption>({
|
||||
@@ -389,6 +426,38 @@ const chartConfig = shallowRef<EChartsOption>({
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
function changeChartConfig(val: number) {
|
||||
const id = localStorage.getItem('villageid');
|
||||
workSpaceIncomeTrendListApi(id, val).then((res) => {
|
||||
console.log(res);
|
||||
if (!res || res.length === 0) {
|
||||
return;
|
||||
}
|
||||
const map = res.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
|
||||
// 提取日期和数量
|
||||
const dates = map.map((item) => item.date);
|
||||
const incomes = map.map((item) => item.income);
|
||||
|
||||
chartConfig.value = {
|
||||
grid: chartConfig.value.grid,
|
||||
yAxis: chartConfig.value.yAxis,
|
||||
tooltip: chartConfig.value.tooltip,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: dates
|
||||
},
|
||||
series: [
|
||||
{
|
||||
...chartConfig.value.series?.[0],
|
||||
type: 'line', // 确保 type 存在
|
||||
data: incomes
|
||||
}
|
||||
]
|
||||
} as EChartsOption;
|
||||
});
|
||||
}
|
||||
|
||||
// ! echarts 切换
|
||||
// ! 侧边栏
|
||||
const Sideactive = ref(1);
|
||||
@@ -453,7 +522,7 @@ const fileList = ref<UploadUserFile[]>([]);
|
||||
const seachervalue = ref('name');
|
||||
const searchInput = ref('');
|
||||
const loading = ref(true);
|
||||
const total = ref(100);
|
||||
const total = ref(0);
|
||||
const data = reactive({
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
@@ -497,6 +566,7 @@ const tableData = ref([]);
|
||||
async function getList() {
|
||||
const res = await listResident(queryParams.value);
|
||||
tableData.value = res.rows;
|
||||
total.value = res.total;
|
||||
}
|
||||
getList();
|
||||
|
||||
@@ -689,6 +759,11 @@ async function deleteFun(row) {
|
||||
.iconbox {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
font-size: 70px;
|
||||
line-height: 70px;
|
||||
position: relative;
|
||||
cursor: default;
|
||||
z-index: 2;
|
||||
}
|
||||
.villageinfo {
|
||||
margin-left: 20px;
|
||||
|
||||
Reference in New Issue
Block a user