驾驶舱

src/views/databoard/kiln/EnergeCost.vue

@@ -1,22 +1,24 @@
-<!-- 
-    filename: MaterialCost.vue
-    author: liubin
-    date: 2023-12-06 09:09:27
-    description: 
--->
-
 <template>
-	<Container name="能耗" size="middle" style="">
-		<TimePrompt class="timeShow" :timestr="timestr" />
+	<Container
+		name="能耗"
+		size="middle"
+		style="">
 		<EnergeTop />
 		<SplitLine :horizontal="true" />
-		<div class="" style="flex: 2; padding: 8px">
+		<div
+			class=""
+			style="flex: 2; padding: 8px">
 			<div
 				class="header-line"
 				style="margin: 8px 0 16px; display: flex; align-items: center">
-				<h2 class="" style="margin: 0; color: #0ee8fe; margin-right: 12px">
+				<h2
+					class=""
+					style="margin: 0; color: #0ee8fe; margin-right: 12px">
 					能耗趋势图
 				</h2>
+				<TimePrompt
+					class="timeShow"
+					:timestr="timestr" />
 				<!-- <Switcher /> -->
 				<div>
 					<!-- <span class="lgd lgd-total">总量</span> -->
@@ -32,11 +34,21 @@
 					justify-content: space-between;
 				">
 				<SelectorBtnGroup
-					:options="['电耗能', '天然气I', '天然气II']" @emitFun='toggleType' :active='chartType'/>
-				<SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate' :active='chartTime'/>
+					:options="['电耗能', '天然气I', '天然气II']"
+					@emitFun="toggleType"
+					:active="chartType" />
+				<SelectorBtnGroup
+					:options="['周', '月', '年']"
+					@emitFun="toggleDate"
+					:active="chartTime" />
 			</div>
-			<div class="chart" style="height: 200px; margin-top: 8px;">
-				<GasChart :chartType='chartType' :chartTime='chartTime' @emitFun='dateUpdate'/>
+			<div
+				class="chart"
+				style="height: 200px; margin-top: 8px">
+				<GasChart
+					:chartType="chartType"
+					:chartTime="chartTime"
+					@emitFun="dateUpdate" />
 			</div>
 		</div>
 	</Container>
@@ -51,7 +63,7 @@ import EnergeTop from './EnergeTop';
 import GasChart from '../components/GasChart.vue';
 import SelectorBtnGroup from '../components/SelectorBtnGroup';
 import TimePrompt from '../components/TimePrompt';
-import { switchShowTime } from '../utils'
+import { switchShowTime } from '../utils';
 export default {
 	name: 'EnergeCost',
 	components: {
@@ -61,48 +73,43 @@ export default {
 		EnergeTop,
 		GasChart,
 		SelectorBtnGroup,
-		TimePrompt
+		TimePrompt,
 	},
 	props: {},
 	data() {
 		return {
-			chartType:'电耗能',
-			chartTime:'周',
-			timestr: ''
+			chartType: '电耗能',
+			chartTime: '周',
+			timestr: '',
 		};
 	},
 	mounted() {
-    this.timestr = switchShowTime(this.chartTime)
-  },
+		this.timestr = switchShowTime(this.chartTime);
+	},
 	computed: {
 		gasInfoMsg() {
-			return this.$store.state.websocket.gasInfo
+			return this.$store.state.websocket.gasInfo;
 		},
 	},
 	methods: {
 		// 切换能源
 		toggleType(val) {
-			this.chartType = val
+			this.chartType = val;
 		},
 		// 切换时间
 		toggleDate(val) {
-			this.chartTime = val
-			this.timestr = switchShowTime(val)
+			this.chartTime = val;
+			this.timestr = switchShowTime(val);
 		},
 		// 数据更新
-    dateUpdate() {
-      this.timestr = switchShowTime(this.chartTime)
-    }
+		dateUpdate() {
+			this.timestr = switchShowTime(this.chartTime);
+		},
 	},
 };
 </script>
 
 <style scoped lang="scss">
-.timeShow {
-  position: absolute;
-  top: 20px;
-  left: 120px;
-}
 .lgd {
 	color: #fff;