Yaxin
/
General-AI-Platform-Web-Client
31
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 大屏数据修改

Browse Source
dev-deviceSetting
JINGYJ 1 year ago
parent 47221a93c1
commit 894e6820b2
15 changed files with 3640 additions and 83 deletions
Show Stats Download Patch File Download Diff File

3226
mock/pools/modelListData.ts
View File

File diff suppressed because it is too large Load Diff

141
mock/pools/serverListData.ts
Unescape Escape View File

@ -0,0 +1,141 @@
const serverList = [
{
index: 1,
isEnabled: true,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
deviceSort: "服务器1",
state: "在线",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
},
{
index: 2,
isEnabled: false,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "服务器2",
state: "在线",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
},
{
index: 3,
isEnabled: false,
type: 5,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "服务器3",
state: "在线",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
},
{
index: 4,
isEnabled: false,
type: 2,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "服务器4",
state: "离线",
description:
"云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
},
{
index: 5,
isEnabled: true,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
deviceSort: "服务器4",
state: "在线",
description:
"云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
},
{
index: 6,
isEnabled: true,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "服务器5",
state: "在线",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
},
{
index: 7,
isEnabled: false,
type: 1,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "服务器6",
state: "离线",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
},
{
index: 8,
isEnabled: true,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "服务器7",
state: "在线",
description:
"云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
},
{
index: 9,
isEnabled: false,
type: 1,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
deviceSort: "服务器8",
state: "离线",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
},
{
index: 10,
isEnabled: true,
type: 4,
banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
deviceSort: "服务器9",
state: "在线",
description:
"云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
},
{
index: 11,
isEnabled: true,
type: 5,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "服务器10",
state: "在线",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
},
{
index: 12,
isEnabled: true,
type: 2,
banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
deviceSort: "服务器11",
state: "在线",
description:
"SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
},
{
index: 13,
isEnabled: true,
type: 3,
banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
deviceSort: "服务器12",
state: "在线",
description:
"腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
}
];
export const serverListData = {
data: {
list: serverList,
total: serverList.length,
page: 1,
pageSize: 10
}
};

43
mock/screenData.ts
Unescape Escape View File

@ -0,0 +1,43 @@
import { MockMethod } from "vite-plugin-mock";
import { serverListData } from "./pools/serverListData";
import { modelListData } from "./pools/modelListData";
import { fetchCurrPageByList } from "./utils/apiMock";
export default [
{
url: "/getServerBoxList",
method: "post",
response: req => {
const { page, pageSize } = req.body;
// console.log(req);
return {
...fetchCurrPageByList({
...serverListData,
data: {
...serverListData.data,
page,
pageSize: pageSize || 10
}
})
};
}
},
{
url: "/getModelBoxList",
method: "post",
response: req => {
const { page, pageSize } = req.body;
// console.log(req);
return {
...fetchCurrPageByList({
...modelListData,
data: {
...modelListData.data,
page,
pageSize: pageSize || 10
}
})
};
}
}
] as MockMethod[];

8
src/api/list.ts
Unescape Escape View File

