Bläddra i källkod

供热区暗黑模式处理、文档部分bug修改

picasso 2 år sedan
förälder
incheckning
48a0ccf699

+ 32 - 3
src/views/heating/energyAnalysis/heatStationWaterAnalysis/index.vue

@@ -62,9 +62,21 @@
           </el-form-item>
         </el-form>
       </div>
-
+			
+			<div class="title">供回水对比图</div>
 			<div style="height: 300px" ref="barChartRef"></div>
+			<div class="title mt-2">失水量曲线</div>
 			<div style="height: 300px" ref="lineChartRef"></div>
+			<div class="title mt-2">数据列表</div>
+			
+      <el-table :data="state.tableData.data" style="width: 100%" v-loading="state.tableData.loading">
+        <el-table-column type="index" width="55" label="序号" align="center" />
+        <el-table-column label="日期" v-col="'key'" prop="key" 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>
     </el-card>
   </div>
 </template>
@@ -106,7 +118,11 @@ const state = reactive({
 	barChartSeries1: [],
 	barChartSeries2: [],
 	lineChartXAixs: [],
-	lineChartSeries: []
+	lineChartSeries: [],
+	tableData: {
+		data: [{ value: '-' }, { value: '-' }],
+		loading: false
+	}
 });
 
 const queryTree = () => {
@@ -234,7 +250,12 @@ const initLineChart = () => {
 	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 },
+		grid: {
+			left: '3%',
+			right: '4%',
+			bottom: '3%',
+			containLabel: true
+		},
 		tooltip: { trigger: 'axis' },
 		legend: { data: ['失水量'] },
 		xAxis: {
@@ -301,3 +322,11 @@ watch(
 	}
 );
 </script>
+
+
+<style lang="scss" scoped>
+.title {
+	font-size: 16px;
+	font-weight: bold;
+}
+</style>

+ 80 - 60
src/views/heating/heatStation/heatingDistrict/heatingDistrictManage/index.vue

@@ -1,67 +1,72 @@
 <template>
 	<div class="page-container">
-		<div class="head-card">
-			<div class="head-card-item">
-				<div class="item">
-					<div class="count">{{ cardCount.org }}</div>
-					<div class="label">区域统计</div>
+		<el-card>
+			<div class="head-card">
+				<div class="head-card-item">
+					<div class="item">
+						<div class="count" :class="{ dark: isDark }">{{ cardCount.org }}</div>
+						<div class="label">区域统计</div>
+					</div>
+					<div class="logo">
+						<img src="/@/assets/icon-org.png" class="img">
+					</div>
 				</div>
-				<div class="logo">
-					<img src="/@/assets/icon-org.png" class="img">
+				<div class="head-card-item">
+					<div class="item">
+						<div class="count" :class="{ dark: isDark }">{{ cardCount.plot }}</div>
+						<div class="label">小区统计</div>
+					</div>
+					<div class="logo">
+						<img src="/@/assets/icon-plot.png" class="img">
+					</div>
 				</div>
-			</div>
-			<div class="head-card-item">
-				<div class="item">
-					<div class="count">{{ cardCount.plot }}</div>
-					<div class="label">小区统计</div>
-				</div>
-				<div class="logo">
-					<img src="/@/assets/icon-plot.png" class="img">
+				<div class="head-card-item">
+					<div class="item">
+						<div class="count" :class="{ dark: isDark }">{{ cardCount.resident }}</div>
+						<div class="label">住户统计</div>
+					</div>
+					<div class="logo">
+						<img src="/@/assets/icon-resident.png" class="img">
+					</div>
 				</div>
 			</div>
-			<div class="head-card-item">
-				<div class="item">
-					<div class="count">{{ cardCount.resident }}</div>
-					<div class="label">住户统计</div>
+		</el-card>
+		<el-card class="mt-3">
+			<div class="panel" :class="{ dark: isDark }">
+				<div class="left-panel">
+					<el-input v-model="filterText" size="default" placeholder="搜索区域" />
+					<el-tree :data="treeList" node-key="id" default-expand-all :props="{
+						children: 'children'
+					}" @node-click="onNodeClick" :expand-on-click-node="false">
+						<template #default="{ data }">
+							<span class="custom-tree-node" :class="{ active: `${data.id}-${data.orgType}` === `${curNode.id}-${curNode.orgType}` }">
+								<img src="/src/assets/icon-org.png" v-if="data.orgType === 'org'">
+								<img src="/src/assets/icon-plot.png" v-else-if="data.orgType === 'plot'">
+								<img src="/src/assets/icon-floor.png" v-else-if="data.orgType === 'floor'">
+								<img src="/src/assets/icon-unit.png" v-else-if="data.orgType === 'unit'">
+								<span class="name" :title="data.orgName">{{ data.orgName }}</span>
+							</span>
+						</template>
+					</el-tree>
 				</div>
