2022-12-06 update

1. lineAnalysis 新增时间占比 barChart.vue
2. rateAnalysis  lineAnalysis 调整dialog-body css样式
3. 其余为调整chartTheme.json的引用

src/pages/dataAnalysis/combine/components/current-scatter-chart.vue

@@ -6,7 +6,7 @@
 import util from "@tools/util";
 import partten from "@tools/partten";
 import * as echarts from "echarts";
-import chartTheme from './../../chartTheme.json'
+import chartTheme from './current-scatter-chart.json'
 
 export default {
   name: 'currentScatterChart',

src/pages/dataAnalysis/lineAnalysis/components/chartTheme.json

@@ -14,7 +14,7 @@
 	"textStyle": {},
 	"title": {
 			"textStyle": {
-					"color": "#333333"
+					"color": "#B3B3B3B3B3B3"
 			},
 			"subtextStyle": {
 					"color": "#aaaaaa"
@@ -46,7 +46,8 @@
 			"itemStyle": {
 					"barBorderWidth": 0,
 					"barBorderColor": "#ccc"
-			}
+			},
+			"barMaxWidth": 50
 	},
 	"pie": {
 			"itemStyle": {
@@ -169,18 +170,18 @@
 			"axisLine": {
 					"show": true,
 					"lineStyle": {
-							"color": "#333"
+							"color": "#B3B3B3"
 					}
 			},
 			"axisTick": {
 					"show": true,
 					"lineStyle": {
-							"color": "#333"
+							"color": "#B3B3B3"
 					}
 			},
 			"axisLabel": {
 					"show": true,
-					"color": "#333"
+					"color": "#B3B3B3"
 			},
 			"splitLine": {
 					"show": false,
@@ -204,18 +205,18 @@
 			"axisLine": {
 					"show": true,
 					"lineStyle": {
-							"color": "#333"
+							"color": "#B3B3B3"
 					}
 			},
 			"axisTick": {
 					"show": true,
 					"lineStyle": {
-							"color": "#333"
+							"color": "#B3B3B3"
 					}
 			},
 			"axisLabel": {
 					"show": true,
-					"color": "#333"
+					"color": "#B3B3B3"
 			},
 			"splitLine": {
 					"show": true,
@@ -239,18 +240,18 @@
 			"axisLine": {
 					"show": true,
 					"lineStyle": {
-							"color": "#333"
+							"color": "#B3B3B3"
 					}
 			},
 			"axisTick": {
 					"show": true,
 					"lineStyle": {
-							"color": "#333"
+							"color": "#B3B3B3"
 					}
 			},
 			"axisLabel": {
 					"show": true,
-					"color": "#333"
+					"color": "#B3B3B3"
 			},
 			"splitLine": {
 					"show": true,
@@ -274,18 +275,18 @@
 			"axisLine": {
 					"show": true,
 					"lineStyle": {
-							"color": "#333"
+							"color": "#B3B3B3"
 					}
 			},
 			"axisTick": {
 					"show": true,
 					"lineStyle": {
-							"color": "#333"
+							"color": "#B3B3B3"
 					}
 			},
 			"axisLabel": {
 					"show": true,
-					"color": "#333"
+					"color": "#B3B3B3"
 			},
 			"splitLine": {
 					"show": true,
@@ -317,7 +318,7 @@
 	},
 	"legend": {
 			"textStyle": {
-					"color": "#333333"
+					"color": "#B3B3B3B3B3B3"
 			}
 	},
 	"tooltip": {
@@ -380,7 +381,7 @@
 			"handleColor": "#a7b7cc",
 			"handleSize": "100%",
 			"textStyle": {
-					"color": "#333333"
+					"color": "#B3B3B3B3B3B3"
 			}
 	},
 	"markPoint": {

src/pages/dataAnalysis/lineAnalysis/components/barChart.vue

@@ -0,0 +1,177 @@
+<script setup>
+import util from "@tools/util";
+import chartTheme from './barChart.json'
+import { ref, toRaw, computed, onMounted, watch, nextTick } from 'vue';
+import * as echarts from 'echarts'
+const chartId = 'chart-' + util.newGUID(); //chartId
+const chartIns = ref(null)  //chart 实例
+const emits = defineEmits(['getSelected'])
+const props = defineProps({
+	xAxis: {
+		type: Object,
+		required: true,
+		default: () => ({})
+	},
+	yAxis: {
+		type: Array,
+		required: false
+	},
+	series: {
+		type: Array,
+		required: true
+	},
+	dataset: {
+		type: Array,
+		required: false,
+		default: () => ([])
+	},
+	height: {
+		type: String,
+		required: false,
+		default: '500px'
+	},
+	width: {
+		type: String,
+		required: false,
+		default: '500px'
+	},
+	title: {
+		type: String,
+		required: false
+	},
+	subtext: {
+		type: String,
+		required: false
+	},
+	brush: {
+		type: Boolean,
+		required: false,
+		default: false
+	}
+})
+
+/**定义option */
+const option = computed({
+	get() {
+		return {
+			color:[
+				"#FF8700",
+				"#0098d980",
+				"#626c91",
+				"#a0a7e6",
+				"#c4ebad",
+				"#96dee8"
+			],
+			title: {
+				text: props.title || '',
+				subtext: props.subtext || '',
+				top: 6,
+				left: '5%',
+			},
+			xAxis: props.xAxis || {},
+			yAxis: props.yAxis || {},
+			brush: {
+          seriesIndex: [1],
+          yAxisIndex: 0,
+          transformable: true,
+          throttleType: "debounce",
+          throttleDelay: 1000,
+          removeOnClick: true,
+          brushType: props.brush? "polygon" : false,
+          brushMode: "multiple",
+          brushStyle: {
+            borderWidth: 1,
+            borderColor: "#ff2424",
+          },
+        },
+			toolbox:{
+				show: props.brush,
+			},
+			tooltip: {
+				confine: true,
+				trigger: "axis",
+			},
+			dataset: props.dataset || [],
+			series: props.series || [],
+			legend: {
+				right: "120",
+				top: "5",
+				itemWidth: 6,
+			},
+			grid: {
+				top: 80,
+				left: 40,
+				right: 40,
+				bottom: 40,
+			},
+			dataZoom: [
+          {
+            type: "inside", //图表下方的伸缩条
+            show: false, //是否显示
+            realtime: true, //拖动时，是否实时更新系列的视图
+            start: 0, //伸缩条开始位置（1-100），可以随时更改
+            end: 100, //伸缩条结束位置（1-100），可以随时更改
+          },
+          {
+            type: "slider", //图表下方的伸缩条
+            show: false, //是否显示
+            realtime: true, //拖动时，是否实时更新系列的视图
+            start: 0, //伸缩条开始位置（1-100），可以随时更改
+            end: 100, //伸缩条结束位置（1-100），可以随时更改
+          },
+        ],
+		}
+	},
+	set(val) { }
+})
+watch(() => option, (newVal, oldVal) => {
+	if (chartIns.value) {
+		const echartIns = toRaw(chartIns.value)
+		echartIns.setOption(toRaw(newVal.value))
+	}
+}, { deep: true })
+const funBrushChange = (flag) => {
+	const echartIns = toRaw(chartIns.value)
+	echartIns.dispatchAction({
+			type: "takeGlobalCursor",
+			// 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
+			key: "brush",
+			brushOption: {
+				seriesIndex: [1],
+				yAxisIndex: 0,
+				transformable: true,
+				throttleType: "debounce",
+				throttleDelay: 1000,
+				removeOnClick: true,
+				brushType: flag? "polygon" : false,
+				brushMode: "multiple",
+				brushStyle: {
+					borderWidth: 1,
+					color: "rgba(255,36,36,0.2)",
+					borderColor: "#ff2424",
+				},
+			},
+		});
+	echartIns.off("brushSelected");
+	echartIns.on("brushSelected", (params) => {
+		emits("getSelected", params.batch || []);
+	});
+}
+watch(() => props.brush, (newVal, oldVal) => funBrushChange(newVal))
+
+onMounted(() => {
+	nextTick(() => {
+		echarts.registerTheme('chartTheme', chartTheme)
+		const echartIns =	echarts.init(document.getElementById(chartId),'chartTheme') 
+		chartIns.value = echartIns
+		echartIns.setOption(option.value)
+		funBrushChange(props.brush)
+		window.addEventListener('resize', () => {
+			echartIns.resize()
+		})
+	})
+})
+</script>
+<template>
+	<div :id="chartId" :style="{ height: props.height, width: props.width }"></div>
+</template>

src/pages/dataAnalysis/combine/components/chartTheme.json

@@ -1,16 +1,15 @@
 
 {
 	"color": [
-			"#db60c8",
-			"#c12e34",
+			"#1C99FF",
+			"#FF8700",
 			"#e6b600d9",
 			"#0098d9",
-			"#465a83",
+			"#3D54BE",
 			"#005eaa",
 			"#cda819",
 			"#32a487"
 	],
-	"backgroundColor": "rgba(0,0,0,0)",
 	"textStyle": {},
 	"title": {
 			"textStyle": {
@@ -204,18 +203,18 @@
 			"axisLine": {
 					"show": true,
 					"lineStyle": {
-							"color": "#333"
+							"color": "#B3B3B3"
 					}
 			},
 			"axisTick": {
 					"show": true,
 					"lineStyle": {
-							"color": "#333"
+							"color": "#B3B3B3"
 					}
 			},
 			"axisLabel": {
 					"show": true,
-					"color": "#333"
+					"color": "#B3B3B3"
 			},
 			"splitLine": {
 					"show": true,
@@ -313,11 +312,14 @@
 					"iconStyle": {
 							"borderColor": "#4187c2"
 					}
+			},
+			"textStyle": {
+				"color": "#B3B3B3"
 			}
 	},
 	"legend": {
 			"textStyle": {
-					"color": "#333333"
+					"color": "#B3B3B3"
 			}
 	},
 	"tooltip": {

src/pages/dataAnalysis/lineAnalysis/components/current-scatter-chart.vue

@@ -6,7 +6,7 @@
 import util from "@tools/util";
 import partten from "@tools/partten";
 import * as echarts from "echarts";
-import chartTheme from './../../chartTheme.json'
+import chartTheme from './current-scatter-chart.json'
 
 export default {
   name: 'currentScatterChart',

src/pages/dataAnalysis/lineAnalysis/index.vue

@@ -1,6 +1,7 @@
 <script setup name="prepare">
 import excelCop from '@/components/excel.vue'
 import treeCop from '@/components/tree.vue'
+import barChartCop from './components/barChart.vue'
 import SubmitBtn from '@/components/SubmitBtn.vue'
 import { ref, nextTick, onActivated, onMounted, reactive } from 'vue'
 import request from '@/api/axios.js'
@@ -247,10 +248,100 @@ const funChartArea = () => {
 		}
 	}
 }
+const funTimeArea = async () => {
+	if(seriesData.value?.length){
+		//获取数据
+		const res = await request.get('/power/fitting/time',{params: {ids: excelCheckIds.value.join(',')}})
+		console.log(res)
+		if(res.code===200){
+			barxAxis.data = []
+			barSeries.value = [{
+				name: "3~5m功率",
+				type: "bar",
+				stack: 'a',
+				data: [],
+			},{
+				name: "5~10m功率",
+				type: "bar",
+				stack: 'a',
+				data: [],
+			},{
+				name: "10~12m功率",
+				type: "bar",
+				stack: 'a',
+				data: [],
+			},{
+				name: "12~25m全功率",
+				type: "bar",
+				stack: 'a',
+				data: [],
+			},{
+				name: "不运行",
+				type: "bar",
+				stack: 'a',
+				data: [],
+			}]
+			for(const wtObj of res.data){
+				barxAxis.data.push(wtObj.wtId)
+				for(const timeKey in wtObj.time){
+					barSeries.value[timeKey].data.push((wtObj.time[timeKey]/60).toFixed(0))
+				}
+			}
+			tmDialog.value = true
+		}
+	}
+}
 /**dialog 数据 */
 const wtDialog = ref(false)
 const wtData = ref([])
-const wtTab = ref('table')
+/**tmdialog 数据 */
+const tmDialog = ref(false)
+const barxAxis = reactive({
+	type: 'category',
+	data: [],
+	splitLine: {
+		show: false
+	},
+	axisTick: {
+		show: true
+	}
+})
+const baryAxis = ref({
+		type: 'value',
+		name: '小时',
+		splitLine: {
+		show: false
+	},
+	axisTick: {
+		show: true
+	}
+})
+const barSeries = ref([{
+	name: "3~5m功率",
+	type: "bar",
+	stack: 'a',
+	data: [],
+},{
+	name: "5~10m功率",
+	type: "bar",
+	stack: 'a',
+	data: [],
+},{
+	name: "10~12m功率",
+	type: "bar",
+	stack: 'a',
+	data: [],
+},{
+	name: "12~25m全功率",
+	type: "bar",
+	stack: 'a',
+	data: [],
+},{
+	name: "不运行",
+	type: "bar",
+	stack: 'a',
+	data: [],
+}])
 /**created */
 // funGetTree()
 // funGetProcessTree()
@@ -277,7 +368,10 @@ onActivated(() => {
 })
 </script>
 <template>
-  <div class="bg-white py-[10px] px-[10px]">
+  <div class="bg-white py-[10px] px-[10px] s-dialog-body">
+		<el-dialog draggable width="1000px" v-model="tmDialog" title="时间占比">
+			<bar-chart-cop height="700px" width="100%" :xAxis="barxAxis" :yAxis="baryAxis" :series="barSeries"></bar-chart-cop>
+		</el-dialog>
     <el-dialog draggable v-model="wtDialog" title="曲线偏差率">
 			<el-table :data="wtData" row-key="id" :max-height="550">
 				<el-table-column property="windturbine" align="center" label="风机" />
@@ -351,10 +445,15 @@ onActivated(() => {
         <el-col :span="16">
           <div class="px-[10px] shadow rounded-[6px] shadow-blue-500">
             <SubmitBtn
-              class="absolute right-[16px] top-[6px] z-10"
+              class="absolute right-[106px] top-[6px] z-10"
               desc="区域划分"
               @click="funChartArea"
             ></SubmitBtn>
+						<SubmitBtn
+              class="absolute right-[16px] top-[6px] z-10"
+              desc="时间占比"
+              @click="funTimeArea"
+            ></SubmitBtn>
             <div
               :style="{
                 height:
@@ -383,4 +482,9 @@ onActivated(() => {
       </el-row>
     </div>
   </div>
-</template>
+</template>
+<style scoped>
+.s-dialog-body /deep/ .el-dialog__body{
+	padding: 0px 20px;
+}
+</style>

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

@@ -1,6 +1,6 @@
 <script setup>
 import util from "@tools/util";
-import chartTheme from './../chartTheme.json'
+import chartTheme from './../rateAnalysis.json'
 import { ref, toRaw, computed, onMounted, watch, nextTick } from 'vue';
 import * as echarts from 'echarts'
 const chartId = 'chart-' + util.newGUID(); //chartId

src/pages/dataAnalysis/rateAnalysis/components/lineChart.vue

@@ -1,6 +1,6 @@
 <script setup>
 import util from "@tools/util";
-import chartTheme from './../chartTheme.json'
+import chartTheme from './../rateAnalysis.json'
 import { ref, toRaw, computed, onMounted, watch, nextTick } from 'vue';
 import * as echarts from 'echarts'
 const chartId = 'chart-' + util.newGUID(); //chartId

src/pages/dataAnalysis/rateAnalysis/components/scatterSingleChart.vue

@@ -1,6 +1,6 @@
 <script setup name="scatterSingleChart">
 import util from "@tools/util";
-import chartTheme from './../chartTheme.json'
+import chartTheme from './../rateAnalysis.json'
 import { ref, toRaw, computed, onMounted, watch, nextTick } from 'vue';
 import * as echarts from 'echarts'
 const chartId = 'chart-' + util.newGUID(); //chartId

src/pages/dataAnalysis/rateAnalysis/index.vue

@@ -655,7 +655,7 @@ onActivated(() => {
 })
 </script>
 <template>
-	<div class="bg-white py-[10px] px-[10px] relative s-rateAnalysis">
+	<div class="bg-white py-[10px] px-[10px] relative s-dialog-body">
 		<!-- <search-cop class="mb-[20px]  shadow rounded-[6px] shadow-blue-500" @submit="funSubmit">
 		</search-cop> -->
 		<el-dialog v-model="wtDialog" draggable title="风机功率点位">
@@ -747,7 +747,7 @@ onActivated(() => {
 	</div>
 </template>
 <style scoped>
-.s-rateAnalysis /deep/ .el-dialog__body{
+.s-dialog-body /deep/ .el-dialog__body{
 	padding: 0px 20px;
 }
 </style>