2022-11-22 update

1. 新增曲线偏差率分析
2. 页面效果待完善

src/pages/curveDeviation/rateAnalysis/components/chart.vue

@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import util from "@tools/util";
+import * as echarts from 'echarts'
+import { computed, onMounted, watch } from 'vue';
+const chartId = 'chart-' + util.newGUID(); //chartId
+let chartIns = null  //chart 实例
+const props = defineProps({
+	xAxis: {
+		type: Object,
+		required: true,
+		default: () => ({})
+	},
+	series: {
+		type: Array,
+		required: true
+	},
+	height: {
+		type: String,
+		required: false,
+		default: '500px'
+	},
+	width: {
+		type: String,
+		required: false,
+		default: '500px'
+	},
+	title: {
+		type: String,
+		required: false
+	}
+})
+
+/**定义option */
+const option = computed({
+	get() {
+		return {
+			angleAxis: props.xAxis || {
+				type: 'category',
+				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+			},
+			// title: props.title ||'',
+			radiusAxis: {},
+			polar: {},
+			tooltip: {},
+			series: props.series || [
+				{
+					type: 'bar',
+					data: [1, 2, 3, 4, 3, 5, 1],
+					coordinateSystem: 'polar',
+					name: 'A',
+					stack: 'a',
+					emphasis: {
+						focus: 'series'
+					}
+				},
+				{
+					type: 'bar',
+					data: [2, 4, 6, 1, 3, 2, 1],
+					coordinateSystem: 'polar',
+					name: 'B',
+					stack: 'a',
+					emphasis: {
+						focus: 'series'
+					}
+				},
+				{
+					type: 'bar',
+					data: [1, 2, 3, 4, 1, 2, 5],
+					coordinateSystem: 'polar',
+					name: 'C',
+					stack: 'a',
+					emphasis: {
+						focus: 'series'
+					}
+				}
+			],
+			legend: {
+				show: true,
+				// data: ['A', 'B', 'C']
+			}
+		}
+	},
+	set(val) { }
+})
+watch(() => option, (newVal, oldVal) => {
+	if (chartIns) {
+		console.log(newVal)
+		chartIns.setOption(newVal)
+	}
+}, { deep: true })
+
+onMounted(() => {
+	chartIns = echarts.init(document.getElementById(chartId))
+	console.log(JSON.stringify(option.value))
+	chartIns.setOption(option.value)
+	console.log(chartIns)
+})
+</script>
+<template>
+	<div :id="chartId" :style="{height: props.height, width: props.width}"></div>
+</template>

src/pages/curveDeviation/rateAnalysis/components/search.vue

@@ -1,91 +1,24 @@
 <script lang="ts" setup name="search">
 import { onMounted, reactive, ref } from 'vue'
-import request from '@/api/axios.js'
 
 const queryForm = reactive({
-	station: '',
-	wtIds: [],
-	st: Date.now() - 30 * 24 * 60 * 60 * 1000,
-	et: Date.now(),
-	interval: 3
+	mode: 0
 })
-/**场站 */
-const stationList = ref([])
-const funGetStation = async () => {
-	const res = await request.get("/base/station")
-	stationList.value = res.data
-	if (stationList.value.length) {
-		queryForm.station = stationList.value[0].id
-		funGetWind(queryForm.station)
-	}
-}
-const funStationChange = (stationId?: string) => {
-	if (stationId) {
-		funGetWind(stationId)
-	} else {
-		windList.value = []
-	}
-}
-/**风机 */
-const windList = ref<{id:string, name: string}[]>([])
-const funGetWind = async (stationId: string) => {
-	const res = await request.get("/base/windturbine", {params: { stationId }})
-	windList.value = res.data
-	queryForm.wtIds = res.data.map(o => o.id)
-}
-/**导出 */
+/**执行 */
 const emits = defineEmits(['submit'])
 const funSubmit = async () => {
-	const query = {
-		station: queryForm.station,
-		wtIds: queryForm.wtIds.join(),
-		st: new Date(queryForm.st).getTime(),
-		et: new Date(queryForm.et).getTime(),
-		interval: queryForm.interval
-	}
-	switch (queryForm.interval) {
-		case 2:
-			query.interval = 60
-			break;
-		case 3:
-			query.interval = 600
-			break;
-		case 4:
-			query.interval = 900
-			break;
-	}
-	emits('submit', query)
+	emits('submit', queryForm)
 }