-				<div class="logo">
-					<img src="/@/assets/icon-resident.png" class="img">
+				<div class="right-panel" :class="{ dark: isDark }">
+					<!-- 小区 -->
+					<Regional v-if="curNode.orgType === 'org'" :organizationId="curNode.id" @finish="initPage()" />
+					<!-- 楼宇 -->
+					<Floor v-else-if="curNode.orgType === 'plot'" :nodeId="curNode.id" @finish="initPage()" />
+					<!-- 单元 -->
+					<Unit v-else-if="curNode.orgType === 'floor'" :nodeId="curNode.id" @finish="initPage()" />
+					<!-- 住户 -->
+					<Resident v-else-if="curNode.orgType === 'unit'" :nodeId="curNode.id" @finish="initPage()" />
 				</div>
 			</div>
-		</div>
-		<div class="panel">
-			<div class="left-panel">
-				<el-input v-model="filterText" size="default" placeholder="搜索区域" />
-				<el-tree :data="treeList" node-key="id" default-expand-all :props="{
-					children: 'children'
-				}" @node-click="onNodeClick" :expand-on-click-node="false">
-					<template #default="{ data }">
-						<span class="custom-tree-node" :class="{ active: `${data.id}-${data.orgType}` === `${curNode.id}-${curNode.orgType}` }">
-							<img src="/src/assets/icon-org.png" v-if="data.orgType === 'org'">
-							<img src="/src/assets/icon-plot.png" v-else-if="data.orgType === 'plot'">
-							<img src="/src/assets/icon-floor.png" v-else-if="data.orgType === 'floor'">
-							<img src="/src/assets/icon-unit.png" v-else-if="data.orgType === 'unit'">
-							<span class="name" :title="data.orgName">{{ data.orgName }}</span>
-						</span>
-					</template>
-				</el-tree>
-			</div>
-			<div class="right-panel">
-				<!-- 小区 -->
-				<Regional v-if="curNode.orgType === 'org'" :organizationId="curNode.id" @finish="initPage()" />
-				<!-- 楼宇 -->
-				<Floor v-else-if="curNode.orgType === 'plot'" :nodeId="curNode.id" @finish="initPage()" />
-				<!-- 单元 -->
-				<Unit v-else-if="curNode.orgType === 'floor'" :nodeId="curNode.id" @finish="initPage()" />
-				<!-- 住户 -->
-				<Resident v-else-if="curNode.orgType === 'unit'" :nodeId="curNode.id" @finish="initPage()" />
-			</div>
-		</div>
+		</el-card>
 	</div>
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
+import { toRefs, reactive, onMounted, ref, defineComponent, watch } from 'vue';
+import { useStore } from '/@/store/index';
 import api from '/@/api/heatingDistrict';
 import Regional from './children/regional/index.vue'
 import Floor from './children/floor/index.vue'
@@ -77,6 +82,7 @@ export default defineComponent({
 		Resident
 	},
 	setup() {
+		const store = useStore();
 		const treeList = ref([])
 		const state = reactive({
 			filterText: '',
@@ -85,7 +91,8 @@ export default defineComponent({
 				plot: 0,
 				resident: 0
 			},
-			curNode: {}
+			curNode: {},
+			isDark: false
 		});
 		// 获取区域树
 		const getTreeData = () => {
@@ -143,6 +150,18 @@ export default defineComponent({
 			state.curNode = data
 		}
 
+		// 监听 vuex 中是否开启深色主题
+		watch(
+			() => store.state.themeConfig.themeConfig.isIsDark,
+			(isIsDark) => {
+				state.isDark = !!isIsDark;
+			},
+			{
+				deep: true,
+				immediate: true,
+			}
+		);
+
 		// 页面加载时
 		onMounted(() => {
 			initPage()
@@ -162,17 +181,13 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .page-container {
-	background-color: #fff;
-
 	.panel {
 		display: grid;
 		grid-template-columns: 250px 1fr;
 		border: 1px solid #ddd;
-		// &::before {
-		// 	content: " ";
-		// 	display: block;
-		// 	clear: both;
-		// }
+		&.dark {
+			border: 1px solid rgb(51, 51, 51);
+		}
 	}
 
 	.left-panel {
@@ -185,6 +200,9 @@ export default defineComponent({
 		padding: 20px;
 		border-left: 1px solid #ddd;
 		position: relative;
+		&.dark {
+			border-left: 1px solid rgb(51, 51, 51);
+		}
 	}
 }
 
@@ -223,12 +241,14 @@ export default defineComponent({
 		.item {
 			text-align: center;
 
-			// margin-right: 10px;
 			.count {
 				font-size: 32px;
 				font-weight: 700;
 				color: #101010;
 				margin-bottom: 5px;
+				&.dark {
+					color: #dadada;
+				}
 			}
 		}
 

+ 1 - 1
src/views/heating/heatStation/loop/component/detail.vue

@@ -58,7 +58,7 @@
           {{ ruleForm.decade }}
         </el-form-item>
 				<el-form-item label="状态" prop="status">
-          {{ ruleForm.decade === 1 ? '在线' : '不在线' }}
+          {{ ruleForm.status === 1 ? '启用' : '禁用' }}
 				</el-form-item>
         <el-form-item label="路线信息" prop="">
 					<div class="mb10" style="width: 100%">

+ 2 - 2
src/views/heating/heatStation/loop/component/edit.vue

@@ -70,8 +70,8 @@
           <el-input v-model="ruleForm.decade" placeholder="请输入环路年代" />
         </el-form-item>
 				<el-form-item label="状态" prop="status">
-					<el-radio v-model="ruleForm.status" :label="1">在线</el-radio>
-					<el-radio v-model="ruleForm.status" :label="0">不在线</el-radio>
+					<el-radio v-model="ruleForm.status" :label="1">启用</el-radio>
+					<el-radio v-model="ruleForm.status" :label="0">禁用</el-radio>
 				</el-form-item>
 				<!-- <el-form-item label="数据模型" prop="dataTemplateIds">
 					<el-select v-model="ruleForm.dataTemplateIds" multiple clearable style="width: 100%;" placeholder="请选择">

+ 2 - 2
src/views/heating/heatStation/loop/index.vue

@@ -83,8 +83,8 @@
 <!--	    	<el-table-column label="环路年代" prop="decade" :show-overflow-tooltip="true" />-->
         <el-table-column prop="status" label="状态" v-col="'status'" align="center">
           <template #default="scope">
-            <el-tag type="info" size="small" v-if="scope.row.status === 0">不在线</el-tag>
-            <el-tag type="success" size="small" v-else-if="scope.row.status === 1">在线</el-tag>
+            <el-tag type="info" size="small" v-if="scope.row.status === 0">禁用</el-tag>
+            <el-tag type="success" size="small" v-else-if="scope.row.status === 1">启用</el-tag>
           </template>
         </el-table-column>
         <el-table-column label="操作" width="150" v-col="'handle'" align="center">