窑炉

src/views/databoard/kiln/EnergeCost.vue

@@ -31,24 +31,24 @@
 					justify-content: space-between;
 				">
 				<SelectorBtnGroup
-					:options="['电耗能', '天然气I', '天然气II']" @emitFun='toggleType'/>
-				<SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate'/>
+					:options="['电耗能', '天然气I', '天然气II']" @emitFun='toggleType' :active='chartType'/>
+				<SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate' :active='chartTime'/>
 			</div>
 			<div class="chart" style="height: 200px; margin-top: 8px;">
-				<GasChart />
+				<GasChart :chartType='chartType' :chartTime='chartTime'/>
 			</div>
 		</div>
 	</Container>
 </template>
 
 <script>
-import Container from '../components/Container.vue';
+import Container from '../components/Container';
 import ShadowRect from '../components/ShadowRect.vue';
 import SplitLine from '../components/line';
 import Switcher from '../components/Switcher';
 import EnergeTop from './EnergeTop';
 import GasChart from '../components/GasChart.vue';
-import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
+import SelectorBtnGroup from '../components/SelectorBtnGroup';
 export default {
 	name: 'EnergeCost',
 	components: {
@@ -62,17 +62,42 @@ export default {
 	},
 	props: {},
 	data() {
-		return {};
+		return {
+			chartType:'电耗能',
+			chartTime:'周'
+		};
+	},
+	computed: {
+		gasInfoMsg() {
+			return this.$store.state.websocket.gasInfo
+		},
 	},
-	computed: {},
 	methods: {
 		// 切换能源
-		toggleType() {
-
+		toggleType(val) {
+			console.log('能源' + val)
+			if (val === '天然气I' || val === '天然气II') {
+				if (this.chartTime === '周') {
+					this.chartType = val
+				} else {
+					this.$message.warning('暂无数据')
+				}
+			}else {
+				this.chartType = val
+			}
 		},
 		// 切换时间
-		toggleDate() {
-			
+		toggleDate(val) {
+			console.log('时间' + val)
+			if (val === '月' || val === '年') {
+				if (this.chartType === '电耗能') {
+					this.chartTime = val
+				} else {
+					this.$message.warning('暂无数据')
+				}
+			}else{
+				this.chartTime = val
+			}
 		}
 	},
 };