-/**created */
-funGetStation()
 </script>
 <template>
 	<div class="overflow-x-auto pl-[10px] pt-[10px]">
 		<el-form class="whitespace-nowrap" :inline="true" :model="queryForm">
-			<el-form-item label="场站">
-				<el-select v-model="queryForm.station" class="w-[150px]" @change="funStationChange">
-					<el-option v-for="item in stationList" :key="item.id" :label="item.name" :value="item.id"></el-option>
-				</el-select>
-			</el-form-item>
-			<el-form-item label="风机">
-				<el-select multiple class="w-[150px]" clearable v-model="queryForm.wtIds" collapse-tags>
-					<el-option v-for="item in windList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+			<el-form-item label="合并方式">
+				<el-select v-model="queryForm.mode" class="w-[150px]">
+					<el-option :value="0" label="多表单台"></el-option>
+					<el-option :value="1" label="单表多台"></el-option>
 				</el-select>
 			</el-form-item>
-			<el-form-item label="开始时间">
-				<el-date-picker class="!w-[150px]" type="date" v-model="queryForm.st"></el-date-picker>
-			</el-form-item>
-			<el-form-item label="结束时间">
-				<el-date-picker class="!w-[150px]" type="date" v-model="queryForm.et"></el-date-picker>
-			</el-form-item>
-			<el-form-item label="等间隔">
-				<el-radio-group v-model="queryForm.interval">
-					<el-radio :label="1">一秒钟</el-radio>
-					<el-radio :label="2">一分钟</el-radio>
-					<el-radio :label="3">十分钟</el-radio>
-					<el-radio :label="4">十五分钟</el-radio>
-				</el-radio-group>
-			</el-form-item>
 			<el-form-item>
 				<el-button type="primary" v-prevdbclick:5000="funSubmit">执行</el-button>
 			</el-form-item>

src/pages/curveDeviation/rateAnalysis/components/table.vue

@@ -1,41 +0,0 @@
-<script lang="ts" setup name="table">
-import {ref, computed} from 'vue'
-const props = withDefaults(defineProps<{
-  height?: string | number,
-  data: any,
-  column: any,
-  tableId: string,
-  tableName: string,
-  loading?: boolean
-}>(), {
-  height: '800px',
-  data: [],
-  column: [],
-  tableName: '',
-  tableId: '',
-  loading: false
-})
-const emits = defineEmits(['export'])
-const funExport = () => {
-  emits('export')
-}
-const tableRef = ref('')
-const tableHeight =  computed(() => {
-  return tableRef.value.offsetHeight? tableRef.value.offsetHeight - 46 : 661
-})
-</script>
-<template>
-  <div ref="tableRef" class="p-[10px] shadow rounded-[6px] shadow-blue-500"
-    :style="{ height: typeof props.height === 'string' ? props.height : props.height + 'px' }">
-    <div class="flex justify-between items-center pb-[10px] border-b-[1px]">
-      <h3>{{props.tableName}}</h3>
-      <!-- <el-button type="primary" @click="funExport" :disabled="!props.tableId">数据导出</el-button> -->
-    </div>
-    <el-table border :data="props.data"
-      size="small" v-loading="props.loading"
-      :max-height="tableHeight"
-      :style="{ width: '100%'}">
-      <el-table-column align="center" show-overflow-tooltip v-for="item in props.column" :prop="item.prop" :label="item.label" sortable resizable :min-width="item.width? item.width : 80" />
-    </el-table>
-  </div>
-</template>

