完善告警统计页面接口对接

src/api/device/index.ts

@@ -103,6 +103,7 @@ export default {
     deviceIndicatorPolymerize: (params: object) => get('/analysis/deviceIndicatorPolymerize', params),
   },
   device: {
+    getDeviceAttributesHistoryList: (params: object) => get('/analysis/getDeviceAttributesHistoryList', params),
     getList: (params: object) => get('/product/device/bind_list', params),
     allList: (params: object) => get('/product/device/list', params),
     getSubList: (params: object) => get('/product/device/sub_list', params),
@@ -112,6 +113,7 @@ export default {
     setDeviceStatus: (data: object) => post('/product/device/setDeviceStatus', data),
     import: (data: object) => post('/product/device/import', data),
     export: (data: object) => file('/product/device/export', data),
+    
   },
   dev_asset: {
     all: (params: object) => get('/asset/asset/all', params),

src/components/chart/options.ts

@@ -1,4 +1,9 @@
+export function getTheme() {
+  return localStorage.isDark ? 'dark' : 'light'
+}
+
 const fontFamily = 'CenturyGothic';
+const colors = ['#4285F4', '#2ecc71', '#FBBB04', '#e67e22', '#FF0000'].reverse()
 
 function getPx(px: number) {
   return Math.round((window.innerWidth * px) / 1920)
@@ -45,7 +50,7 @@ export function getPieOption({ data = [] as any[],
   radius = ['30%', '50%'],
   center = ['50%', '55%'],
   legend = { bottom: '5%', left: 'center', top: '0' } as any,
-  rate = ''
+  total = 0
 }) {
   return {
     // tooltip: {
@@ -54,21 +59,12 @@ export function getPieOption({ data = [] as any[],
     legend: {
       textStyle: {
         fontSize: getPx(14),
+        color: getTheme() === 'dark' ? '#fff' : '#333',
       },
       itemWidth: getPx(20), itemHeight: getPx(14),
       ...legend
     },
-    title: {
-      text: rate,
-      top: 'center',
-      left: 'center',
-      // bottom: 0,
-      textStyle: {
-        fontSize: getPx(24),
-        // fontWeight: 'normal'
-      },
-    },
-    color: ['#2578f2', '#a1c7f8'],
+    color: colors,
     series: [
       {
         name: '',
@@ -78,18 +74,33 @@ export function getPieOption({ data = [] as any[],
         avoidLabelOverlap: false,
         itemStyle: {
           borderRadius: 5,
-          borderColor: '#fff',
+          borderColor: 'transparent',
           borderWidth: 1
         },
         label: {
-          position: 'outer',
+          show: true,
           alignTo: 'labelLine',
           bleedMargin: 5,
-          formatter: '{b}\n{d}%',
+          // formatter: '{b}\n{d}%',
           minMargin: 5,
           edgeDistance: 10,
           lineHeight: getPx(14),
           fontSize: getPx(14),
+          color: getTheme() === 'dark' ? '#fff' : '#333',
+          position: "center",
+          formatter: `{a|${total} }\n{b|告警总数}`,
+          rich: {
+            a: {
+              color: getTheme() === 'dark' ? '#fff' : '#333',
+              fontSize: getPx(24),
+              fontWeight: 'bold'
+            },
+            b: {
+              color: getTheme() === 'dark' ? '#fff' : '#333',
+              fontSize: getPx(16),
+              lineHeight: getPx(40),
+            }
+          }
         },
         labelLine: {
           length: 15,
@@ -104,23 +115,32 @@ export function getPieOption({ data = [] as any[],
 
 export function getPie3Option({ data = [] as any[],
   radius = ['40%', '57%'],
-  center = ['50%', '45%'],
-  title = 'Server Group Name_1'
+  center = ['50%', '50%'],
+  total = 0,
 }) {
   return {
     tooltip: {
       trigger: 'item'
     },
+    color: ['#4285F4', '#2ecc71', '#FBBB04', '#e67e22', '#FF0000'],
     title: {
-      text: title,
-      bottom: '0',
+      text: '总计',
+      subtext: total,
+      top: '41%',
       left: 'center',
       textStyle: {
-        fontSize: getPx(14),
-        fontWeight: 'normal'
+        fontSize: getPx(20),
+        fontWeight: 'normal',
+        color: getTheme() === 'dark' ? '#fff' : '#333',
+        lineHeight: getPx(20),
+      },
+      subtextStyle: {
+        fontSize: getPx(24),
+        lineHeight: getPx(24),
+        fontWeight: 'bold',
+        color: getTheme() === 'dark' ? '#fff' : '#333',
       },
     },
-    color: ['#2578f2', '#a1c7f8'],
     series: [
       {
         name: '',
@@ -137,15 +157,16 @@ export function getPie3Option({ data = [] as any[],
           position: 'outer',
           alignTo: 'labelLine',
           bleedMargin: 5,
-          formatter: '{b}\n{d}%',
+          formatter: '{b}\n{d}% ({c})',
           minMargin: 5,
           edgeDistance: 10,
-          lineHeight: getPx(12),
-          fontSize: getPx(12),
+          lineHeight: getPx(14),
+          fontSize: getPx(14),
+          color: getTheme() === 'dark' ? '#fff' : '#333',
         },
         labelLine: {
-          length: 6,
-          length2: 6,
+          length: 16,
+          length2: 16,
           maxSurfaceAngle: 80
         },
         data
@@ -341,6 +362,7 @@ export function getLineOption({
   datas = [[12, 14, 0]] as any[],
   xAxis = ['4', '5', '6'] as any[],
   legend = [] as string[],
+  color = [] as string[],
   dataZoom = [] as object[],
 }) {
 
@@ -354,18 +376,29 @@ export function getLineOption({
   })
 
   return {
+    color: color.length > 0 ? color : colors,
     tooltip: {
       trigger: 'axis',
     },
-    legend: { left: 'center', top: 0, data: legend },
+    legend: {
+      left: 'center', top: 0, data: legend,
+      textStyle: {
+        color: getTheme() === 'dark' ? '#fff' : '#333'
+      }
+    },
     grid: { top: 30, bottom: 0, left: 35, right: 30, containLabel: true },
-    // color: ['rgb(6, 176, 60)', 'rgb(253, 109, 90)'],
     xAxis: {
       type: 'category',
       data: xAxis
     },
     yAxis: {
-      type: 'value'
+      type: 'value',
+      splitLine: {
+        lineStyle: {
+          color: getTheme() === 'dark' ? '#3D3D3D' : '#DDE1EE',
+          type: 'dashed',
+        }
+      }
     },
     series,
     dataZoom
@@ -439,14 +472,14 @@ export function getBarRowOption({
       formatter: "{b}: <b>{c}%</b>"
     },
     legend: { left: 'center', bottom: 0, data: legend },
-    grid: { top: 10, bottom: 28, left: 5, right: 15, containLabel: true },
+    grid: { top: 10, bottom: 10, left: 5, right: 20, containLabel: true },
     color: ['#2578f2', '#a1c7f8'],
     xAxis: {
       type: 'value',
       // splitNumber: 4,
       max: max,
       axisLabel: {
-        formatter: "{value}%"
+        formatter: "{value}"
       }
     },
     yAxis: {

src/hooks/useCommon.ts

@@ -69,3 +69,11 @@ export function useThemeChange(configArr: any[]) {
     })
   });
 }
+
+export function useThemeChangeFunc(func: Function) {
+  const store = useStore();
+
+  watch(() => store.state.themeConfig.themeConfig.isIsDark, (isIsDark) => {
+    func(isIsDark)
+  });
+}

src/views/iot/alarm/dashboard/index.vue

@@ -23,16 +23,38 @@
 						<el-radio-button label="2">未关闭告警</el-radio-button>
 					</el-radio-group>
 				</div>
-				<Chart height="300px" ref="chart1"></Chart>
+				<Chart height="250px" ref="chart1"></Chart>
 			</div>
 			<div class="chart-item" style="flex: 1.5">
-				<div class="chart-title">告警趋势</div>
-				<Chart height="300px" ref="chart2"></Chart>
+				<div class="chart-title flex-row">
+					告警趋势
+					<el-radio-group v-model="intervalType" size="small" @change="onIntervalTypeChange">
+						<el-radio-button label="1">小时</el-radio-button>
+						<el-radio-button label="2">天</el-radio-button>
+						<el-radio-button label="3">月</el-radio-button>
+					</el-radio-group>
+				</div>
+				<Chart height="250px" ref="chart2"></Chart>
 			</div>
 		</div>
 		<div class="chart-wrapper">
 			<div class="chart-item" style="flex: 1">
-				<div class="chart-title">处理状态</div>
+				<div class="chart-title flex-row">
+					处理状态
+					<el-date-picker
+						v-model="statusDateRange"
+						type="daterange"
+						range-separator="至"
+						start-placeholder="开始日期"
+						end-placeholder="结束日期"
+						:disabled-date="disabledDate"
+						format="YYYY-MM-DD"
+						value-format="YYYY-MM-DD"
+						size="small"
+						@change="onStatusDateChange"
+						style="max-width: 200px"
+					/>
+				</div>
 				<Chart height="300px" ref="chart3"></Chart>
 			</div>
 			<div class="chart-item" style="flex: 1.5">
@@ -49,8 +71,9 @@ import { toRefs, reactive, onMounted, ref, watch, nextTick, onActivated, getCurr
 import api from '/@/api/alarm'
 import AlarmList from '/@/views/iot/alarm/list/index.vue'
 import Chart from '/@/components/chart/index.vue'
-import { getLineOption, getPie2Option, getPie3Option, getPie4Option, getPieOption } from '/@/components/chart/options'
+import { getBarOption, getBarRowOption, getLineOption, getPie2Option, getPie3Option, getPie4Option, getPieOption } from '/@/components/chart/options'
 import dayjs from 'dayjs'
+import { useThemeChangeFunc } from '/@/hooks/useCommon'
 
 const chart1 = ref()
 const chart2 = ref()
@@ -59,6 +82,18 @@ const chart4 = ref()
 
 // 查询类型：不传为 全部告警 1已关闭告警 2未关闭告警
 const searchType = ref('')
+// 统计间隔：1小时 2天 3月
+const intervalType = ref('1')
+// 处理状态时间范围
+const statusDateRange = ref([
+	dayjs().startOf('month').format('YYYY-MM-DD'),
+	dayjs().format('YYYY-MM-DD')
+])
+
+// 禁用未来日期
+const disabledDate = (time: Date) => {
+	return time.getTime() > Date.now()
+}
 
 const { proxy } = getCurrentInstance() as any
 const { alarm_type } = proxy.useDict('alarm_type')
@@ -72,6 +107,7 @@ watch(
 		list.forEach((item: any) => {
 			alarmTypeMap[item.value] = item.label
 		})
+		getOverviewData()
 	},
 	{
 		immediate: true,
@@ -101,78 +137,62 @@ const homeOne = reactive([
 	},
 ])
 
+const onIntervalTypeChange = () => {
+	// 告警趋势 intervalType 统计间隔：1小时 2天 3月
+	api.dashboard.getAnalyzeTrend({ intervalType: intervalType.value }).then((res: any) => {
+		const resData = Object.values(res || []) as any[]
+		const legend = Object.keys(res || []).map((item) => alarmTypeMap[item])
+		// console.log(resData)
+		chart2.value?.draw(
+			getLineOption({
+				legend,
+				datas: resData.map((arr: any) => arr.map((item: any) => item.alarmCount)),
+				xAxis: resData?.[0]?.map((item: any) => item.alarmDate),
+			})
+		)
+	})
+}
+
 const onSearchTypeChange = () => {
 	// 告警级别分布
 	api.dashboard
 		.getAlarmLevel({
 			searchType: searchType.value,
-			startDate: dayjs().startOf('year').format('YYYY-MM-DD'),
-			endDate: dayjs().endOf('year').format('YYYY-MM-DD'),
+			startDate: dayjs().subtract(20, 'year').format('YYYY-MM-DD'),
+			endDate: dayjs().format('YYYY-MM-DD'),
 		})
 		.then((res: any) => {
-			const resData = res || [
-				{
-					alarmCount: 2548,
-					alarmLevel: '1',
-					levelName: '超紧急',
-				},
-				{
-					alarmCount: 0,
-					alarmLevel: '2',
-					levelName: '紧急',
-				},
-				{
-					alarmCount: 0,
-					alarmLevel: '3',
-					levelName: '严重',
-				},
-				{
-					alarmCount: 0,
-					alarmLevel: '4',
-					levelName: '一般',
-				},
-				{
-					alarmCount: 0,
-					alarmLevel: '5',
-					levelName: '提醒',
-				},
-			]
+			const resData = res || []
+			const total = resData.reduce((a: any, b: any) => a + b.alarmCount, 0)
 			chart1.value?.draw(
 				getPieOption({
-					data: resData.map((item: any) => ({ name: item.levelName, value: item.alarmCount })),
+					radius: ['45%', '60%'],
+					center: ['35%', '50%'],
+					legend: {
+						orient: 'vertical',
+						top: 'center',
+						right: '10%',
+					},
+					total,
+					data: resData.map((item: any) => ({
+						name: item.levelName + ' ' + item.alarmCount + ' (' + ((item.alarmCount / total) * 100).toFixed(2) + '%)',
+						value: item.alarmCount,
+					})),
 				})
 			)
 		})
 }
 
-const getOverviewData = () => {
-	// 顶部统计数据
-	api.dashboard.getTotalAlarmStatistics().then((res: any) => {
-		homeOne[0].allnum = res.alarmTotalCount
-		homeOne[1].allnum = res.closeAlarmCount
-		homeOne[2].allnum = res.unCloseAlarmCount
-		homeOne[3].allnum = res.averageDealTime
-	})
-	onSearchTypeChange()
-	// 告警趋势 intervalType 统计间隔：1小时 2天 3月
-	api.dashboard.getAnalyzeTrend({ intervalType: 2 }).then((res: any) => {
-		const resData = Object.values(res || []) as any[]
-		const legend = Object.keys(res || [])
-		// console.log(resData)
+const onStatusDateChange = () => {
+	getAlarmStatusData()
+}
 
-		chart2.value?.draw(
-			getLineOption({
-				legend,
-				datas: resData.map((arr: any) => arr.map((item: any) => item.alarmCount)),
-				xAxis: resData?.[0]?.map((item: any) => item.alarmDate),
-			})
-		)
-	})
+const getAlarmStatusData = () => {
 	// 处理状态
 	api.dashboard
 		.getAlarmStatus({
-			startDate: dayjs().startOf('month').format('YYYY-MM-DD'),
-			endDate: dayjs().endOf('month').format('YYYY-MM-DD'),
+			startDate: statusDateRange.value[0],
+			endDate: statusDateRange.value[1],
 		})
 		.then((res: any) => {
 			const statusMap = {
@@ -181,42 +201,40 @@ const getOverviewData = () => {
 				2: '已忽略',
 			}
 
-			const resData = res || [
-				{
-					alarmCount: 4,
-					status: '1',
-				},
-				{
-					alarmCount: 2544,
-					status: '0',
-				},
-				{
-					alarmCount: 0,
-					status: '2',
-				},
-			]
-			console.log(resData)
+			const resData = res || []
+			const total = resData.reduce((a: any, b: any) => a + b.alarmCount, 0)
 			chart3.value?.draw(
-				getPieOption({
+				getPie3Option({
+					total,
 					data: resData.map((item: any) => ({ name: statusMap[item.status as keyof typeof statusMap], value: item.alarmCount })),
 				})
 			)
 		})
+}
+
+const getOverviewData = () => {
+	// 顶部统计数据
+	api.dashboard.getTotalAlarmStatistics().then((res: any) => {
+		homeOne[0].allnum = res.alarmTotalCount
+		homeOne[1].allnum = res.closeAlarmCount
+		homeOne[2].allnum = res.unCloseAlarmCount
+		homeOne[3].allnum = res.averageDealTime
+	})
+	onSearchTypeChange()
+	onIntervalTypeChange()
+	// 获取处理状态数据
+	getAlarmStatusData()
 	api.dashboard.getDeviceAlarmTop10().then((res: any) => {
 		const list = res || []
-		const chartData = getLineOption({
-			datas: [list.map((item: any) => item.alarmCount)],
+		const chartData = getBarRowOption({
+			data: [list.map((item: any) => item.alarmCount)],
 			xAxis: list.map((item: any) => item.deviceName),
-			legend: ['告警设备top10'],
 		})
 		chart4.value.draw(chartData)
 	})
 }
 
-// 页面加载时
-onMounted(() => {
-	getOverviewData()
-})
+useThemeChangeFunc(getOverviewData)
 </script>
 
 <style scoped lang="scss">

src/views/iot/device/instance/component/chart.vue

@@ -42,7 +42,13 @@
 								><el-icon><Download /></el-icon>导出</el-button
 							>
 						</div>
-						<el-table :data="historyData" border style="width: 100%" v-loading="historyLoading" :max-height="isFullscreen ? 'calc(100vh - 250px)' : 'calc(90vh - 300px)'">
+						<el-table
+							:data="historyData"
+							border
+							style="width: 100%"
+							v-loading="historyLoading"
+							:max-height="isFullscreen ? 'calc(100vh - 250px)' : 'calc(90vh - 300px)'"
+						>
 							<el-table-column prop="ts" label="时间" align="center" />
 							<el-table-column prop="value" label="属性值" align="center" />
 							<el-table-column prop="unit" label="数据单位" align="center">
@@ -95,7 +101,6 @@ const pageSize = ref(10)
 const totalItems = ref(0)
 
 const params = reactive({
-	productKey: '',
 	deviceKey: '',
 	properties: '',
 	dateRange: [dayjs().subtract(30, 'minute').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')],
@@ -227,16 +232,13 @@ const fetchHistoryData = () => {
 	historyLoading.value = true
 
 	const historyParams = {
-		productKey: params.productKey,
-		deviceKey: params.deviceKey,
-		propertyKey: params.properties,
-		dateRange: params.dateRange,
+		...params,
 		pageNum: currentPage.value,
 		pageSize: pageSize.value,
 	}
 
-	api.instance
-		.getLogDetail(historyParams)
+	api.device
+		.getDeviceAttributesHistoryList(historyParams)
 		.then((res: any) => {
 			historyData.value = res.List
 			totalItems.value = res.Total
@@ -263,15 +265,12 @@ const handleCurrentChange = (page: number) => {
 // 导出数据
 const exportData = () => {
 	const historyParams = {
-		productKey: params.productKey,
-		deviceKey: params.deviceKey,
-		propertyKey: params.properties,
-		dateRange: params.dateRange,
+		...params,
 		pageNum: currentPage.value,
 		pageSize: pageSize.value,
 	}
 
-	api.instance.getLogDetail(historyParams).then((res: any) => {
+	api.device.getDeviceAttributesHistoryList(historyParams).then((res: any) => {
 		// 创建CSV内容
 		let csvContent = '时间,属性值'
 		if (data.value.unit) {
@@ -372,8 +371,7 @@ const toggleFullscreen = () => {
 }
 
 // 打开弹窗
-const openDialog = (row: any, deviceKey: string, productKey: string) => {
-	params.productKey = productKey
+const openDialog = (row: any, deviceKey: string) => {
 	params.deviceKey = deviceKey
 	params.properties = row.key
 

src/views/iot/ota-update/update/component/batch.vue

@@ -65,7 +65,7 @@
 			<el-table-column label="操作" width="120" align="center">
 				<template #default="scope">
 					<el-button size="small" text type="primary" @click="getDeviceList(scope.row)">查看</el-button>
-					<!-- <el-button size="small" text type="warning" @click="CheckUpdate(scope.row)">编辑</el-button> -->
+					<!-- <el-button size="small" text type="warning" @click="edit(scope.row)">编辑</el-button> -->
 					<el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
 				</template>
 			</el-table-column>
@@ -225,7 +225,15 @@ export default defineComponent({
 		const getDeviceList = (row: any) => {
 			deviceRef.value.openDialog(row)
 		}
+		const edit = (row: any) => {
+			console.log(row)
+			state.tableData.param.id = props.detail.id
+			console.log(state.tableData.param)
+			console.log(props.detail)
+			checkRef.value.openDialog(state.tableData.param, props.detail)
+		}
 		return {
+			edit,
 			deviceRef,
 			checkRef,
 			queryRef,

src/views/iot/ota-update/update/component/edit.vue

@@ -70,8 +70,8 @@
 
 				<el-form-item label="升级包是否验证" prop="check">
 					<el-radio-group v-model="ruleForm.check">
-						<el-radio label="1">是</el-radio>
-						<el-radio label="2">否</el-radio>
+						<el-radio :label="1">是</el-radio>
+						<el-radio :label="2">否</el-radio>
 					</el-radio-group>
 				</el-form-item>