@ -25,10 +25,18 @@ export const getServerList = (data?: object) => {
return http.request<Result>("post", "/getServerList", { data }); return http.request<Result>("post", "/getServerList", { data });
}; };
export const getServerBoxList = (data?: object) => {
return http.request<Result>("post", "/getServerBoxList", { data });
};
export const getModelList = (data?: object) => { export const getModelList = (data?: object) => {
return http.request<Result>("post", "/getModelList", { data }); return http.request<Result>("post", "/getModelList", { data });
}; };
export const getModelBoxList = (data?: object) => {
return http.request<Result>("post", "/getModelBoxList", { data });
};
/** 告警列表 */ /** 告警列表 */
export const getAlarmList = (data?: object) => { export const getAlarmList = (data?: object) => {
return http.request<Result>("post", "/getAlarmList", { data }); return http.request<Result>("post", "/getAlarmList", { data });

52
src/pages/dataScreen/views/home/components/AlarmLine.vue
Unescape Escape View File

@ -16,7 +16,7 @@ const theme: EchartOptions["theme"] = computed(() => {
}); });
const alarmLineChartRef = ref<HTMLDivElement | null>(null); const alarmLineChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts( const { setOptions, resize, getInstance } = useECharts(
alarmLineChartRef as Ref<HTMLDivElement>, alarmLineChartRef as Ref<HTMLDivElement>,
{ {
theme theme
@ -27,14 +27,42 @@ const props = defineProps({
dateData: { dateData: {
type: Array as PropType<Array<number>>, type: Array as PropType<Array<number>>,
default: () => [] default: () => []
},
alarmData: {
type: Object,
default: () => {}
} }
// defectData: {
// type: Array as PropType<Array<number>>,
// default: () => []
// }
}); });
const dateData = ref([...props.dateData]); const dateData = ref([...props.dateData]);
const alarmData = ref({ ...props.alarmData });
console.log(alarmData.value.plate);
watch(
() => props.alarmData,
newDefectData => {
alarmData.value = { ...newDefectData };
updateChart();
},
{ immediate: true, deep: true }
);
function updateChart() {
// 检查图表实例是否存在
if (!getInstance()) {
console.error("图表实例不存在");
return;
}
// 获取当前的配置项
const currentOption = getInstance()!.getOption();
// 修改系列（series）数据
currentOption.series[0].data = alarmData.value.thread;
currentOption.series[1].data = alarmData.value.PIN;
currentOption.series[2].data = alarmData.value.plate;
currentOption.series[3].data = alarmData.value.scratched;
currentOption.series[4].data = alarmData.value.workpieceSize;
getInstance()!.setOption(currentOption);
}
setOptions( setOptions(
{ {
@ -102,7 +130,7 @@ setOptions(
axisTick: { alignWithLabel: true }, // 控制样式里的X轴字在中间距离Y轴还有点距离 axisTick: { alignWithLabel: true }, // 控制样式里的X轴字在中间距离Y轴还有点距离
axisLabel: { axisLabel: {
// textStyle: { // textStyle: {
color: "#737A85", //更改坐标轴文字颜色 color: "rgba(255,255,255,0.8)", //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小 fontSize: 12 //更改坐标轴文字大小
// } // }
}, },
@ -115,7 +143,7 @@ setOptions(
// name: "单位：万", // name: "单位：万",
axisLabel: { axisLabel: {
// textStyle: { // textStyle: {
color: "#737A85" color: "rgba(255,255,255,0.8)"
// } // }
}, },
nameTextStyle: { nameTextStyle: {
@ -161,7 +189,7 @@ setOptions(
name: "螺纹缺陷", name: "螺纹缺陷",
type: "line", type: "line",
yAxisIndex: 0, yAxisIndex: 0,
data: [246, 246, 246, 180, 160], data: alarmData.value.thread,
smooth: true, smooth: true,
// showSymbol: false,/ // showSymbol: false,/
symbolSize: 8, symbolSize: 8,
@ -194,7 +222,7 @@ setOptions(
name: "PIN间距", name: "PIN间距",
type: "line", type: "line",
yAxisIndex: 0, yAxisIndex: 0,
data: [160, 246, 450, 100, 246], data: alarmData.value.PIN,
smooth: true, smooth: true,
// showSymbol: false,/ // showSymbol: false,/
symbolSize: 8, symbolSize: 8,
@ -225,7 +253,7 @@ setOptions(
name: "压板缺陷", name: "压板缺陷",
type: "line", type: "line",
yAxisIndex: 0, yAxisIndex: 0,
data: [100, 200, 400, 150, 306], data: alarmData.value.plate,
smooth: true, smooth: true,
// showSymbol: false,/ // showSymbol: false,/
symbolSize: 8, symbolSize: 8,
@ -256,7 +284,7 @@ setOptions(
name: "划伤缺陷", name: "划伤缺陷",
type: "line", type: "line",
yAxisIndex: 0, yAxisIndex: 0,
data: [10, 20, 400, 150, 206], data: alarmData.value.scratched,
smooth: true, smooth: true,
// showSymbol: false,/ // showSymbol: false,/
symbolSize: 8, symbolSize: 8,
@ -287,7 +315,7 @@ setOptions(
name: "工件尺寸", name: "工件尺寸",
type: "line", type: "line",
yAxisIndex: 0, yAxisIndex: 0,
data: [150, 250, 500, 50, 36], data: alarmData.value.workpieceSize,
smooth: true, smooth: true,
// showSymbol: false,/ // showSymbol: false,/
symbolSize: 8, symbolSize: 8,

39
src/pages/dataScreen/views/home/components/DefectBar3D.vue
Unescape Escape View File

@ -8,7 +8,7 @@ const props = defineProps({
type: Array as PropType<Array<number>>, type: Array as PropType<Array<number>>,
default: () => [] default: () => []
}, },
questionData: { defect3DData: {
type: Array as PropType<Array<number>>, type: Array as PropType<Array<number>>,
default: () => [] default: () => []
} }
@ -19,12 +19,13 @@ const { isDark } = useDark();
const theme = computed(() => (isDark.value ? "dark" : "light")); const theme = computed(() => (isDark.value ? "dark" : "light"));
const DefectBar3dChartRef = ref(); const DefectBar3dChartRef = ref();
const { setOptions } = useECharts(DefectBar3dChartRef, { const { setOptions, getInstance } = useECharts(DefectBar3dChartRef, {
theme theme
}); });
const name = ["9:00", "10:00", "11:00", "12:00", "13:00", "14:00"]; const name = ["9:00", "10:00", "11:00", "12:00", "13:00", "14:00"];
const value = [100, 500, 400, 600, 700, 200]; const value = [100, 500, 400, 600, 700, 200];
const defect3DData = ref([...props.defect3DData]);
// const toolTims = null; // const toolTims = null;
const offsetX = 8; const offsetX = 8;
const offsetY = 4; const offsetY = 4;
@ -91,7 +92,29 @@ const CubeTop = echarts.graphic.extendShape({
echarts.graphic.registerShape("CubeLeft", CubeLeft); echarts.graphic.registerShape("CubeLeft", CubeLeft);
echarts.graphic.registerShape("CubeRight", CubeRight); echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop); echarts.graphic.registerShape("CubeTop", CubeTop);
watch(
() => props.defect3DData,
newDefectData => {
defect3DData.value = [...newDefectData];
updateChart();
},
{ immediate: true, deep: true }
);
function updateChart() {
// 检查图表实例是否存在
if (!getInstance()) {
console.error("图表实例不存在");
return;
}
// 获取当前的配置项
const currentOption = getInstance()!.getOption();
// 修改系列（series）数据
currentOption.series[0].data = defect3DData.value;
currentOption.series[1].data = defect3DData.value;
getInstance()!.setOption(currentOption);
}
watch( watch(
() => props, () => props,
async () => { async () => {
@ -107,7 +130,7 @@ watch(
}, },
formatter: function (params) { formatter: function (params) {
const item = params[1]; const item = params[1];
return `${item.name}:${item.value}`; return `${item.name}-${item.value}`;
} }
}, },
grid: { grid: {
@ -137,7 +160,7 @@ watch(
axisTick: { alignWithLabel: true }, // 控制样式里的X轴字在中间距离Y轴还有点距离 axisTick: { alignWithLabel: true }, // 控制样式里的X轴字在中间距离Y轴还有点距离
axisLabel: { axisLabel: {
// textStyle: { // textStyle: {
color: "#737A85", //更改坐标轴文字颜色 color: "rgba(255,255,255,0.8)", //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小 fontSize: 12 //更改坐标轴文字大小
// } // }
} }
@ -149,7 +172,7 @@ watch(
// name: "单位：万", // name: "单位：万",
axisLabel: { axisLabel: {
// textStyle: { // textStyle: {
color: "#737A85" color: "rgba(255,255,255,0.8)"
// } // }
}, },
nameTextStyle: { nameTextStyle: {
@ -177,7 +200,7 @@ watch(
type: "custom", type: "custom",
renderItem: (params, api) => { renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)]); const location = api.coord([api.value(0), api.value(1)]);
console.log("renderItem_api", location); // console.log("renderItem_api", location);
return { return {
type: "group", type: "group",
@ -254,7 +277,7 @@ watch(
] ]
}; };
}, },
data: value data: defect3DData.value
}, },
{ {
// name: "", // name: "",
@ -275,7 +298,7 @@ watch(
color: "transparent" color: "transparent"
}, },
tooltip: {}, tooltip: {},
data: value data: defect3DData.value
} }
] ]
}); });

56
src/pages/dataScreen/views/home/components/DefectLine.vue
Unescape Escape View File

@ -8,7 +8,6 @@ import {
type EchartOptions type EchartOptions
} from "@pureadmin/utils"; } from "@pureadmin/utils";
import * as echarts from "echarts/core"; import * as echarts from "echarts/core";
import { useIntervalFn } from "@vueuse/core";
const { isDark } = useDark(); const { isDark } = useDark();
@ -37,38 +36,29 @@ const props = defineProps({
const dateData = ref([...props.dateData]); const dateData = ref([...props.dateData]);
const defectData = ref([...props.defectData]); const defectData = ref([...props.defectData]);
// const defectData = computed(() => [...props.defectData]); watch(
// const defectData = computed(() => { () => props.defectData,
// console.log(props.dateData, "11"); newDefectData => {
defectData.value = [...newDefectData];
// return props.defectData.map((item: any) => { updateChart();
// return item.value; },
// }); { immediate: true, deep: true }
// }); );
// useIntervalFn(() => {
// console.log(getInstance(),'');
// }, 2000);
// watch(
// () => props.defectData,
// (newDefectData, oldDefectData) => {
// // ... 回调函数逻辑 ...
// console.log(newDefectData, "oldDefectData");
// defectData.value = JSON.parse(JSON.stringify(newDefectData));
// // updateChart()
// console.log(defectData.value, "watch");
// },
// { immediate: true, deep: true } // 立即执行回调
// );
onMounted(() => {
console.log(defectData.value);
console.log(getInstance());
});
function updateChart() { function updateChart() {
getInstance()!.dispatchAction({ // 检查图表实例是否存在
type: "series", if (!getInstance()) {
data: defectData.value console.error("图表实例不存在");
}); return;
}
// 获取当前的配置项
const currentOption = getInstance()!.getOption();
// 修改系列（series）数据
currentOption.series[0].data = defectData.value;
getInstance()!.setOption(currentOption);
} }
onMounted(() => {});
setOptions( setOptions(
{ {
title: { title: {
@ -125,7 +115,7 @@ setOptions(
axisTick: { alignWithLabel: true }, // 控制样式里的X轴字在中间距离Y轴还有点距离 axisTick: { alignWithLabel: true }, // 控制样式里的X轴字在中间距离Y轴还有点距离
axisLabel: { axisLabel: {
// textStyle: { // textStyle: {
color: "#737A85", //更改坐标轴文字颜色 color: "rgba(255,255,255,0.8)", //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小 fontSize: 12 //更改坐标轴文字大小
// } // }
}, },
@ -138,7 +128,7 @@ setOptions(
// name: "单位：万", // name: "单位：万",
axisLabel: { axisLabel: {
// textStyle: { // textStyle: {
color: "#737A85" color: "rgba(255,255,255,0.8)"
// } // }
}, },
nameTextStyle: { nameTextStyle: {

117
src/pages/dataScreen/views/home/homeIndex.vue
Unescape Escape View File

@ -19,6 +19,7 @@ import type { TabsPaneContext } from "element-plus";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { DsBox2 } from "@/components/DsBox"; import { DsBox2 } from "@/components/DsBox";
import { onUnmounted } from "vue";
const scroll = ref(); const scroll = ref();
@ -80,7 +81,46 @@ const classOption = reactive({
const activeName = ref("first"); const activeName = ref("first");
const handleClick = (tab: TabsPaneContext, event: Event) => { const handleClick = (tab: TabsPaneContext, event: Event) => {
console.log(tab); console.log(tab.props.name);
if (tab.props.name === "first") {
defect3DData.value = [100, 500, 400, 600, 700, 200];
} else if (tab.props.name === "second") {
defect3DData.value = [
randomIntFn(0, 700),
randomIntFn(0, 700),
randomIntFn(0, 700),
randomIntFn(0, 700),
randomIntFn(0, 700),
randomIntFn(0, 700)
];
} else if (tab.props.name === "third") {
defect3DData.value = [
randomIntFn(0, 700),
randomIntFn(0, 700),
randomIntFn(0, 700),
randomIntFn(0, 700),
randomIntFn(0, 700),
randomIntFn(0, 700)
];
} else if (tab.props.name === "fourth") {
defect3DData.value = [
randomIntFn(0, 700),
randomIntFn(0, 700),
randomIntFn(0, 700),
randomIntFn(0, 700),
randomIntFn(0, 700),
randomIntFn(0, 700)
];
} else {
defect3DData.value = [
randomIntFn(0, 700),
randomIntFn(0, 700),
randomIntFn(0, 700),
randomIntFn(0, 700),
randomIntFn(0, 700),
randomIntFn(0, 700)
];
}
}; };
// 获取最近五天日期 // 获取最近五天日期
@ -93,21 +133,72 @@ const recentDates = ref(
// 缺陷总数折线图 // 缺陷总数折线图
const intervalId = ref(null); const intervalId = ref(null);
const defectData = ref([46, 460, 100, 300, 20]); const defectData = ref([46, 460, 100, 300, 20]);
// 告警分类折线图
const alarmData = ref({
thread: [246, 246, 246, 180, 160],
PIN: [160, 246, 450, 100, 246],
plate: [100, 200, 400, 150, 306],
scratched: [10, 20, 400, 150, 206],
workpieceSize: [150, 250, 500, 50, 36]
});
// 缺陷3D柱状图
const defect3DData = ref([100, 500, 400, 600, 700, 200]);
const randomIntFn = (min: number, max: number) => { const randomIntFn = (min: number, max: number) => {
return Math.floor(Math.random() * (max - min + 1) + min); return Math.floor(Math.random() * (max - min + 1) + min);
}; };
onMounted(() => { onMounted(() => {
// setInterval(() => { intervalId.value = setInterval(() => {
// defectData.value = [ defectData.value = [
// randomIntFn(0, 500), randomIntFn(0, 500),
// randomIntFn(0, 500), randomIntFn(0, 500),
// randomIntFn(0, 500), randomIntFn(0, 500),
// randomIntFn(0, 500), randomIntFn(0, 500),
// randomIntFn(0, 500) randomIntFn(0, 500)
// ]; ];
// // console.log(defectData.value); alarmData.value.thread = [
// }, 2000); randomIntFn(0, 500),
randomIntFn(0, 500),
randomIntFn(0, 500),
randomIntFn(0, 500),
randomIntFn(0, 500)
];
alarmData.value.PIN = [
randomIntFn(0, 500),
randomIntFn(0, 500),
randomIntFn(0, 500),
randomIntFn(0, 500),
randomIntFn(0, 500)
];
alarmData.value.plate = [
randomIntFn(0, 500),
randomIntFn(0, 500),
randomIntFn(0, 500),
randomIntFn(0, 500),
randomIntFn(0, 500)
];
alarmData.value.scratched = [
randomIntFn(0, 500),
randomIntFn(0, 500),
randomIntFn(0, 500),
randomIntFn(0, 500),
randomIntFn(0, 500)
];
alarmData.value.workpieceSize = [
randomIntFn(0, 500),
randomIntFn(0, 500),
randomIntFn(0, 500),
randomIntFn(0, 500),
randomIntFn(0, 500)
];
// console.log(defectData.value);
}, 2000);
});
onUnmounted(() => {
clearInterval(intervalId.value); // 清除定时器
}); });
</script> </script>
<template> <template>
@ -117,7 +208,7 @@ onMounted(() => {
<DsBox2 title="分类告警" type="w1h1" bgClass="bg_home_item1"> <DsBox2 title="分类告警" type="w1h1" bgClass="bg_home_item1">
<template #default> <template #default>
<div class="w-full h-full"> <div class="w-full h-full">
<AlarmLine :dateData="recentDates" /> <AlarmLine :dateData="recentDates" :alarmData="alarmData" />
</div> </div>
</template> </template>
</DsBox2> </DsBox2>
@ -142,7 +233,7 @@ onMounted(() => {
<el-tab-pane label="工件尺寸测量" name="fifth" /> <el-tab-pane label="工件尺寸测量" name="fifth" />
</el-tabs> </el-tabs>
</div> </div>
<DefectBar3D /> <DefectBar3D :defect3DData="defect3DData" />
</div> </div>
</template> </template>
</DsBox2> </DsBox2>

2
src/pages/dataScreen/views/modelList/components/ModelBox.vue
Unescape Escape View File

@ -132,7 +132,7 @@ const handleClickDetail = (modelData: CardProductType) => {
position: relative; position: relative;
padding: 65px 20px 24px; padding: 65px 20px 24px;
margin-top: 40px; margin-top: 40px;
margin-bottom: 4px; margin-bottom: 24px;
width: 100%; width: 100%;
height: 172px; height: 172px;
background: linear-gradient( background: linear-gradient(

10
src/pages/dataScreen/views/modelList/modelList.scss
Unescape Escape View File

@ -19,9 +19,9 @@
width: 554px; width: 554px;
height: 60px; height: 60px;
background: url("@/assets/dataScreen/modelList/modelListTitle.svg") background: url("@/assets/dataScreen/modelList/modelListTitle.svg")
no-repeat center center; no-repeat center bottom;
font-size: 28px; font-size: 28px;
line-height: 40px; line-height: 50px;
text-align: center; text-align: center;
span { span {
font-size: 36px; font-size: 36px;
@ -35,7 +35,7 @@
position: relative; position: relative;
padding: 65px 20px 24px; padding: 65px 20px 24px;
margin-top: 40px; margin-top: 40px;
margin-bottom: 4px; margin-bottom: 24px;
width: 100%; width: 100%;
height: 172px; height: 172px;
background: linear-gradient( background: linear-gradient(
@ -154,12 +154,12 @@
} }
:deep(.modelListDialog) { :deep(.modelListDialog) {
width: 640px; width: 640px;
height: 300px; // height: 300px;
background: #021f4e !important; background: #021f4e !important;
border-radius: 8px; border-radius: 8px;
border: 1px solid #438cff; border: 1px solid #438cff;
.el-dialog__body { .el-dialog__body {
padding: 0 20px; padding: 0 20px 20px;
.modelListDialogBody { .modelListDialogBody {
.modelListDialogTitle { .modelListDialogTitle {
margin-bottom: 8px; margin-bottom: 8px;

13
src/pages/dataScreen/views/modelList/modelList.vue
Unescape Escape View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
// import { getList } from "@/api/list"; // import { getList } from "@/api/list";
import { getModelList } from "@/api/list"; import { getModelBoxList } from "@/api/list";
import error from "@/assets/dataScreen/modelList/error.png"; import error from "@/assets/dataScreen/modelList/error.png";
import loading from "@/assets/dataScreen/modelList/loading.png"; import loading from "@/assets/dataScreen/modelList/loading.png";
import { ElLoading } from "element-plus"; import { ElLoading } from "element-plus";
@ -59,7 +59,7 @@ const options = reactive({
const page = ref(1); const page = ref(1);
const list = ref([]); const list = ref([]);
const pageSize = ref(); const pageSize = ref(20);
const loadingInstance = ref(); const loadingInstance = ref();
const modelDialogVisible = ref(false); const modelDialogVisible = ref(false);
const INITIAL_DATA = { const INITIAL_DATA = {
@ -83,7 +83,7 @@ function handleLoadMore() {
background: "transparent", background: "transparent",
text: "加载中" text: "加载中"
}); });
getModelList({ getModelBoxList({
page: page.value, page: page.value,
pageSize: pageSize.value pageSize: pageSize.value
}).then(res => { }).then(res => {
@ -129,14 +129,15 @@ onMounted(() => {
</template> </template>
</Waterfall> </Waterfall>
<el-backtop <!-- <el-backtop
title="回到顶部" title="回到顶部"
:right="35" :right="70"
:bottom="120"
:visibility-height="400" :visibility-height="400"
target=".content .el-scrollbar__wrap" target=".content .el-scrollbar__wrap"
> >
<backTop /> <backTop />
</el-backtop> </el-backtop> -->
<!-- 加载更多 --> <!-- 加载更多 -->
<InfiniteLoading :firstload="false" @infinite="handleLoadMore" /> <InfiniteLoading :firstload="false" @infinite="handleLoadMore" />

1
src/pages/dataScreen/views/serverList/components/ServerBox.vue
Unescape Escape View File

@ -105,6 +105,7 @@ const progressData = ref([
<style lang="scss" scoped> <style lang="scss" scoped>
.server-box { .server-box {
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 24px;
width: 404px; width: 404px;
// height: 214px; // height: 214px;
.server-box-title { .server-box-title {

1
src/pages/dataScreen/views/serverList/serverList.scss
Unescape Escape View File

@ -36,6 +36,7 @@
} }
.server-list-box { .server-list-box {
.server-box { .server-box {
margin-bottom: 24px;
box-sizing: border-box; box-sizing: border-box;
width: 404px; width: 404px;
// height: 214px; // height: 214px;

6
src/pages/dataScreen/views/serverList/serverList.vue
Unescape Escape View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { getServerList } from "@/api/list"; import { getServerBoxList } from "@/api/list";
import error from "@/assets/dataScreen/modelList/error.png"; import error from "@/assets/dataScreen/modelList/error.png";
import loading from "@/assets/dataScreen/modelList/loading.png"; import loading from "@/assets/dataScreen/modelList/loading.png";
import { ElLoading } from "element-plus"; import { ElLoading } from "element-plus";
@ -57,7 +57,7 @@ const options = reactive({
const page = ref(1); const page = ref(1);
const list = ref([]); const list = ref([]);
const pageSize = ref(); const pageSize = ref(13);
const loadingInstance = ref(); const loadingInstance = ref();
/** 加载更多 */ /** 加载更多 */
@ -67,7 +67,7 @@ function handleLoadMore() {
background: "transparent", background: "transparent",
text: "加载中" text: "加载中"
}); });
getServerList({ getServerBoxList({
page: page.value, page: page.value,
pageSize: pageSize.value pageSize: pageSize.value
}).then(res => { }).then(res => {

8
src/plugins/echarts/index.ts
Unescape Escape View File

@ -16,7 +16,9 @@ import {
ToolboxComponent, ToolboxComponent,
TooltipComponent, TooltipComponent,
DataZoomComponent, DataZoomComponent,
VisualMapComponent VisualMapComponent,
TimelineComponent,
CalendarComponent
} from "echarts/components"; } from "echarts/components";
const { use } = echarts; const { use } = echarts;
@ -35,7 +37,9 @@ use([
DataZoomComponent, DataZoomComponent,
VisualMapComponent, VisualMapComponent,
CustomChart, CustomChart,
PictorialBarChart PictorialBarChart,
TimelineComponent,
CalendarComponent
]); ]);
/** /**

Write Preview
Loading…
Cancel
Save