简柏林 / thingskit-front · Commits

Commit 4a8e124ac4a00d1662131c4c95b6ada7f81c6bdd

Authored by loveumiko
1 parent 1c039a32

fix: 修改边缘监控图标样式

Inline Side-by-side
Showing 5 changed files with 265 additions and 59 deletions
  1 +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15.933" viewBox="0 0 16 15.933"><defs><style>.a{fill:#343c4c;}</style></defs><path class="a" d="M345.333,337.067h-2.667a1.337,1.337,0,0,0-1.333,1.333v2.667a1.337,1.337,0,0,0,1.333,1.333h2.667a1.337,1.337,0,0,0,1.333-1.333V338.4A1.337,1.337,0,0,0,345.333,337.067Zm0,4h-2.667V338.4h2.667Z" transform="translate(-335.999 -331.8)"/><path class="a" d="M15.333,8.533a.667.667,0,1,0,0-1.333H14V5.867h1.333A.63.63,0,0,0,16,5.2a.63.63,0,0,0-.667-.667H14A2.7,2.7,0,0,0,11.333,2V.667A.667.667,0,1,0,10,.667V2H8.667V.667a.667.667,0,0,0-1.333,0V2H6V.667A.63.63,0,0,0,5.333,0a.668.668,0,0,0-.667.667V2A2.7,2.7,0,0,0,2,4.533H.667A.63.63,0,0,0,0,5.2a.63.63,0,0,0,.667.667H2V7.2H.667a.667.667,0,0,0,0,1.333H2V9.867H.667a.667.667,0,1,0,0,1.333H2v.133A2.675,2.675,0,0,0,4.667,14v1.267a.63.63,0,0,0,.667.667A.63.63,0,0,0,6,15.267V14H7.333v1.267a.667.667,0,1,0,1.333,0V14H10v1.267a.667.667,0,1,0,1.333,0V14A2.675,2.675,0,0,0,14,11.333V11.2h1.333a.667.667,0,0,0,0-1.333H14V8.533h1.333Zm-2.667,2.8a1.337,1.337,0,0,1-1.333,1.333H4.667a1.337,1.337,0,0,1-1.333-1.333V4.667A1.337,1.337,0,0,1,4.667,3.333h6.667a1.337,1.337,0,0,1,1.333,1.333v6.667Z"/></svg>
  1 +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15.873" viewBox="0 0 16 15.873"><defs><style>.a{fill:#343c4c;}</style></defs><g transform="translate(-75.041 -99.03)"><path class="a" d="M90.95,111.459l-1.7-11.191,0-.014a1.344,1.344,0,0,0-1.276-1.225H78.36a1.356,1.356,0,0,0-1.236,1.2l0,.011-2.049,11.425.011,0a2.32,2.32,0,0,0-.042.446v.384a2.4,2.4,0,0,0,2.4,2.4h11.2a2.4,2.4,0,0,0,2.4-2.4v-.384a2.4,2.4,0,0,0-.09-.658ZM78.292,100.645c.1-.389.256-.424.344-.434h9.108c.223,0,.3.335.317.416l1.38,9.1a2.292,2.292,0,0,0-1.065-.263H77.706a2.29,2.29,0,0,0-1.046.252ZM89.936,112.4a1.378,1.378,0,0,1-1.415,1.339H77.56a1.378,1.378,0,0,1-1.415-1.339v-.356a1.378,1.378,0,0,1,1.415-1.339H88.522a1.412,1.412,0,0,1,1.34.907l.066.418h.008v.369h0Z"/><path class="a" d="M160.413,229.5H158.5a.48.48,0,1,0,0,.96h1.916a.48.48,0,0,0,0-.96Zm1.964-3.83h5.032a1.864,1.864,0,0,0,1.391-.587,2.344,2.344,0,0,0,.522-1.826,2.536,2.536,0,0,0-1.747-1.987,2.511,2.511,0,0,0-2.416-2.261,2.382,2.382,0,0,0-1.789.835,1.835,1.835,0,0,0-1.685,1.245,2.49,2.49,0,0,0-1.953,2.063,1.87,1.87,0,0,0,.415,1.428A3.433,3.433,0,0,0,162.378,225.673Zm-1.514-2.45c.094-.792.66-1.029,1.454-1.287l.267-.089.054-.261a.852.852,0,0,1,.794-.719.616.616,0,0,1,.121.011l.291.048.167-.24a1.354,1.354,0,0,1,1.12-.617,1.509,1.509,0,0,1,1.414,1.559l0,.293.3.132c.7.31,1.293.614,1.352,1.244a1.34,1.34,0,0,1-.261,1.045.826.826,0,0,1-.652.267h-4.739a2.362,2.362,0,0,1-1.478-.708A.86.86,0,0,1,160.864,223.223Z" transform="translate(-81.382 -117.677)"/></g></svg>
  1 +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:#343c4c;}</style></defs><g transform="translate(-562 -613)"><rect class="a" width="16" height="16" transform="translate(562 613)"/><g transform="translate(563.294 613)"><path class="b" d="M148.64,80.44H138.412a1.594,1.594,0,0,1-1.592-1.592V66.032a1.594,1.594,0,0,1,1.592-1.592h6.36a1.567,1.567,0,0,1,1.132.487l3.9,4.115a1.554,1.554,0,0,1,.428,1.073v8.733a1.594,1.594,0,0,1-1.592,1.592ZM138.412,65.714a.319.319,0,0,0-.318.318V78.848a.319.319,0,0,0,.318.318H148.64a.319.319,0,0,0,.318-.318V70.115a.285.285,0,0,0-.079-.2l-3.9-4.115a.287.287,0,0,0-.208-.089Z" transform="translate(-136.82 -64.44)"/><path class="b" d="M310.723,460.845h-6.046a.7.7,0,0,1-.7-.7v-5.04a.7.7,0,0,1,.7-.7h6.046a.7.7,0,0,1,.7.7v5.04a.7.7,0,0,1-.7.7Zm-5.787-.955h5.53v-4.524h-5.53Z" transform="translate(-300.992 -447.439)"/><path class="b" d="M426.518,592.369a.478.478,0,0,1-.478-.478v-2.774a.478.478,0,0,1,.955,0v2.774A.477.477,0,0,1,426.518,592.369Zm2.378,0a.478.478,0,0,1-.478-.478v-2.774a.478.478,0,0,1,.955,0v2.774A.478.478,0,0,1,428.9,592.369Z" transform="translate(-420.87 -579.27)"/></g></g></svg>
