增加 vue-data-ui 及例子调试

package.json

@@ -52,6 +52,7 @@
     "vform3-builds": "3.0.8",
     "vue": "3.2.37",
     "vue-clipboard3": "1.0.1",
+    "vue-data-ui": "^2.3.98",
     "vue-grid-layout": "3.0.0-beta1",
     "vue-i18n": "9.1.10",
     "vue-router": "4.0.13",

src/utils/dataUiOptions.ts

@@ -0,0 +1,92 @@
+
+export function getLineData({ xAxis = [] as any[], datas = [] as number[][], legend = [] as string[], suffix = '', width = 1000, height = 250 }) {
+  const colors = ['#6376DD', '#FBBB04']
+  const config = {
+    "chart": {
+      "fontFamily": "inherit",
+      "paddingTop": 0,
+      "backgroundColor": "transparent",
+      "color": "#888888",
+      height,
+      maxHeight: height,
+      width,
+      "zoom": {
+        "show": false
+      },
+      "padding": {
+        "top": 16,
+        "right": 14,
+        "bottom": 34,
+        "left": 30
+      },
+      "grid": {
+        "position": "start",
+        "labels": {
+          "show": true,
+          "color": "#888888",
+          "fontSize": 12,
+          "axis": {
+            "fontSize": 12
+          },
+          "yAxis": {
+            "commonScaleSteps": 5,
+          },
+          "xAxisLabels": {
+            "show": true,
+            "color": "#888888",
+            "values": xAxis,
+            "fontSize": 12,
+            "showOnlyFirstAndLast": false,
+            "yOffset": 8
+          }
+        }
+      },
+      "labels": {
+        "fontSize": 12,
+        "prefix": "",
+        suffix
+      },
+      "legend": {
+        "show": true,
+        "color": "#888888",
+        "fontSize": 12
+      },
+      "title": {
+        "text": " ",
+        "show": false
+      },
+      "userOptions": {
+        "show": false
+      }
+    },
+    "line": {
+      "radius": 3,
+      "useGradient": true,
+      "strokeWidth": 2,
+      "labels": {
+      },
+      "area": {
+        "useGradient": true,
+        "opacity": "26"
+      }
+    },
+  }
+
+  const dataset = datas.map((data, i) => {
+    return {
+      "name": legend[i],
+      "series": data,
+      "color": colors[i],
+      "type": "line",
+      "shape": "circle",
+      "useArea": true,
+      "useProgression": false,
+      "dataLabels": true,
+      "smooth": true,
+      "dashed": false,
+      "useTag": "none"
+    }
+  })
+
+  return { config, dataset }
+}

src/views/iot/iotmanager/chart.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { ref } from "vue";
+import { VueUiXy } from "vue-data-ui";
+import "vue-data-ui/style.css";
+import { getLineData } from "/@/utils/dataUiOptions";
+
+const config = ref();
+
+const dataset = ref();
+
+const chartData = getLineData({
+  xAxis: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+  legend: ['消息量', '预警量'],
+  datas: [
+    [120, 132, 101, 134, 90, 230, 210], [220, 182, 191, 234, 290, 330, 310],
+  ]
+})
+
+config.value = chartData.config
+dataset.value = chartData.dataset
+</script>
+
+<template>
+  <VueUiXy :dataset="dataset" :config="config" />
+</template>

src/views/iot/iotmanager/dashboard.vue

@@ -29,9 +29,13 @@
 				</div>
 			</el-col>
 		</el-row>
+		<!-- <VueUiXy :dataset="dataset" :config="config" /> -->
 		<el-row :gutter="15" class="home-card-two mb15">
 			<el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16">
 				<div class="home-card-item chart">
+					<!-- <div class="home-card-item-title">
+						<span>设备消息</span>
+					</div> -->
 					<div style="height: 100%" ref="homeLineRef"></div>
 				</div>
 			</el-col>
@@ -52,10 +56,10 @@
 						<el-table-column label="ID" align="center" prop="id" width="100" v-col="'ID'" />
 						<el-table-column label="告警类型" width="120" prop="type" align="center" show-overflow-tooltip v-col="'type'">
 							<template #default="scope">
-                <span v-if="scope.row.type == 1">规则告警</span>
-                <span v-else-if="scope.row.type == 2">设备自主告警</span>
-                <span v-else-if="scope.row.type == 3">规侧告警升级</span>
-                <span v-else>设备自主告警</span>
+								<span v-if="scope.row.type == 1">规则告警</span>
+								<span v-else-if="scope.row.type == 2">设备自主告警</span>
+								<span v-else-if="scope.row.type == 3">规侧告警升级</span>
+								<span v-else>设备自主告警</span>
 							</template>
 						</el-table-column>
 						<el-table-column label="规则级别" width="120" align="center" prop="alarmLevel.name" show-overflow-tooltip v-col="'alarmLevel'" />
@@ -91,6 +95,9 @@ import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onA
 import * as echarts from 'echarts';
 import { useRouter, useRoute } from 'vue-router';
 import { useStore } from '/@/store/index';
+import { VueUiXy } from "vue-data-ui";
+import "vue-data-ui/style.css";
+import { getLineData } from "/@/utils/dataUiOptions";
 
 import api from '/@/api/datahub';
 import dayjs from 'dayjs';
@@ -107,10 +114,20 @@ let global: any = {
 
 export default defineComponent({
 	name: 'home',
-	components: { EditDic, DetailDic },
+	components: { EditDic, DetailDic, VueUiXy },
 	setup() {
 		// 页面是显示状态
 		let isActice = true
+		const config = ref({
+			type: "line",
+			style: {
+				maxHeight: 250,
+			},
+			height: 250,
+			width: 1000,
+		});
+
+		const dataset = ref<any[]>([]);
 
 		onUnmounted(() => {
 			isActice = false
@@ -450,6 +467,19 @@ export default defineComponent({
 				state.lineChartMsgTotalData = msgArr.map((item: any) => item.Value)
 				state.lineChartXAxisData = msgArr.map((item: any) => item.Title)
 				state.lineChartAlarmTotalData = alarmArr.map((item: any) => item.Value)
+
+				const chartData = getLineData({
+					xAxis: msgArr.map((item: any) => item.Title),
+					legend: ['消息量', '预警量'],
+					datas: [
+						msgArr.map((item: any) => item.Value),
+						alarmArr.map((item: any) => item.Value)
+					]
+				})
+
+				config.value = chartData.config
+				dataset.value = chartData.dataset
+
 			}).finally(() => loopRquest(getDeviceDataCount, 60000))
 		}
 
@@ -604,6 +634,8 @@ export default defineComponent({
 		);
 		return {
 			homeLineRef,
+			config,
+			dataset,
 			homePieRef,
 			homeBarRef,
 			detailRef,

yarn.lock

@@ -3387,6 +3387,11 @@ vue-clipboard3@1.0.1:
   dependencies:
     clipboard "^2.0.6"
 
+vue-data-ui@^2.3.98:
+  version "2.3.98"
+  resolved "https://registry.npmmirror.com/vue-data-ui/-/vue-data-ui-2.3.98.tgz#80d99bbfaecdaa33b51bd4060f4a3e6d07f636f0"
+  integrity sha512-NvUM1GuAZKb3qNy0kHqsuWOJOG2AhXQGNTLV+OohqJcV8ISLT/vTzMkNq8axuP1QI9yruc1B8ZEwNDdwHr1+MA==
+
 vue-demi@*:
   version "0.14.10"
   resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz"