环路监测-详情页面、历史页面对接

.env

@@ -8,11 +8,14 @@ VITE_OPEN = true
 VITE_PUBLIC_PATH = /
 
 # 基础服务路径
-VITE_SERVER_URL = '/base-api'
+# VITE_SERVER_URL = '/base-api'
+VITE_SERVER_URL = '/'
 # 基础接口路径
-VITE_API_URL = '/base-api/api/v1'
+# VITE_API_URL = '/base-api/api/v1'
+VITE_API_URL = '/api/v1'
 # 指数管理页面用到的
-VITE_ASSESS_URL = '/base-api/assess/v1'
+# VITE_ASSESS_URL = '/base-api/assess/v1'
+VITE_ASSESS_URL = '/assess/v1'
 # 大屏前端
 VITE_SCREEN_URL = '/plugin/screen/'
 # 组态图前端

.env.development

@@ -1,7 +1,7 @@
-VITE_SERVER_PROTOCOL = 'https:'
-VITE_SERVER_HOSTNAME = 'zhgy.sagoo.cn'
+# VITE_SERVER_PROTOCOL = 'https:'
+# VITE_SERVER_HOSTNAME = 'zhgy.sagoo.cn'
 
-# VITE_SERVER_PROTOCOL = 'http:'
-# VITE_SERVER_HOSTNAME = 'sgadserver.wdeveloperw.xyz'
+VITE_SERVER_PROTOCOL = 'http:'
+VITE_SERVER_HOSTNAME = 'sgadserver.wdeveloperw.xyz'
 # VITE_SERVER_URL = ''
 # VITE_API_URL = '/api/v1'

src/views/heating/monitor/loopSupervision/heatStationDetail.vue

@@ -1,32 +1,6 @@
 <template>
-	<div class="system-dic-container">
-		<el-card shadow="hover">
-			<div class="system-user-search">
-				<el-form :model="searchParams" ref="queryRef" :inline="true" label-width="100px">
-					<el-form-item label="换热站名称" prop="name">
-						<el-input v-model="searchParams.name" placeholder="换热站名称" clearable size="default"></el-input>
-					</el-form-item>
-					<el-form-item label="换热站编号" prop="name">
-						<el-input v-model="searchParams.name" placeholder="换热站编号" clearable size="default"></el-input>
-					</el-form-item>
-					<el-form-item>
-						<el-button size="default" type="primary" class="ml10">
-							<el-icon>
-								<ele-Search />
-							</el-icon>
-							查询
-						</el-button>
-						<el-button size="default" @click="resetQuery(queryRef)">
-							<el-icon>
-								<ele-Refresh />
-							</el-icon>
-							重置
-						</el-button>
-					</el-form-item>
-				</el-form>
-			</div>
-		</el-card>
-		<el-row :gutter="15" class="home-card-one mt15">
+	<div class="system-dic-container data-overview">
+		<el-row :gutter="15" class="home-card-one">
 			<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(v, k) in dataOne" :key="k" :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }">
 				<div class="home-card-item">
 					<div class="item-header">
@@ -70,7 +44,7 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, onMounted, ref, defineComponent, nextTick } from 'vue';
+import { toRefs, reactive, onMounted, ref, defineComponent, nextTick, watch } from 'vue';
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
 import * as echarts from 'echarts';
 import api from '/@/api/loopSupervision';
@@ -84,6 +58,7 @@ import map1 from '/@/assets/img/map1.svg';
 import water from '/@/assets/img/water.svg';
 import water1 from '/@/assets/img/water1.svg';
 import { useRoute, useRouter } from 'vue-router';