@@ -42,7 +42,7 @@ @@ -42,7 +42,7 @@
42 <EdgeMonitoring 42 <EdgeMonitoring
43 v-if="recordData" 43 v-if="recordData"
44 :recordData="recordData" 44 :recordData="recordData"
45 - class="p-4 bg-neutral-100 dark:bg-dark-700" 45 + class="p-4 bg-fff dark:bg-dark-700"
46 /> 46 />
47 </Tabs.TabPane> 47 </Tabs.TabPane>
48 <Tabs.TabPane tab="边缘事件" :key="ActiveKey.EDGEEVENTS"> 48 <Tabs.TabPane tab="边缘事件" :key="ActiveKey.EDGEEVENTS">
@@ -18,8 +18,11 @@ @@ -18,8 +18,11 @@
18 import { useGlobSetting } from '/@/hooks/setting'; 18 import { useGlobSetting } from '/@/hooks/setting';
19 import moment from 'moment'; 19 import moment from 'moment';
20 import { EdgeInstanceItemType } from '/@/api/edgeManage/model/edgeInstance'; 20 import { EdgeInstanceItemType } from '/@/api/edgeManage/model/edgeInstance';
21 - import { isArray } from '/@/utils/is'; 21 + import { isArray, isNumber } from '/@/utils/is';
22 import { formatSizeUnits } from '/@/utils'; 22 import { formatSizeUnits } from '/@/utils';
  23 + import cpuSvg from '/@/assets/icons/cpu.svg';
  24 + import diskSvg from '/@/assets/icons/disk.svg';
  25 + import memorySvg from '/@/assets/icons/memory.svg';
