能耗分析部分页面

package.json

@@ -20,7 +20,7 @@
     "clipboard": "^2.0.11",
     "countup.js": "^2.1.0",
     "cropperjs": "^1.5.12",
-    "echarts": "^5.3.0",
+    "echarts": "^5.3.3",
     "echarts-gl": "^2.0.9",
     "echarts-wordcloud": "^2.0.0",
     "element-plus": "^2.2.13",
@@ -32,6 +32,7 @@
     "screenfull": "^6.0.1",
     "sortablejs": "^1.14.0",
     "splitpanes": "^3.1.1",
+    "uuid": "^9.0.0",
     "vue": "^3.2.37",
     "vue-baidu-map-3x": "^1.0.18",
     "vue-clipboard3": "^1.0.1",

src/components/chartDom/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div :id="id" class="echart-box" :style="'height: ' + height + 'px;background: #fff;'" />
+</template>
+<script type="text/javascript">
+import * as echarts from 'echarts'
+import { v4 as uuid } from 'uuid'
+export default {
+  props: {
+    option: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    height: {
+      type: Number,
+      default: 350
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      id: ''
+    }
+  },
+  watch: {
+    option: {
+      handler(val) {
+        if (val) {
+          this.initChart()
+        }
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.id = uuid()
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+
+    window.addEventListener('resize', this.handleResize)
+
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    initChart() {
+      const chartDom = document.getElementById(this.id)
+      this.chart = echarts.init(chartDom)
+      this.chart.clear()
+      this.chart.setOption(this.option)
+    },
+    handleResize() {
+      this.chart && this.chart.resize()
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+</style>

src/views/energyAnalysis/analysisReport/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="page-container">
+    <el-card shadow="hover">
+			<el-checkbox-group v-model="checkList">
+				<el-checkbox label="一网供水温度" />
+				<el-checkbox label="一网回水温度" />
+				<el-checkbox label="一网供水压力" />
+				<el-checkbox label="一网回水压力" />
+				<el-checkbox label="二网供水温度" />
+				<el-checkbox label="二网回水温度" />
+				<el-checkbox label="二网供水压力" />
+				<el-checkbox label="二网回水压力" />
+			</el-checkbox-group>
+
+			<div style="height: 400px" ref="lineChartRef"></div>
+			<!-- <ChartDom :height="400" :option="lineChartOptions"/> -->
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, watch, nextTick, onMounted } from 'vue';
+import * as echarts from 'echarts';
+import { useStore } from '/@/store/index';
+import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
+import api from '/@/api/heatingDistrict';
+
+let global: any = {
+	lineChart: null,
+	dispose: [null, '', undefined],
+};
+
+const store = useStore();
+const state = reactive({
+	myCharts: [],
+	charts: {
+		theme: '',
+		bgColor: '',
+		color: '#303133',
+	},
+})
+const lineChartRef = ref()
+const checkList = ref([])
+
+// 初始化图标
+const initLineChart = () => {
+	if (!global.dispose.some((b: any) => b === global.lineChart)) global.lineChart.dispose();
+	global.lineChart = <any>echarts.init(lineChartRef.value, state.charts.theme);
+	const option = {
+		backgroundColor: state.charts.bgColor,
+		grid: { top: 70, right: 20, bottom: 30, left: 30 },
+		tooltip: { trigger: 'axis' },
+		legend: { data: ['一网回水压力', '一网供水压力'] },
+		xAxis: {
+			data: ['环路1', '环路2', '环路3', '环路4', '环路5'],
+		},
+		yAxis: [
+			{
+				type: 'value',
+				name: '条数',
+				splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
+			},
+		],
+		series: [
+			{
+				name: '一网回水压力',
+				type: 'line',
+				symbolSize: 6,
+				symbol: 'circle',
+				smooth: true,
+				data: [41.1, 30.4, 65.1, 53.3, 53.3],
+				lineStyle: { color: '#fe9a8b' },
+				itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' }
+			},
+			{
+				name: '一网供水压力',
+				type: 'line',
+				symbolSize: 6,
+				symbol: 'circle',
+				smooth: true,
+				data: [24.1, 7.2, 15.5, 42.4, 42.4],
+				lineStyle: { color: '#9E87FF' },
+				itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' }
+			}
+		]
+	};
+	(<any>global.lineChart).setOption(option);
+	(<any>state.myCharts).push(global.lineChart);
+}
+
+// 批量设置 echarts resize
+const initEchartsResizeFun = () => {
+	nextTick(() => {
+		for (let i = 0; i < state.myCharts.length; i++) {
+			setTimeout(() => {
+				(<any>state.myCharts[i]).resize();
+			}, i * 1000);
+		}
+	});
+};
+// 批量设置 echarts resize
+const initEchartsResize = () => {
+	window.addEventListener('resize', initEchartsResizeFun);
+};
+// 页面加载时
+onMounted(() => {
+	initEchartsResize();
+});
+
+// 监听 vuex 中是否开启深色主题
+watch(
+	() => store.state.themeConfig.themeConfig.isIsDark,
+	(isIsDark) => {
+		nextTick(() => {
+			state.charts.theme = isIsDark ? 'dark' : '';
+			state.charts.bgColor = isIsDark ? 'transparent' : '';
+			state.charts.color = isIsDark ? '#dadada' : '#303133';
+			setTimeout(() => {
+				initLineChart();
+			}, 500);
+		});
+	},
+	{
+		deep: true,
+		immediate: true,
+	}
+);
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/energyAnalysis/energyWarning/index.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="system-dic-container">
+    <el-card shadow="hover">
+      <div class="system-user-search mb15">
+        <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="90px">
+					<el-form-item label="所属换热站" prop="heatStaId">
+						<el-tree-select
+							v-model="tableData.param.heatStaId"
+							:data="heatList"
+							:props="{
+								label: 'name',
+								children: 'children'
+							}"
+							node-key="id"
+							:clearable="true"
+							check-strictly
+							size="default"
+							style="width: 100%;"
+							placeholder="请选择"
+							:render-after-expand="true"
+						/>
+					</el-form-item>
+          <el-form-item label="负责人" prop="plotId">
+            <el-select v-model="tableData.param.plotId" placeholder="选择负责人" filterable clearable size="default">
+							<el-option
+								v-for="item in []"
+								:key="item.id"
+								:label="item.name"
+								:value="item.id">
+							</el-option>
+						</el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button size="default" type="primary" class="ml10" @click="queryList">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              查询
+            </el-button>
+            <el-button size="default" @click="resetQuery(queryRef)">
+              <el-icon>
+                <ele-Refresh />
+              </el-icon>
+              重置
+            </el-button>
+            <el-button size="default" type="success" class="ml10" @click="onOpenDialog()">
+              <el-icon>
+                <ele-FolderAdd />
+              </el-icon>
+              导入
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-table :data="tableData.data" style="width: 100%" >
+        <el-table-column label="ID" align="center" prop="id" width="60" />
+	    	<el-table-column label="环路名称" prop="name" />
+	    	<el-table-column label="环路编号" prop="number" />
+	    	<el-table-column label="负责人" prop="number" />
+	    	<el-table-column label="温度" prop="number" />
+	    	<el-table-column label="压力" prop="number" />
+      </el-table>
+      <pagination
+				v-show="tableData.total>0"
+				:total="tableData.total"
+				v-model:page="tableData.param.pageNum"
+				v-model:limit="tableData.param.pageSize"
+				@pagination="queryList"
+			/>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
+import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
+import api from '/@/api/heatingDistrict';
+import heatApi from '/@/api/heatStation';
+
+export default defineComponent({
+	name: 'loop',
+	setup() {
+		const queryRef = ref();
+		const state = reactive({
+			ids: [],
+			tableData: {
+				data: [],
+				total: 0,
+				loading: false,
+				param: {
+					pageNum: 1,
+					pageSize: 10,
+					name: '',
+					heatStaId: '',
+					status: -1
+				},
+			},
+			heatList: []
+		});
+		
+		const queryTree = () => {
+			heatApi.heatStation.getList({
+					name: '',
+					code: '',
+					status: -1
+				})
+				.then((res: any) => {
+					state.heatList = res || [];
+				});
+		};
+		// 页面加载时
+		onMounted(() => {
+			queryTree()
+		});
+		/** 重置按钮操作 */
+		const resetQuery = (formEl: FormInstance | undefined) => {
+			if (!formEl) return;
+			formEl.resetFields();
+			// queryList();
+		};
+
+		return {
+			queryRef,
+			resetQuery,
+			...toRefs(state),
+		};
+	},
+});
+</script>

src/views/heatingDistrict/floorManage/component/edit.vue

@@ -17,9 +17,9 @@
 						:render-after-expand="true"
 					/>
 				</el-form-item>
-				<el-form-item label="所属换热站" prop="heatId">
+				<el-form-item label="所属换热站" prop="heatStaId">
 					<el-tree-select
-						v-model="ruleForm.heatId"
+						v-model="ruleForm.heatStaId"
 						:data="heatList"
 						:props="{
 							label: 'name',
@@ -88,7 +88,7 @@ export default defineComponent({
 				name: '',
         organizationId: '',
         plotId: '',
-        heatId: '',
+        heatStaId: '',
         number: '',
         remark: '',
 				status: 1
@@ -97,7 +97,7 @@ export default defineComponent({
 				name: [{ required: true, message: '楼宇名称不能为空', trigger: ['blur', 'change'] }],
 				organizationId: [{ required: true, message: '所属组织不能为空', trigger: ['blur', 'change'] }],
 				plotId: [{ required: true, message: '小区名称不能为空', trigger: ['blur', 'change'] }],
-				heatId: [{ required: true, message: '所属换热站不能为空', trigger: ['blur', 'change'] }],
+				heatStaId: [{ required: true, message: '所属换热站不能为空', trigger: ['blur', 'change'] }],
 				number: [{ required: true, message: '楼号不能为空', trigger: ['blur', 'change'] }],
 			},
 			orgList: [],
@@ -120,7 +120,7 @@ export default defineComponent({
 				name: '',
         organizationId: '',
         plotId: '',
-        heatId: '',
+        heatStaId: '',
         number: '',
         remark: '',
 				status: 1

src/views/heatingDistrict/regionalManage/component/edit.vue

@@ -17,6 +17,22 @@
 						:render-after-expand="true"
 					/>
 				</el-form-item>
+				<!-- heatStaId -->
+				<el-form-item label="所属换热站" prop="heatStaId">
+					<el-tree-select
+						v-model="ruleForm.heatStaId"
+						:data="heatList"
+						:props="{
+							label: 'name',
+							children: 'children'
+						}"
+						node-key="id"
+						:clearable="true"
+						check-strictly
+						style="width: 100%;"
+						:render-after-expand="true"
+					/>
+				</el-form-item>
 				<el-form-item label="小区名称" prop="name">
 					<el-input v-model="ruleForm.name" placeholder="请输入小区名称" />
 				</el-form-item>
@@ -38,6 +54,7 @@
 <script lang="ts">
 import { reactive, toRefs, defineComponent, ref, unref, nextTick } from 'vue';
 import api from '/@/api/heatingDistrict';
+import heatApi from '/@/api/heatStation';
 import { ElMessage } from 'element-plus';
 interface RuleFormState {
 	id?: number;
@@ -61,11 +78,13 @@ export default defineComponent({
 				name: [{ required: true, message: '小区名称不能为空', trigger: ['blur', 'change'] }],
 				organizationId: [{ required: true, message: '所属组织不能为空', trigger: ['blur', 'change'] }]
 			},
-			orgList: []
+			orgList: [],
+			heatList: []
 		})
 		// 打开弹窗
 		const openDialog = (row: RuleFormState | null) => {
 			resetForm()
+			queryTree()
 			if (row) {
 				(state.ruleForm as any).id = row.id
 				getDetail()
@@ -89,6 +108,16 @@ export default defineComponent({
 		const onCancel = () => {
 			closeDialog()
 		}
+		const queryTree = () => {
+			heatApi.heatStation.getList({
+					name: '',
+					code: '',
+					status: -1
+				})
+				.then((res: any) => {
+					state.heatList = res || [];
+				});
+		};
 		const getDetail = () => {
 			api.regionalManage.detail(state.ruleForm.id)
 				.then((res: any) => {

src/views/heatingDistrict/residentManage/component/edit.vue

@@ -19,7 +19,7 @@
 				</el-form-item>
 				<el-form-item label="所属换热站" prop="">
 					<el-tree-select
-						v-model="ruleForm.heatId"
+						v-model="ruleForm.heatStaId"
 						:data="heatList"
 						:props="{
 							label: 'name',
@@ -118,7 +118,7 @@ export default defineComponent({
 			ruleForm: {
 				id: 0,
 				organizationId: '',
-				heatId: '',
+				heatStaId: '',
 				plotId: '',
 				floorId: '',
 				unitId: '',
@@ -137,7 +137,7 @@ export default defineComponent({
 				plotId: [{ required: true, message: '小区名称不能为空', trigger: ['blur', 'change'] }],
 				floorId: [{ required: true, message: '楼宇名称不能为空', trigger: ['blur', 'change'] }],
 				unitId: [{ required: true, message: '单元名称不能为空', trigger: ['blur', 'change'] }],
-				heatId: [{ required: true, message: '所属换热站不能为空', trigger: ['blur', 'change'] }],
+				heatStaId: [{ required: true, message: '所属换热站不能为空', trigger: ['blur', 'change'] }],
 				floorLevel: [{ required: true, message: '楼层不能为空', trigger: ['blur', 'change'] }],
 				roomNumber: [{ required: true, message: '房间号不能为空', trigger: ['blur', 'change'] }],
 				phone: [{ required: true, message: '手机号码不能为空', trigger: ['blur', 'change'] }],
@@ -164,7 +164,7 @@ export default defineComponent({
 			state.ruleForm = {
 				id: 0,
 				organizationId: '',
-				heatId: '',
+				heatStaId: '',
 				plotId: '',
 				floorId: '',
 				unitId: '',

src/views/heatingDistrict/unitManage/component/edit.vue

@@ -17,10 +17,10 @@
 						:render-after-expand="true"
 					/>
 				</el-form-item>
-				<!-- heatId -->
+				<!-- heatStaId -->
 				<el-form-item label="所属换热站" prop="">
 					<el-tree-select
-						v-model="ruleForm.heatId"
+						v-model="ruleForm.heatStaId"
 						:data="heatList"
 						:props="{
 							label: 'name',
@@ -95,7 +95,7 @@ export default defineComponent({
         organizationId: '',
         plotId: '',
         floorId: '',
-        heatId: '',
+        heatStaId: '',
         number: '',
         remark: '',
 				status: 1
@@ -105,7 +105,7 @@ export default defineComponent({
 				organizationId: [{ required: true, message: '所属组织不能为空', trigger: ['blur', 'change'] }],
 				plotId: [{ required: true, message: '小区名称不能为空', trigger: ['blur', 'change'] }],
 				floorId: [{ required: true, message: '楼宇名称不能为空', trigger: ['blur', 'change'] }],
-				heatId: [{ required: true, message: '所属换热站不能为空', trigger: ['blur', 'change'] }],
+				heatStaId: [{ required: true, message: '所属换热站不能为空', trigger: ['blur', 'change'] }],
 				number: [{ required: true, message: '楼号不能为空', trigger: ['blur', 'change'] }],
 			},
 			orgList: [],
@@ -132,7 +132,7 @@ export default defineComponent({
         organizationId: '',
         plotId: '',
         floorId: '',
-        heatId: '',
+        heatStaId: '',
         number: '',
         remark: '',
 				status: 1