src/pages/curveDeviation/rateAnalysis/index.vue

@@ -2,7 +2,7 @@
 import searchCop from './components/search.vue'
 import excelCop from '@/components/excel.vue'
 import treeCop from '@/components/tree.vue'
-import tableCop from './components/table.vue'
+import chartCop from './components/chart.vue'
 import { ElMessage } from 'element-plus';
 import { onMounted, ref, onActivated } from 'vue'
 import request from "@/api/axios.js"
@@ -12,20 +12,12 @@ const treeHeight = '81vh' //tree高度
 const excelHeight = '81vh' //excel高度
 const tableHeight = '81vh'
 /**excel 开始 */
+const excelCheckIds = ref([])
 const excelList = ref<{ id: string, name: string }[]>([])
-const funExcelChange = async (obj: any) => { //点击excel项时
-	tableShowId.value = obj.id
-	tableName.value = obj.name
-	tableLoading.value = true
-	const res = await request.get('/power/prepare/show', { params: { id: obj.id } })
-	tableColumn.value = res.data.title.map(o => {
-		return {
-			prop: o.key,
-			label: o.des,
-		}
-	})
-	tableData.value = res.data.data
-	tableLoading.value = false
+//点击excel项时
+const funExcelChange = async (obj: any) => { }
+const funExcelCheckChange = ({ checkArr, data }) => {
+	excelCheckIds.value = checkArr
 }
 /**tree 开始 */
 const treeData = ref([])
@@ -45,9 +37,23 @@ const funRepeatMap = (arr: any) => {
 	})
 }
 const funGetTree = async () => {
-	const res = await request.get("/power/prepare/tree")
+	const res = await request.get("/power/process/tree")
 	treeData.value = funRepeatMap(res.data)
 }