23 26
24 interface ChartInstance { 27 interface ChartInstance {
25 name: string; 28 name: string;
@@ -30,6 +33,7 @@ @@ -30,6 +33,7 @@
30 text: string; 33 text: string;
31 xAxisData: string[]; 34 xAxisData: string[];
32 seriesData: number[]; 35 seriesData: number[];
  36 + icon: any;
33 } 37 }
34 38
35 enum DeviceInfoOfEdge { 39 enum DeviceInfoOfEdge {
@@ -67,11 +71,11 @@ @@ -67,11 +71,11 @@
67 cmdId: 11, 71 cmdId: 11,
68 entityType: 'EDGE', 72 entityType: 'EDGE',
69 keys: `${DeviceInfoOfEdge.CPU_USAGE_OF_EDGE},${DeviceInfoOfEdge.DISC_USAGE_OF_EDGE},${DeviceInfoOfEdge.MEMORY_USAGE_OF_EDGE},${DeviceInfoOfEdge.CPU_COUNT_OF_EDGE},${DeviceInfoOfEdge.TOTAL_MEMORY_OF_EDGE},${DeviceInfoOfEdge.TOTAL_DISC_SPACE_OF_EDGE}`, 73 keys: `${DeviceInfoOfEdge.CPU_USAGE_OF_EDGE},${DeviceInfoOfEdge.DISC_USAGE_OF_EDGE},${DeviceInfoOfEdge.MEMORY_USAGE_OF_EDGE},${DeviceInfoOfEdge.CPU_COUNT_OF_EDGE},${DeviceInfoOfEdge.TOTAL_MEMORY_OF_EDGE},${DeviceInfoOfEdge.TOTAL_DISC_SPACE_OF_EDGE}`,
70 - startTs: moment(moment().subtract(1, 'hours')).valueOf(), 74 + startTs: moment(moment().subtract(1, 'minute')).valueOf(),
71 timeWindow: 3600000, 75 timeWindow: 3600000,
72 interval: 10000, 76 interval: 10000,
73 intervalType: 'MILLISECONDS', 77 intervalType: 'MILLISECONDS',
74 - limit: 360, 78 + // limit: 360,
75 timeZoneId: 'Asia/Shanghai', 79 timeZoneId: 'Asia/Shanghai',
76 agg: 'AVG', 80 agg: 'AVG',
77 unsubscribe: false, 81 unsubscribe: false,
@@ -90,6 +94,7 @@ @@ -90,6 +94,7 @@
90 type: DeviceInfoOfEdge.CPU_USAGE_OF_EDGE, 94 type: DeviceInfoOfEdge.CPU_USAGE_OF_EDGE,
91 xAxisData: [], 95 xAxisData: [],
92 seriesData: [], 96 seriesData: [],
  97 + icon: cpuSvg,
93 }, 98 },
94 { 99 {
95 name: '内存', 100 name: '内存',
@@ -100,6 +105,7 @@ @@ -100,6 +105,7 @@
100 type: DeviceInfoOfEdge.MEMORY_USAGE_OF_EDGE, 105 type: DeviceInfoOfEdge.MEMORY_USAGE_OF_EDGE,
101 xAxisData: [], 106 xAxisData: [],
102 seriesData: [], 107 seriesData: [],
  108 + icon: memorySvg,
103 }, 109 },
104 { 110 {
105 name: '磁盘', 111 name: '磁盘',
@@ -110,17 +116,18 @@ @@ -110,17 +116,18 @@
110 type: DeviceInfoOfEdge.DISC_USAGE_OF_EDGE, 116 type: DeviceInfoOfEdge.DISC_USAGE_OF_EDGE,
111 xAxisData: [], 117 xAxisData: [],
112 seriesData: [], 118 seriesData: [],
  119 + icon: diskSvg,
113 }, 120 },
114 ]); 121 ]);
115 122
116 const chartsInstance = shallowReactive<{ [key: string]: echarts.ECharts }>({}); 123 const chartsInstance = shallowReactive<{ [key: string]: echarts.ECharts }>({});
117 124
118 - const cacheUsedSpace = (total, percentage) => {  
119 - if (!total) return;  
120 - const takeValue = total.split('.')[0];  
121 - const takeUnit = total.split('.')[1];  
122 - return `${(takeValue * (percentage / 100)).toFixed(1)}${takeUnit}`;  
123 - }; 125 + // const cacheUsedSpace = (total, percentage) => {
  126 + // if (!total) return;
  127 + // const takeValue = total.split('.')[0];
  128 + // const takeUnit = total.split('.')[1];
  129 + // return `${(takeValue * (percentage / 100)).toFixed(1)}${takeUnit}`;
  130 + // };