+import { useStore } from '/@/store/index';
 
 let global: any = {
 	homeCharThree: null,
@@ -99,6 +74,7 @@ export default defineComponent({
 		const homeLineRef = ref();
 		const router = useRouter()
 		const route = useRoute()
+		const store = useStore()
 		const state = reactive({
 			dataOne: [
 				{
@@ -106,10 +82,10 @@ export default defineComponent({
 					iconDark: map1,
 					title: '供热面积',
 					contentTitle1: '供热面积',
-					val1: '2112.12',
+					val1: '0',
 					unit1: '㎡',
 					contentTitle2: '总面积',
-					val2: '2312.12',
+					val2: '0',
 					unit2: '㎡',
 				},
 				{
@@ -117,10 +93,10 @@ export default defineComponent({
 					iconDark: fire1,
 					title: '热量',
 					contentTitle1: '总耗热',
-					val1: '4500',
+					val1: '0',
 					unit1: 'GJ',
 					contentTitle2: '总单耗',
-					val2: '0.34',
+					val2: '0',
 					unit2: 'GJ/㎡',
 				},
 				{
@@ -128,10 +104,10 @@ export default defineComponent({
 					iconDark: ele1,
 					title: '电量',
 					contentTitle1: '总耗电',
-					val1: '5200',
+					val1: '0',
 					unit1: 'KW.h',
 					contentTitle2: '总单耗',
-					val2: '0.22',
+					val2: '0',
 					unit2: 'KW.h/㎡',
 				},
 				{
@@ -139,12 +115,11 @@ export default defineComponent({
 					iconDark: water1,
 					title: '水量',
 					contentTitle1: '总耗水',
-					val1: '4500',
+					val1: '0',
 					unit1: 'T',
 					contentTitle2: '总单耗',
-					val2: '0.23',
+					val2: '0',
 					unit2: 'T/㎡',
-
 				},
 			],
 			lineName: '换热站监测',
@@ -156,15 +131,54 @@ export default defineComponent({
 			},
 			searchParams: {
 				name: ''
-			}
+			},
+			xAxisData: [],
+			inTemperatureEchart: [], // 供水温度
+			outTemperatureEchart: [], // 回水温度
+			isIsDark: false
 		});
 
-		const getData = () => {
-			api.getAllHeatStation({})
+		const getNumDetail = () => {
+			api.getLoopRegulationDetail({
+				QueryType: 'num',
+				types: 'station',
+				code: route.query.code
+			}).then((res: any) => {
+				let data = res
+				state.dataOne[0].val1 = data.heatingArea //供暖面积
+				state.dataOne[0].val2 = data.forRealArea //实供面积
+				state.dataOne[1].val1 = data.unitConsumption //总热耗
+				state.dataOne[1].val2 = data.unitConsumptionSingle //热单耗
+				state.dataOne[2].val1 = data.elctricConsumption //总电量
+				state.dataOne[2].val2 = data.elctricConsumptionSingle //电单耗
+				state.dataOne[3].val1 = data.flowLoss //总水量
+				state.dataOne[3].val2 = data.flowLossSingle //水量单耗
+			})
+		}
+
+		const getChartDetail = () => {
+			api.getLoopRegulationDetail({
+				QueryType: 'echart',
+				types: 'station',
+				code: route.query.code
+			}).then((res: any) => {
+				state.inTemperatureEchart = res.inTemperatureEchart.map((item: any) => item.value)
+				state.outTemperatureEchart = res.outTemperatureEchart.map((item: any) => item.value)
+				state.xAxisData = res.inTemperatureEchart.map((item: any) => item.time)
+				
+				nextTick(() => {
+					initLineChart();
+				});
+			})
 		}
 
 		const goDetail = () => {
-			router.push('/heating/monitor/loopSupervision/list/heatStationHistory')
+			router.push({
+				path: '/heating/monitor/loopSupervision/list/heatStationHistory',
+				query: {
+					code: route.query.code
+				}
+			})
 		}
 
 		// 折线图
@@ -179,7 +193,7 @@ export default defineComponent({
 				xAxis: [
 					{
 						type: 'category',
-						data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
+						data: state.xAxisData,
 						boundaryGap: true,
 						axisTick: { show: false },
 					},
@@ -196,18 +210,18 @@ export default defineComponent({
 					{
 						name: '供水温度',
 						type: 'line',
-						data: [10, 11, 13, 11, 12, 12, 9]
+						data: state.inTemperatureEchart
 					},
 					{
 						name: '回水温度',
 						type: 'line',
-						data: [1, -2, 2, 5, 3, 2, 0]
+						data: state.outTemperatureEchart
 					},
-					{
-						name: '室外温度',
-						type: 'line',
-						data: [3, 0, 4, 7, 5, 7, 5]
-					}
+					// {
+					// 	name: '室外温度',
+					// 	type: 'line',
+					// 	data: [3, 0, 4, 7, 5, 7, 5]
+					// }
 				]
 			};
 			(<any>global.homeCharThree).setOption(option);
@@ -228,12 +242,35 @@ export default defineComponent({
 		const initEchartsResize = () => {
 			window.addEventListener('resize', initEchartsResizeFun);
 		};
+		
+		// 监听 vuex 中是否开启深色主题
+		watch(
+			() => store.state.themeConfig.themeConfig.isIsDark,
+			(isIsDark) => {
+				nextTick(() => {
+					state.isIsDark = store.state.themeConfig.themeConfig.isIsDark
+					state.charts.theme = isIsDark ? 'transparent' : '';
+					state.charts.bgColor = isIsDark ? 'transparent' : '';
+					state.charts.color = isIsDark ? '#dadada' : '#303133';
+					setTimeout(() => {
+						initLineChart();
+					}, 1000);
+				});
+			},
+			{
+				deep: true,
+				immediate: true,
+			}
+		);
 
 		// 页面加载时
 		onMounted(() => {
-			getData()
-			initLineChart();
+			getNumDetail()
+			getChartDetail()
+
 			initEchartsResize();
+			// 获取布局配置信息
+			state.isIsDark = store.state.themeConfig.themeConfig.isIsDark;
 		});
 
 

src/views/heating/monitor/loopSupervision/heatStationHistory.vue

@@ -24,24 +24,19 @@
       </div>
       <el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading">
         <el-table-column type="index" label="序号" width="55" align="center" />
-        <el-table-column label="日期" prop="key" min-width="120" :show-overflow-tooltip="true" />
         <el-table-column label="换热站" prop="name" :show-overflow-tooltip="true" />
-        <el-table-column label="换热站编号" prop="name" min-width="120" :show-overflow-tooltip="true" />
-        <el-table-column label="一网供水流量" prop="value" min-width="120" :show-overflow-tooltip="true" />
-        <el-table-column label="一网供水压力" prop="value" min-width="120" :show-overflow-tooltip="true" />
-        <el-table-column label="一网供水温度" prop="value" min-width="120" :show-overflow-tooltip="true" />
-        <el-table-column label="一网回水流量" prop="value" min-width="120" :show-overflow-tooltip="true" />
-        <el-table-column label="一网回水压力" prop="value" min-width="120" :show-overflow-tooltip="true" />
-        <el-table-column label="一网回水温度" prop="value" min-width="120" :show-overflow-tooltip="true" />
-        <el-table-column label="二网供水流量" prop="value" min-width="120" :show-overflow-tooltip="true" />
-        <el-table-column label="二网供水压力" prop="value" min-width="120" :show-overflow-tooltip="true" />
-
-        <!-- <el-table-column prop="status" label="状态" width="100" align="center">
-          <template #default="scope">
-            <el-tag type="success" size="small" v-if="scope.row.status">已发布</el-tag>
-            <el-tag type="info" size="small" v-else>未发布</el-tag>
-          </template>
-        </el-table-column> -->
+        <el-table-column label="换热站编号" prop="code" min-width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="一网供水压力" prop="1nPressure1" min-width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="二网供水压力" prop="inPressure2" min-width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="一网供水温度" prop="inTemperature1" min-width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="二网供水温度" prop="inTemperature2" min-width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="一网回水压力" prop="outPressure1" min-width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="二网回水压力" prop="outPressure2" min-width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="一网回水温度" prop="outTemperature1" min-width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="二网回水温度" prop="outTemperature2" min-width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="供水流量" prop="supplyWaterFlow" min-width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="回水流量" prop="returnWaterFlow" min-width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="二网回水流量" prop="secondWaterSupply" min-width="120" :show-overflow-tooltip="true" />
       </el-table>
       <pagination v-show="tableData.total>0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="typeList" />
     </el-card>
@@ -51,76 +46,54 @@
 <script lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
-// import EditDic from './component/editPro.vue';
-import api from '/@/api/device';
-
-// 定义接口来定义对象的类型
-interface TableDataRow {
-	id: number;
-	name: string;
-	deviceType: string;
-	status: number;
-	desc: string;
-	createBy: string;
-}
-interface TableDataState {
-	ids: number[];
-	tableData: {
-		data: Array<TableDataRow>;
-		total: number;
-		loading: boolean;
-		param: {
-			pageNum: number;
-			pageSize: number;
-			name: string;
-			deviceType: string;
-			status: string;
-			dateRange: string[];
-		};
-	};
-}
+import api from '/@/api/loopSupervision';
+import { useRoute } from 'vue-router';
 
 export default defineComponent({
 	name: 'deviceproduct',
 	setup() {
-		const addDicRef = ref();
-		const editDicRef = ref();
 		const queryRef = ref();
+		const route = useRoute()
 		const state = reactive({
       radioValue: '换热站',
 			ids: [],
 			tableData: {
-				data: [{ name: '换热站', key: '2022-10-25', value: 1 }],
+				data: [],
 				total: 0,
 				loading: false,
 				param: {
 					pageNum: 1,
 					pageSize: 10,
-					status: '',
+					types: 'station',
+					code: '',
 					dateRange: [],
 				},
 			},
 		});
+    // 初始化表格数据
+    const initTableData = () => {
+      state.tableData.param.pageNum = 1
+      typeList();
+    };
 		const typeList = () => {
-			// state.tableData.loading = true;
-			// api.product.getList(state.tableData.param).then((res: any) => {
-			// 	state.tableData.data = res.product;
-			// 	state.tableData.total = res.total;
-			// }).finally(() => (state.tableData.loading = false));
+      state.tableData.loading = true;
+      api.getLoopRegulation(state.tableData.param).then((res: any) => {
+        state.tableData.data = res.Data;
+        state.tableData.total = res.Total;
+      }).finally(() => (state.tableData.loading = false));
 		};
 		// 页面加载时
 		onMounted(() => {
-			// initTableData();
+			state.tableData.param.code = route.query.code
+			initTableData();
 		});
 		/** 重置按钮操作 */
 		const resetQuery = (formEl: FormInstance | undefined) => {
 			if (!formEl) return;
 			formEl.resetFields();
-			typeList();
+			initTableData();
 		};
 		return {
-			addDicRef,
-			editDicRef,
 			queryRef,
 			typeList,
 			resetQuery,

src/views/heating/monitor/loopSupervision/index.vue

@@ -81,36 +81,9 @@
 <script lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
-// import EditDic from './component/editPro.vue';
 import api from '/@/api/loopSupervision';
 import { useRouter } from 'vue-router';
 
-// 定义接口来定义对象的类型
-interface TableDataRow {
-  id: number;
-  name: string;
-  deviceType: string;
-  status: number;
-  desc: string;
-  createBy: string;
-}
-interface TableDataState {
-  ids: number[];
-  tableData: {
-    data: Array<TableDataRow>;
-    total: number;
-    loading: boolean;
-    param: {
-      pageNum: number;
-      pageSize: number;
-      name: string;
-      deviceType: string;
-      status: string;
-      dateRange: string[];
-    };
-  };
-}
-
 export default defineComponent({
   name: 'deviceproduct',
   setup() {
@@ -150,7 +123,7 @@ export default defineComponent({
       editDicRef.value.openDialog();
     };
     // 打开修改产品弹窗
-    const onOpenEditDic = (row: TableDataRow) => {
+    const onOpenEditDic = (row: any) => {
       editDicRef.value.openDialog(row);
     };
     // 页面加载时
@@ -164,7 +137,7 @@ export default defineComponent({
       typeList();
     };
     // 多选框选中数据
-    const handleSelectionChange = (selection: TableDataRow[]) => {
+    const handleSelectionChange = (selection: any) => {
       // state.ids = selection.map((item) => item.id);
     };
 

src/views/heating/monitor/loopSupervision/loopDetail.vue

@@ -1,35 +1,6 @@
 <template>
-	<div class="system-dic-container">
-		<el-card shadow="hover">
-			<div class="system-user-search">
-				<el-form :model="searchParams" ref="queryRef" :inline="true" label-width="100px">
-					<el-form-item label="环路名称" prop="name">
-						<el-input v-model="searchParams.name" placeholder="环路名称" clearable size="default"></el-input>
-					</el-form-item>
-					<el-form-item label="环路编号" prop="name">
-						<el-input v-model="searchParams.name" placeholder="环路编号" clearable size="default"></el-input>
-					</el-form-item>
-					<el-form-item label="所属换热站" prop="name">
-						<el-input v-model="searchParams.name" placeholder="所属换热站" clearable size="default"></el-input>
-					</el-form-item>
-					<el-form-item>
-						<el-button size="default" type="primary" class="ml10">
-							<el-icon>
-								<ele-Search />
-							</el-icon>
-							查询
-						</el-button>
-						<el-button size="default" @click="resetQuery(queryRef)">
-							<el-icon>
-								<ele-Refresh />
-							</el-icon>
-							重置
-						</el-button>
-					</el-form-item>
-				</el-form>
-			</div>
-		</el-card>
-		<el-row :gutter="15" class="home-card-one mt15">
+	<div class="system-dic-container data-overview">
+		<el-row :gutter="15" class="home-card-one">
 			<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(v, k) in dataOne" :key="k" :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }">
 				<div class="home-card-item">
 					<div class="item-header">
@@ -49,21 +20,27 @@
 				</div>
 			</el-col>
 		</el-row>
+
+		<!-- 拓扑图 -->
+		
+
 		<el-row :gutter="15" class="home-card-one mt15">
 			<el-col :span="24">
 				<div class="home-card-item p20">
-					<div class="home-card-item-title" style="display: flex;justify-content:space-between;">
-						<span>热网总能耗</span>
+					<div class="home-card-item-title">
+						<span>流程图</span>
+					</div>
+					<iframe src="https://zhgy.sagoo.cn/plugin/topo/?bgColor=ccc#/show/21" height="300" width="100%" frameborder="0" class="mt15"></iframe>
+				</div>
+			</el-col>
+		</el-row>
 
+		<el-row :gutter="15" class="home-card-one mt15">
+			<el-col :span="24">
+				<div class="home-card-item p20">
+					<div class="home-card-item-title" style="display: flex;justify-content:space-between;">
+						<span>环路监测</span>
 						<el-button type="text" @click="goDetail()">更多 &gt;</el-button>
-						<!-- <el-select @change="getStatisticsLineChartData()" v-model="rangeValue" placeholder="请选择查询范围" size="mini">
-							<el-option
-							v-for="item in [10, 30, 60]"
-							:key="item"
-							:label="'近'+item+'天'"
-							:value="item"
-							/>
-						</el-select> -->
 					</div>
 					<div style="height: 300px" ref="homeLineRef"></div>
 				</div>
@@ -73,10 +50,10 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, onMounted, ref, defineComponent, nextTick } from 'vue';
+import { toRefs, reactive, onMounted, ref, defineComponent, nextTick, watch } from 'vue';
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
 import * as echarts from 'echarts';
-import api from '/@/api/device';
+import api from '/@/api/loopSupervision';
 
 import ele from '/@/assets/img/ele.svg';
 import ele1 from '/@/assets/img/ele1.svg';
@@ -86,7 +63,8 @@ import map from '/@/assets/img/map.svg';
 import map1 from '/@/assets/img/map1.svg';
 import water from '/@/assets/img/water.svg';
 import water1 from '/@/assets/img/water1.svg';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
+import { useStore } from '/@/store/index';
 
 let global: any = {
 	homeCharThree: null,
@@ -101,6 +79,8 @@ export default defineComponent({
 		const queryRef = ref();
 		const homeLineRef = ref();
 		const router = useRouter()
+		const route = useRoute()
+		const store = useStore()
 		const state = reactive({
 			dataOne: [
 				{
@@ -108,10 +88,10 @@ export default defineComponent({
 					iconDark: map1,
 					title: '供热面积',
 					contentTitle1: '供热面积',
-					val1: '2112.12',
+					val1: '0',
 					unit1: '㎡',
 					contentTitle2: '总面积',
-					val2: '2312.12',
+					val2: '0',
 					unit2: '㎡',
 				},
 				{
@@ -119,10 +99,10 @@ export default defineComponent({
 					iconDark: fire1,
 					title: '热量',
 					contentTitle1: '总耗热',
-					val1: '4500',
+					val1: '0',
 					unit1: 'GJ',
 					contentTitle2: '总单耗',
-					val2: '0.34',
+					val2: '0',
 					unit2: 'GJ/㎡',
 				},
 				{
@@ -130,10 +110,10 @@ export default defineComponent({
 					iconDark: ele1,
 					title: '电量',
 					contentTitle1: '总耗电',
-					val1: '5200',
+					val1: '0',
 					unit1: 'KW.h',
 					contentTitle2: '总单耗',
-					val2: '0.22',
+					val2: '0',
 					unit2: 'KW.h/㎡',
 				},
 				{
@@ -141,12 +121,11 @@ export default defineComponent({
 					iconDark: water1,
 					title: '水量',
 					contentTitle1: '总耗水',
-					val1: '4500',
+					val1: '0',
 					unit1: 'T',
 					contentTitle2: '总单耗',
-					val2: '0.23',
+					val2: '0',
 					unit2: 'T/㎡',
-
 				},
 			],
 			lineName: '环路监测',
@@ -158,11 +137,54 @@ export default defineComponent({
 			},
 			searchParams: {
 				name: ''
-			}
+			},
+			xAxisData: [],
+			inTemperatureEchart: [], // 供水温度
+			outTemperatureEchart: [], // 回水温度
+			isIsDark: false
 		});
 
+		const getNumDetail = () => {
+			api.getLoopRegulationDetail({
+				QueryType: 'num',
+				types: 'loop',
+				code: route.query.code
+			}).then((res: any) => {
+				let data = res
+				state.dataOne[0].val1 = data.heatingArea //供暖面积
+				state.dataOne[0].val2 = data.forRealArea //实供面积
+				state.dataOne[1].val1 = data.unitConsumption //总热耗
+				state.dataOne[1].val2 = data.unitConsumptionSingle //热单耗
+				state.dataOne[2].val1 = data.elctricConsumption //总电量
+				state.dataOne[2].val2 = data.elctricConsumptionSingle //电单耗
+				state.dataOne[3].val1 = data.flowLoss //总水量
+				state.dataOne[3].val2 = data.flowLossSingle //水量单耗
+			})
+		}
+
+		const getChartDetail = () => {
+			api.getLoopRegulationDetail({
+				QueryType: 'echart',
+				types: 'loop',
+				code: route.query.code
+			}).then((res: any) => {
+				state.inTemperatureEchart = res.inTemperatureEchart.map((item: any) => item.value)
+				state.outTemperatureEchart = res.outTemperatureEchart.map((item: any) => item.value)
+				state.xAxisData = res.inTemperatureEchart.map((item: any) => item.time)
+				
+				nextTick(() => {
+					initLineChart();
+				});
+			})
+		}
+
 		const goDetail = () => {
-			router.push('/heating/monitor/loopSupervision/list/loopHistory')
+			router.push({
+				path: '/heating/monitor/loopSupervision/list/loopHistory',
+				query: {
+					code: route.query.code
+				}
+			})
 		}
 
 		// 折线图
@@ -177,7 +199,7 @@ export default defineComponent({
 				xAxis: [
 					{
 						type: 'category',
-						data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
+						data: state.xAxisData,
 						boundaryGap: true,
 						axisTick: { show: false },
 					},
@@ -194,18 +216,18 @@ export default defineComponent({
 					{
 						name: '供水温度',
 						type: 'line',
-						data: [10, 11, 13, 11, 12, 12, 9]
+						data: state.inTemperatureEchart
 					},
 					{
 						name: '回水温度',
 						type: 'line',
-						data: [1, -2, 2, 5, 3, 2, 0]
+						data: state.outTemperatureEchart
 					},
-					{
-						name: '室外温度',
-						type: 'line',
-						data: [3, 0, 4, 7, 5, 7, 5]
-					}
+					// {
+					// 	name: '室外温度',
+					// 	type: 'line',
+					// 	data: [3, 0, 4, 7, 5, 7, 5]
+					// }
 				]
 			};
 			(<any>global.homeCharThree).setOption(option);
@@ -226,12 +248,35 @@ export default defineComponent({
 		const initEchartsResize = () => {
 			window.addEventListener('resize', initEchartsResizeFun);
 		};
+		
+		// 监听 vuex 中是否开启深色主题
+		watch(
+			() => store.state.themeConfig.themeConfig.isIsDark,
+			(isIsDark) => {
+				nextTick(() => {
+					state.isIsDark = store.state.themeConfig.themeConfig.isIsDark
+					state.charts.theme = isIsDark ? 'transparent' : '';
+					state.charts.bgColor = isIsDark ? 'transparent' : '';
+					state.charts.color = isIsDark ? '#dadada' : '#303133';
+					setTimeout(() => {
+						initLineChart();
+					}, 1000);
+				});
+			},
+			{
+				deep: true,
+				immediate: true,
+			}
+		);
 
 		// 页面加载时
 		onMounted(() => {
+			getNumDetail()
+			getChartDetail()
 
-			initLineChart();
 			initEchartsResize();
+			// 获取布局配置信息
+			state.isIsDark = store.state.themeConfig.themeConfig.isIsDark;
 		});
 
 
@@ -342,8 +387,4 @@ $homeNavLengh: 8;
 		align-items: center;
 	}
 }
-
-// :deep(.el-form-item--default) {
-// margin-bottom: 0;
-// }
 </style>

src/views/heating/monitor/loopSupervision/loopHistory.vue

@@ -24,24 +24,19 @@
       </div>
       <el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading">
         <el-table-column type="index" label="序号" width="55" align="center" />
-        <el-table-column label="日期" prop="key" min-width="120" :show-overflow-tooltip="true" />
         <el-table-column label="环路名称" prop="name" :show-overflow-tooltip="true" />
-        <el-table-column label="环路编号" prop="name" min-width="120" :show-overflow-tooltip="true" />
-        <el-table-column label="一网供水流量" prop="value" min-width="120" :show-overflow-tooltip="true" />
-        <el-table-column label="一网供水压力" prop="value" min-width="120" :show-overflow-tooltip="true" />
-        <el-table-column label="一网供水温度" prop="value" min-width="120" :show-overflow-tooltip="true" />
-        <el-table-column label="一网回水流量" prop="value" min-width="120" :show-overflow-tooltip="true" />
-        <el-table-column label="一网回水压力" prop="value" min-width="120" :show-overflow-tooltip="true" />
-        <el-table-column label="一网回水温度" prop="value" min-width="120" :show-overflow-tooltip="true" />
-        <el-table-column label="二网供水流量" prop="value" min-width="120" :show-overflow-tooltip="true" />
-        <el-table-column label="二网供水压力" prop="value" min-width="120" :show-overflow-tooltip="true" />
-
-        <!-- <el-table-column prop="status" label="状态" width="100" align="center">
-          <template #default="scope">
-            <el-tag type="success" size="small" v-if="scope.row.status">已发布</el-tag>
-            <el-tag type="info" size="small" v-else>未发布</el-tag>
-          </template>
-        </el-table-column> -->
+        <el-table-column label="环路编号" prop="code" min-width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="一网供水压力" prop="1nPressure1" min-width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="二网供水压力" prop="inPressure2" min-width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="一网供水温度" prop="inTemperature1" min-width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="二网供水温度" prop="inTemperature2" min-width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="一网回水压力" prop="outPressure1" min-width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="二网回水压力" prop="outPressure2" min-width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="一网回水温度" prop="outTemperature1" min-width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="二网回水温度" prop="outTemperature2" min-width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="供水流量" prop="supplyWaterFlow" min-width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="回水流量" prop="returnWaterFlow" min-width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="二网回水流量" prop="secondWaterSupply" min-width="120" :show-overflow-tooltip="true" />
       </el-table>
       <pagination v-show="tableData.total>0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="typeList" />
     </el-card>
@@ -51,64 +46,44 @@
 <script lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
-// import EditDic from './component/editPro.vue';
-import api from '/@/api/device';
-
-// 定义接口来定义对象的类型
-interface TableDataRow {
-	id: number;
-	name: string;
-	deviceType: string;
-	status: number;
-	desc: string;
-	createBy: string;
-}
-interface TableDataState {
-	ids: number[];
-	tableData: {
-		data: Array<TableDataRow>;
-		total: number;
-		loading: boolean;
-		param: {
-			pageNum: number;
-			pageSize: number;
-			name: string;
-			deviceType: string;
-			status: string;
-			dateRange: string[];
-		};
-	};
-}
+import api from '/@/api/loopSupervision';
+import { useRoute } from 'vue-router';
 
 export default defineComponent({
 	name: 'deviceproduct',
 	setup() {
-		const addDicRef = ref();
-		const editDicRef = ref();
 		const queryRef = ref();
+		const route = useRoute()
 		const state = reactive({
 			tableData: {
-				data: [{ name: '环路', key: '2022-10-25', value: 1 }],
+				data: [],
 				total: 0,
 				loading: false,
 				param: {
 					pageNum: 1,
 					pageSize: 10,
-					status: '',
+					types: 'loop',
+					code: '',
 					dateRange: [],
 				},
 			},
 		});
+    // 初始化表格数据
+    const initTableData = () => {
+      state.tableData.param.pageNum = 1
+      typeList();
+    };
 		const typeList = () => {
-			// state.tableData.loading = true;
-			// api.product.getList(state.tableData.param).then((res: any) => {
-			// 	state.tableData.data = res.product;
-			// 	state.tableData.total = res.total;
-			// }).finally(() => (state.tableData.loading = false));
+      state.tableData.loading = true;
+      api.getLoopRegulation(state.tableData.param).then((res: any) => {
+        state.tableData.data = res.Data;
+        state.tableData.total = res.Total;
+      }).finally(() => (state.tableData.loading = false));
 		};
 		// 页面加载时
 		onMounted(() => {
-			// initTableData();
+			state.tableData.param.code = route.query.code
+			initTableData();
 		});
 		/** 重置按钮操作 */
 		const resetQuery = (formEl: FormInstance | undefined) => {
@@ -117,8 +92,6 @@ export default defineComponent({
 			typeList();
 		};
 		return {
-			addDicRef,
-			editDicRef,
 			queryRef,
 			typeList,
 			resetQuery,