+const funTreeCheckChange = ({ current, checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) => {  //tree change  -> excel change
+	funCurrentChange({ current, currentNode: '' })
+	const checkIds = []
+	if (checkedNodes.length) {
+		for (const node of checkedNodes) {
+			if (node.childs && node.childs.length) {
+				for (const child of node.childs) {
+					checkIds.push(child.id)
+				}
+			}
+		}
+	}
+	excelCheckIds.value = checkIds
+}
 const funCurrentChange = ({ current, currentNode }) => {
 	if (current.childs) {
 		excelList.value = current.childs.map(o => {
@@ -67,46 +73,105 @@ const funCurrentChange = ({ current, currentNode }) => {
 		excelList.value = []
 	}
 }
-/**table 开始 */
-const tableShowId = ref('')
-const tableName = ref('')
-const tableColumn = ref([])
-const tableLoading = ref(false)
-const tableData = ref([])
-const funExport = async () => {
-	const a = document.createElement('a')
-	a.href = config.baseURL + '/power/prepare/download?id=' + tableShowId.value
-	a.download = ''
-	a.click()
+/**chart */
+const funText = (index) => {
+	let str = ''
+	switch (index) {
+		case 0:
+			str = '0-2.5'
+			break
+		case 1:
+			str = '2.5-5'
+			break
+		case 2:
+			str = '5-7.5'
+			break
+		case 3:
+			str = '7.5-10'
+			break
+		case 4:
+			str = '10-12.5'
+			break
+		case 5:
+			str = '12.5-15'
+			break
+		case 6:
+			str = '15-17.5'
+			break
+		case 7:
+			str = '17.5-20'
+			break
+		case 8:
+			str = '20-22.5'
+			break
+		case 9:
+			str = '22.5-25'
+			break
+		case 10:
+			str = '25-inf'
+			break
+	}
+	return str
 }
+const chartData = ref<any>([]) //roses的chartList
 /**submit */
-const progress = ref(0)
-const funWebSocket = () => {
-	const webSocket = new WebSocket(`${config.socketURL}/ws/powerfitting/admin`)
-	webSocket.onerror = () => setTimeout(() => { funWebSocket() }, 2000)
-
-	webSocket.onmessage = (event) => {
-		const message = JSON.parse(event.data)
-		if (message.code === 200) {
-			progress.value = Number(message.data) * 100
-			if (progress.value === 100) {
-				ElMessage.success('数据加载完成')
-				funGetTree()
-				progress.value = 0
+const funSubmit = async (params) => {
+	const rosesRes = await request.get('/wind/roses', {
+		params: {
+			ids: excelCheckIds.value.join(','),
+			mode: params.mode
+		}
+	})
+	if (rosesRes.code === 200) {
+		if (rosesRes.data?.length) {
+			console.log(rosesRes.data)
+			chartData.value = []
+			for (const chart of rosesRes.data) {
+				chartData.value.push({
+					title: chart.wt,
+					xAxis: {
+						type: 'value',
+						max: 360,
+					},
+					series: chart.roses?.length ?chart.roses.map((o, index) => {
+						return {
+							type: 'bar',
+							data: o,
+							coordinateSystem: 'polar',
+							name: funText(index),
+							stack: 'a',
+							emphasis: {
+								focus: 'series'
+							}
+						}
+					}): []
+				})
+				chartData.value.push({
+					title: chart.wt,
+					xAxis: {
+						type: 'category',
+						boundaryGap: false,
+						data: ['N', 'N-E', 'E', 'S-E', 'S', 'W-S', 'W', 'N-W']
+					},
+					series: chart.count?.length?  chart.count.map((o,index) => {
+						return {
+							type: 'bar',
+							data: o,
+							coordinateSystem: 'polar',
+							name: funText(index),
+							stack: 'a',
+							emphasis: {
+								focus: 'series'
+							}
+						}
+					}): []
+				})
 			}
 		}
 	}
 }
-const funSubmit = async (params) => {
-	const res = await request.get('/power/prepare/data', { params: params })
-	if (res.code === 200) {
-		ElMessage.success(res.msg)
-
-	}
-}
 /**created */
 funGetTree()
-funWebSocket()
 /**activated */
 onActivated(() => {
 	funGetTree()
@@ -117,20 +182,21 @@ onActivated(() => {
 		<search-cop @submit="funSubmit"></search-cop>
 		<el-row :gutter="10">
 			<el-col :span="5">
-				<tree-cop :data="treeData" :height="treeHeight" @currentChange="funCurrentChange" @refresh="funGetTree">
+				<tree-cop :data="treeData" @checkChange="funTreeCheckChange" :show-checkbox="true" :height="treeHeight"
+					@currentChange="funCurrentChange" @refresh="funGetTree">
 				</tree-cop>
 			</el-col>
 			<el-col :span="3">
-				<excel-cop :data="excelList" :height="excelHeight" @excelChange="funExcelChange"></excel-cop>
+				<excel-cop :checkIds="excelCheckIds" :showCheckbox="true" :data="excelList" :height="excelHeight"
+					@excelChange="funExcelChange" @checkChange="funExcelCheckChange"></excel-cop>
 			</el-col>
 			<el-col :span="16">
-				<div>
-					<table-cop :data="tableData" :column="tableColumn" :loading="tableLoading" :height="tableHeight"
-						:tableId="tableShowId" :tableName="tableName" @export="funExport"></table-cop>
+				<div :style="{ height: tableHeight }" class="flex flex-wrap justify-center overflow-y-auto">
+					<chart-cop height="500px" width="500px" v-for="item in chartData" :xAxis="item.xAxis" :title="item.title"
+						:series="item.series">
+					</chart-cop>
 				</div>
 			</el-col>
 		</el-row>
-		<el-progress :percentage="progress" class="!absolute top-0 right-0 left-0" :indeterminate="false" color="rgb(19,206,102)"
-			:stroke-width="4" :show-text="false" />
 	</div>
 </template>