124 131
125 const { send, close, data, open } = useWebSocket(socketInfo.origin, { 132 const { send, close, data, open } = useWebSocket(socketInfo.origin, {
126 immediate: false, 133 immediate: false,
@@ -139,7 +146,8 @@ @@ -139,7 +146,8 @@
139 chartInstance.value.forEach((chartItem: ChartInstance) => { 146 chartInstance.value.forEach((chartItem: ChartInstance) => {
140 if (chartItem.type === key) { 147 if (chartItem.type === key) {
141 chartItem.xAxisData.push(moment(data[key][0][0]).format('HH:mm')); 148 chartItem.xAxisData.push(moment(data[key][0][0]).format('HH:mm'));
142 - chartItem.seriesData.push(data[key][0][1]); 149 + // chartItem.seriesData = [];
  150 + chartItem.seriesData = data[key][0][1] ? [data[key][0][1]] : [];
143 chartItem.currentValue = Number(data[key][0][1]); 151 chartItem.currentValue = Number(data[key][0][1]);
144 } 152 }
145 if (chartItem.totalKey === key) { 153 if (chartItem.totalKey === key) {
@@ -167,50 +175,246 @@ @@ -167,50 +175,246 @@
167 }, 175 },
168 }); 176 });
169 177
170 - const handleRenderChartInstance = async (chartInstance: ChartInstance[]) => {  
171 - await nextTick();  
172 - if (!chartInstance) return;  
173 - if (isArray(chartInstance) && chartInstance.length <= 0) return;  
174 - for (const item of unref(chartInstance)) {  
175 - const { type, xAxisData, seriesData, text } = item;  
176 - chartsInstance[type] = echarts.init(document.getElementById(`chart-${type}`) as HTMLElement);  
177 - const chartOption = {  
178 - title: {  
179 - text,  
180 - textAlign: 'left',  
181 - textStyle: {  
182 - fontSize: 12, 178 + function onResize(type) {
  179 + if (!chartsInstance[type]) return;
  180 + chartsInstance[type]?.resize();
  181 + }
  182 +
  183 + const chartOption = {
  184 + series: [
  185 + {
  186 + data: [],
  187 + detail: {
  188 + formatter: `暂无数据`,
  189 + },
  190 + type: 'gauge',
  191 + axisLine: {
  192 + lineStyle: {
  193 + width: 10,
  194 + color: [
  195 + [0.2, '#739ded'],
  196 + [0.8, '#5f89d8'],
  197 + [1, '#377dff'],
  198 + ],
  199 + },
  200 + },
  201 + pointer: {
  202 + itemStyle: {
  203 + color: 'auto',
183 }, 204 },
184 }, 205 },
185 - tooltip: {  
186 - trigger: 'axis',  
187 - axisPointer: {  
188 - type: 'cross', 206 + axisTick: {
  207 + distance: 0,
  208 + length: 8,
  209 + lineStyle: {
  210 + color: 'auto',
189 }, 211 },
190 }, 212 },
191 - xAxis: {  
192 - type: 'category',  
193 - data: xAxisData, 213 + splitLine: {
  214 + distance: 0,
  215 + length: 10,
  216 + lineStyle: {
  217 + color: 'auto',
  218 + width: 3,
  219 + },
194 }, 220 },
195 - yAxis: {  
196 - type: 'value',  
197 - name: '%', 221 + axisLabel: {
  222 + color: 'inherit',
  223 + distance: 15,
  224 + fontSize: 8,
198 }, 225 },
199 - series: [  
200 - {  
201 - data: seriesData,  
202 - type: 'line', 226 + },
  227 + ],
  228 + };
  229 + const pieOption = {
  230 + grid: {
  231 + top: 0,
  232 + bottom: 0,
  233 + left: 0,
  234 + right: 0,
  235 + },
  236 + tooltip: {
  237 + trigger: 'item',
  238 + formatter: '{b}<br/>{d}%',
  239 + textStyle: {
  240 + fontSize: 12,
  241 + },
  242 + },
  243 + title: {
  244 + text: '磁盘容量',
  245 + subtext: '暂无数据',
  246 + textStyle: {
  247 + fontSize: 12,
  248 + color: '#72767c',
  249 + },
  250 + subtextStyle: {
  251 + fontSize: 14,
  252 + color: '#000000',
  253 + fontWeight: 500,
  254 + },
  255 + textAlign: 'center',
  256 + left: '48.5%',
  257 + top: '44%',
  258 + },
  259 + legend: {
  260 + show: true,
  261 + icon: 'circle',
  262 +
  263 + bottom: '0%',
  264 + data: [{ name: '磁盘已使用' }, { name: '磁盘剩余空间' }].map((item) => ({
  265 + name: item.name,
  266 + })),
  267 + formatter(name: string) {
  268 + return `{b_style|${name}} `;
  269 + },
  270 + textStyle: {
  271 + color: '#000',
  272 + rich: {
  273 + b_style: {
  274 + color: '#8d8ea0',
  275 + fontSize: 12,
  276 + padding: [0, 5, 0, 0],
203 }, 277 },
  278 + },
  279 + },
  280 + },
  281 + series: [
  282 + {
  283 + type: 'pie',
  284 + // center: ['35%', '50%'],
  285 + radius: ['40%', '67%'],
  286 + startAngle: 30,
  287 + emphasis: {
  288 + scale: false,
  289 + },
  290 + label: {
  291 + position: 'outside',
  292 + alignTo: 'labelLine',
  293 + height: 0,
  294 + width: 0,
  295 + lineHeight: 0,
  296 + distanceToLabelLine: 75,
  297 + borderRadius: 3,
  298 + borderWidth: 1,
  299 + borderColor: 'none',
  300 + padding: [20, -15, 0, -10],
  301 + rich: {
  302 + a: {
  303 + padding: [0, -80, 55, -80],
  304 + fontSize: '12px',
  305 + color: '#000000',
  306 + },
  307 + b: {
  308 + padding: [20, -80, 40, -80],
  309 + fontSize: '12px',
  310 + color: '#72767c',
  311 + },
  312 + },
  313 + // formatter: (params: any) => {
  314 + // const { data } = params;
  315 + // const { value } = data || {};
  316 +
  317 + // const total = Number(totalCount.totalDisc?.split('.')[0] || 0);
  318 + // const totalUnit = totalCount.totalDisc?.split('.')[1] || 0;
  319 +
  320 + // return `{a|${value && total ? value : ''}${value && total ? '%' : ''}} \n {b|${
  321 + // total ? (total * (value / 100)).toFixed(1) : ''
  322 + // }${total ? totalUnit : ''}}`;
  323 + // },
  324 + },
  325 + labelLine: {
  326 + show: false,
  327 + length: 5,
  328 + // align: 'bottom',
  329 + lineStyle: {
  330 + width: 1,
  331 + },
  332 + },
  333 + data: [
  334 + { name: '磁盘已使用', value: 0, itemStyle: { color: '#90b2f1' } },
  335 + { name: '磁盘剩余空间', value: 100, itemStyle: { color: '#377dff' } },
204 ], 336 ],
205 - };  
206 - chartsInstance[type].setOption(chartOption); 337 + },
  338 + ],
  339 + };
  340 +
  341 + const handleRenderChartInstance = async (chartInstance: ChartInstance[]) => {
  342 + await nextTick();
  343 + if (!chartInstance) return;
  344 + if (isArray(chartInstance) && chartInstance.length <= 0) return;
  345 + for (const item of unref(chartInstance)) {
  346 + const { type, seriesData, currentValue, totalCount } = item;
  347 + // chartsInstance[type] = echarts.init(document.getElementById(`chart-${type}`) as HTMLElement);
  348 + if (type !== DeviceInfoOfEdge.DISC_USAGE_OF_EDGE) {
  349 + chartsInstance[type].setOption({
  350 + series: [
  351 + {
  352 + data: seriesData,
  353 + detail: {
  354 + formatter: `${isNumber(currentValue) ? '{value} %' : '暂无数据'}`,
  355 + },
  356 + },
  357 + ],
  358 + });
  359 + } else {
  360 + chartsInstance[type].setOption({
  361 + title: {
  362 + subtext: totalCount.totalDisc,
  363 + },
  364 + series: [
  365 + {
  366 + label: {
  367 + formatter: (params: any) => {
  368 + const { data } = params;
  369 + const { value } = data || {};
  370 +
  371 + const total = Number(totalCount.totalDisc?.split('.')[0] || 0);
  372 + const totalUnit = totalCount.totalDisc?.split('.')[1] || 0;
  373 +
  374 + return `{a|${value && total ? value : ''}${value && total ? '%' : ''}} \n {b|${
  375 + total ? (total * (value / 100)).toFixed(1) : ''
  376 + }${total ? totalUnit : ''}}`;
  377 + },
  378 + },
  379 + data: [
  380 + { name: '磁盘已使用', value: currentValue, itemStyle: { color: '#90b2f1' } },
  381 + {
  382 + name: '磁盘剩余空间',
  383 + value: 100 - currentValue,
  384 + itemStyle: { color: '#377dff' },
  385 + },
  386 + ],
  387 + },
  388 + ],
  389 + });
  390 + }
  391 +
  392 + window.addEventListener('resize', () => onResize(type));
207 } 393 }
208 }; 394 };
209 395
  396 + onUnmounted(() => {
  397 + window.removeEventListener('resize', onResize);
  398 + });
  399 +
210 onMounted(() => { 400 onMounted(() => {
211 socketInfo.entityId = props.recordData?.id?.id as string; 401 socketInfo.entityId = props.recordData?.id?.id as string;
212 if (socketInfo.entityId) { 402 if (socketInfo.entityId) {
213 open(); 403 open();
  404 + [
  405 + DeviceInfoOfEdge.CPU_USAGE_OF_EDGE,
  406 + DeviceInfoOfEdge.MEMORY_USAGE_OF_EDGE,
  407 + DeviceInfoOfEdge.DISC_USAGE_OF_EDGE,
  408 + ].forEach((item) => {
  409 + chartsInstance[item] = echarts.init(
  410 + document.getElementById(`chart-${item}`) as HTMLElement
  411 + );
  412 + if (item !== DeviceInfoOfEdge.DISC_USAGE_OF_EDGE) {
  413 + chartsInstance[item]?.setOption(chartOption);
  414 + } else {
  415 + chartsInstance[item]?.setOption(pieOption);
  416 + }
  417 + });
214 } 418 }
215 }); 419 });
216 420
@@ -220,14 +424,18 @@ @@ -220,14 +424,18 @@
220 <template> 424 <template>
221 <div> 425 <div>
222 <a-row justify="space-around" align="middle" :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }"> 426 <a-row justify="space-around" align="middle" :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
223 - <a-col class="gutter-row" :span="8" v-for="(item, index) in chartInstance" :key="index">  
224 - <a-row justify="space-around" align="middle">  
225 - <div  
226 - style="background-color: #d3d3d3; border-radius: 20px"  
227 - class="!flex justify-between items-center gap-8 font-bold fill-dark-900 p-2.5 mt-4"  
228 - >  
229 - <span>{{ item.name }}</span>  
230 - <span>{{ item.currentValue }}%</span> 427 + <a-col
  428 + class="gutter-row"
  429 + style="background: #f5f5f5; border-radius: 20px"
  430 + :span="7"
  431 + v-for="(item, index) in chartInstance"
  432 + :key="index"
  433 + >
  434 + <a-row align="middle">
  435 + <div class="!flex justify-between items-center font-bold fill-dark-900 p-2.5 mt-4">
  436 + <img :src="item.icon" />
  437 + <span class="ml-1">{{ item.text }}</span>
  438 + <!-- <span>{{ item.currentValue }}%</span>
231 <span v-if="item.type !== DeviceInfoOfEdge.DISC_USAGE_OF_EDGE" 439 <span v-if="item.type !== DeviceInfoOfEdge.DISC_USAGE_OF_EDGE"
232 >{{ 440 >{{
233 item.type === DeviceInfoOfEdge.CPU_USAGE_OF_EDGE 441 item.type === DeviceInfoOfEdge.CPU_USAGE_OF_EDGE
@@ -242,25 +450,20 @@ @@ -242,25 +450,20 @@
242 > 450 >
243 <span v-if="item.type === DeviceInfoOfEdge.DISC_USAGE_OF_EDGE" style="color: #1677ff" 451 <span v-if="item.type === DeviceInfoOfEdge.DISC_USAGE_OF_EDGE" style="color: #1677ff"
244 >可用{{ item.totalCount.totalDisc }}</span 452 >可用{{ item.totalCount.totalDisc }}</span
245 - > 453 + > -->
246 </div> 454 </div>
247 </a-row> 455 </a-row>
248 <a-row class="mt-8" justify="space-around" align="middle"> 456 <a-row class="mt-8" justify="space-around" align="middle">
249 - <div  
250 - :style="`border-width:${item.seriesData.length <= 0 ? 0 : 1}px`"  
251 - style="border-color: #d3d3d3"  
252 - class="flex items-center"  
253 - > 457 + <div class="flex w-full justify-center relative">
254 <Empty 458 <Empty
255 - v-if="item.seriesData.length <= 0"  
256 description="暂无数据" 459 description="暂无数据"
257 - class="text-dark-50 m-4" 460 + class="text-dark-50 m-4 absolute"
  461 + :style="{ display: item.seriesData.length == 0 ? 'block' : 'none' }"
258 /> 462 />
259 <div 463 <div
260 - v-else  
261 :id="`chart-${item.type}`" 464 :id="`chart-${item.type}`"
262 - style="width: 380px; height: 300px"  
263 - class="m-4" 465 + class="m-4 w-8.5/10 h-300px"
  466 + :style="{ opacity: item.seriesData.length > 0 ? 1 : 0 }"
264 ></div> 467 ></div>
265 </div> 468 </div>
266 </a-row> 469 </a-row>