From 7243d05010bde40a8c82b7cbbf904eeb35168cdd Mon Sep 17 00:00:00 2001
From: gaoshp <291585735@qq.com>
Date: 星期二, 23 四月 2024 23:09:57 +0800
Subject: [PATCH] update

---
 src/views/mdc/station-live.vue |  818 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 files changed, 801 insertions(+), 17 deletions(-)

diff --git a/src/views/mdc/station-live.vue b/src/views/mdc/station-live.vue
index 8cfa92b..0afc929 100644
--- a/src/views/mdc/station-live.vue
+++ b/src/views/mdc/station-live.vue
@@ -1,24 +1,808 @@
 <!--
- * @Date: 2024-04-09 22:11:21
- * @LastEditors: Sneed
- * @LastEditTime: 2024-04-13 22:15:47
- * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/station-live.vue
- 鐘舵�佸弽棣�
+ * @Author: lzhe lzhe@example.com
+ * @Date: 2024-03-26 10:28:33
+ * @LastEditors: lzhe lzhe@example.com
+ * @LastEditTime: 2024-04-23 17:08:42
+ * @FilePath: /smart-web/src/views/master/person/main/index.vue
+ * @Description: 杩欐槸榛樿璁剧疆,璇疯缃甡customMade`, 鎵撳紑koroFileHeader鏌ョ湅閰嶇疆 杩涜璁剧疆: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
-    <el-main>
-        <el-card shadow="never">
-            鏁堢巼鍒嗘瀽
-        </el-card>
-    </el-main>
+	<div class="aposcope-main">
+		<div class="aposcope-left">
+			<div class="left-title">鏌ヨ鏉′欢</div>
+			<el-tree :data="tableData" node-key="id" default-expand-all :expand-on-click-node="false" :props="defalutProps" @node-click="handleNodeClick" ref="treeRef" highlight-current />
+		</div>
+		<div class="aposcope-right">
+			<div class="content-machine-box">
+				<div class="content-machine-img"><img src="./station.png" alt=""></div>
+				<div class="content-machine-detail">
+					<div class="content-machine-name">{{stationForm.machineName}}</div>
+					<el-form :model="stationForm" ref="dialogForm" label-width="80px" label-position="center" style="width: 100%;">
+						<el-row>
+							<el-col :span="8">
+								<el-form-item label="宸ヤ綅缂栧彿">{{stationForm.code}}</el-form-item>
+							</el-col>
+							<el-col :span="8">
+								<el-form-item label="鏈哄櫒鍝佺墝">{{stationForm.machineBrand}}</el-form-item>
+							</el-col>
+							<el-col :span="8">
+								<el-form-item label="鏈哄櫒缂栧彿">{{stationForm.machineCode}}</el-form-item>
+							</el-col>
+							<el-col :span="8">
+								<el-form-item label="鏈哄櫒鍚嶇О">{{stationForm.machineName}}</el-form-item>
+							</el-col>
+						</el-row>
+					</el-form>
+				</div>
+			</div>
+			<div class="collect-info-panel">
+				<div class="fact-analysis-realtim">
+					<div class="wimi-empty" style="background-color: rgb(255, 255, 255);" v-if="dmpList.length == 0">
+						<div class="wimi-empty-img" style="width: 150px; height: 150px;">
+							<img src="./quesheng.bd026700.png" style="height: auto; width: 100%;">
+						</div>
+						<div class="empty-description">
+							<div>鏆傛棤鏁版嵁</div>
+						</div>
+					</div>
+					<div class="fact-analysis-card" v-for="item in dmpList" v-if="dmpList.length != 0">
+						<div class="card-name" style="background-color: rgb(127, 192, 192);">{{item.description}}</div>
+						<div class="card-value" style="background-color: rgba(127, 192, 192, 0.14);"></div>
+					</div>
+				</div>
+			</div>
+			<el-tabs type="border-card" class="demo-tabs">
+			    <el-tab-pane label="宸ヤ綅鏁版嵁">
+					<div style="text-align: right;margin-bottom: 14px;">
+						<el-date-picker v-model="wcsDate" type="date" @change="wcschangedate" value-format="YYYY-MM-DD" size="small" />
+					</div>
+			    	<div class="wcs-main">
+			    		<div><div id="wcs-left" style="width: 100%;height:400px;"></div></div>
+			    		<div><div id="wcs-right" style="width: 100%;height:400px;"></div></div>
+			    	</div>
+					<div class="bottom-panel content-panel">
+						<div class="panel-title">鐝鐘舵�佽褰�</div>
+						<div class="panel-content bottom-panel-chart">
+							<div class="status">
+								<div class="feed-button" @click="table_edit">鐘舵�佸弽棣�</div>
+								<div class="status-wrap align-left">
+									<div class="collect-status">閲囬泦鐘舵��</div>
+									<div class="status-box" v-for="item in achievements"><div class="status-color" :style="{'background-color': item.color}"></div>{{ item.name }}</div>
+								</div>
+								<div class="status-wrap">
+									<el-checkbox v-model="checked1" label="浜哄伐鍙嶉鐘舵��" size="large" />
+									<div class="status-con">
+										<div class="status-box" v-for="item in collectionstatus"><div class="status-color" :style="{'background-color': item.color}"></div>{{ item.name }}</div>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div style="padding: 8px;">
+							<div id="wcs-log" style="width: 100%;height:200px;"></div>
+							<el-table ref="multipleTableRef1" :data="recordData" border style="width: 100%;">
+								<el-table-column prop="shiftIndexName" label="鐝"></el-table-column>
+								<el-table-column prop="temdata" label="璋冭瘯"></el-table-column>
+								<el-table-column prop="temdata" label="绂荤嚎"></el-table-column>
+								<el-table-column prop="temdata" label="寰呮満"></el-table-column>
+								<el-table-column prop="temdata" label="鎶ヨ"></el-table-column>
+								<el-table-column prop="temdata" label="杩愯"></el-table-column>
+								<el-table-column prop="perdata" label="绋煎姩鐜�%"></el-table-column>
+								<el-table-column prop="perdata" label="鎶ヨ鐜�%"></el-table-column>
+							</el-table>
+						</div>
+					</div>
+			    </el-tab-pane>
+			    <el-tab-pane label="鏈哄櫒灞ュ巻">
+					<div class="alarm-title">鎶ヨ淇℃伅灞ュ巻</div>
+					<el-table ref="multipleTableRef" :data="alarmtableData" border style="width: 100%" class="multipleTableRef">
+						<el-table-column prop="alarmCode" label="鎶ヨ浠g爜"></el-table-column>
+						<el-table-column prop="alarmMsg" label="鎶ヨ淇℃伅"></el-table-column>
+						<el-table-column prop="alarmTime" label="鎶ヨ鏃堕棿"></el-table-column>
+					</el-table>
+					<el-pagination
+						style="margin-top: 12px;"
+						@size-change="alarmSizeChange"
+						@current-change="alarmCurrentChange"
+						:current-page="currentPage4"
+						:page-sizes="[15, 50, 100]"
+						:page-size="15"
+						layout="total, sizes, prev, pager, next, jumper"
+						:total="alarmtotal">
+					</el-pagination>
+				</el-tab-pane>
+			 </el-tabs>
+		</div>
+	</div>
+	<save-dialog v-if="dialog.save" ref="saveDialog"  @success="addfeedbackSuccess" :workstationId="lastLevelId" @closed="dialog.save=false"></save-dialog>
 </template>
-
 <script>
-    export default {
-        
-    }
+	import * as echarts from 'echarts';
+	import saveDialog from './add-station-status'
+	export default {
+		name: "state-feedback",
+		data(){
+			return {
+				achievements: [],
+				collectionstatus: [],
+				checked1: "",
+				alarmtotal: 0,
+				alarmtableData: [],
+				wcsDate: "",
+				wcsOptionL: {  
+		            title: {  
+		                text: '鐢ㄦ椂鍒嗗竷鎯呭喌',   
+		                left: 'left',
+		                textStyle: {
+		                	fontSize:14
+		                }
+		            },  
+		            grid: {
+		            	top: 0,
+		            },
+		            tooltip: {  
+		                trigger: 'item',  
+		                //formatter: '{a} <br/>{b} : {c} ({d}%)'  
+		                formatter: '{a} 0鍒嗛挓'
+		            },  
+		            legend: {  
+		                orient: 'vertical',  
+		                bottom: 'bottom',  
+		                data: ['璋冭瘯', '绂荤嚎', '寰呮満', '鎶ュ憡', '鎶ヨ', '杩愯']  
+		            },  
+		            series: [  
+		                {  
+		                	top: -30,
+		                    name: '鐢ㄦ椂:',  
+		                    type: 'pie',  
+		                    radius: '55%',  
+		                    center: ['40%', '50%'],  
+		                    data: [],  
+							itemStyle: {
+								borderRadius: 10,
+								borderColor: '#fff',
+								borderWidth: 2
+							},
+		                    emphasis: {  
+		                        itemStyle: {  
+		                            shadowBlur: 10,  
+		                            shadowOffsetX: 0,  
+		                            shadowColor: 'rgba(0, 0, 0, 0.5)'  
+		                        }  
+		                    }  
+		                }  
+		            ]  
+		        },
+				wcsOptionR:{
+					title: {  
+		                text: '璁惧鏁堢巼',   
+		                left: 'left',
+		                textStyle: {
+		                	fontSize:14
+		                }
+		            }, 
+					xAxis: {
+						max: '100'
+					},
+					yAxis: {
+						type: 'category',
+						data: ['杩愯鐜�', '鎶ヨ鐜�', '绋煎姩鐜�']
+					},
+					tooltip: {  
+		                trigger: 'item',  
+		                //formatter: '{a} <br/>{b} : {c} ({d}%)'  
+		                formatter: '{b} {c}%'
+		            },
+					series: [
+						{	
+							top: -30,
+		                    name: 'wcsR',  
+		                    type: 'bar',   
+		                    center: ['40%', '50%'],  
+		                    data: [],  
+							itemStyle: {
+								borderRadius: 8,
+								borderColor: '#fff',
+								borderWidth: 1
+							},
+							label: {
+								show: true,
+								position: 'right',
+								formatter: '{c}%',
+								valueAnimation: true
+							},
+		                    emphasis: {  
+		                        itemStyle: {  
+		                            shadowBlur: 10,  
+		                            shadowOffsetX: 0,  
+		                            shadowColor: 'rgba(0, 0, 0, 0.5)'  
+		                        }  
+		                    }  
+						}
+					],
+					legend: {
+						show: true, // 寮哄埗鏄剧ず鍥句緥  
+						orient: 'vertical', // 鍥句緥鍒楄〃鐨勫竷灞�鏈濆悜锛屽彲閫夊�间负锛�'horizontal' 鎴� 'vertical'  
+						left: 'left', // 鍥句緥缁勪欢绂诲鍣ㄥ乏渚х殑璺濈  
+						top: 'top', // 鍥句緥缁勪欢绂诲鍣ㄤ笂渚х殑璺濈  
+						data: ['杩愯鐜�', '鎶ヨ鐜�', '绋煎姩鐜�'] // 涓巗eries涓殑name瀵瑰簲锛岀敤浜庢樉绀哄浘渚嬪悕绉�
+					}
+				},
+				wcsOptionLog:{
+					grid: {  
+						top: '0%'
+					},
+					xAxis: {
+						type: 'category',
+						data: ['00:00:00', '02:00:00', '04:00:00', '06:00:00', '08:00:00', '10:00:00', '12:00:00', '14:00:00', '18:00:00'],  
+					},
+					yAxis: {
+						type: 'category',
+						data: ['1', '2']
+					},
+					series: [
+						{	
+		                    name: 'wcsLog',  
+		                    type: 'bar',   
+		                    data: [],  
+		                    emphasis: {  
+		                        itemStyle: {  
+		                            shadowBlur: 10,  
+		                            shadowOffsetX: 0,  
+		                            shadowColor: 'rgba(0, 0, 0, 0.5)'  
+		                        }  
+		                    }  
+						}
+					]
+				},
+				dmpList: [],
+				stationForm: {
+					code: "",
+					machineBrand: "",
+					machineCode: "",
+					machineName: ""
+				},
+				dialog: {
+					save: false
+				},
+				lastLevelId: "",
+				current: "1",
+				size: "15",
+				searchData: {
+					feedBackStatus: [],
+					date: [],
+					endDate: "",
+					startDate: ""
+				},
+				searchDataList: [],  //鍙充晶鏁版嵁list
+				aList: [],
+				defalutProps: {
+					label: 'title',
+  					children: 'children',
+					isLeaf: 'hasChildren',
+					disabled: 'disabled'
+				},
+				parentId: "0",
+				tableData: [],
+				searchSelection: [],
+				wcsBeginOption: {},
+				alarmsearchData: {
+					current: "1",
+					size: "15"
+				},
+				recordData: [] // 鐝鐘舵�佽褰晅able
+			}
+		},
+		created(){
+			
+		},
+		mounted(){
+			this.newDate();  //鑾峰彇褰撳墠鏃ユ湡
+			this.getTreeList(this.$route.query.code);
+		},
+		components: {
+			saveDialog
+	    },
+		methods: {
+			table_edit(){
+				this.dialog.save = true
+				this.$nextTick(() => {
+					this.$refs.saveDialog.open('edit').setData(this.lastLevelId);
+				})
+			},
+			alarmSizeChange(val) {
+				console.log(`姣忛〉 ${val} 鏉);
+				this.alarmsearchData.current = "1";
+				this.alarmsearchData.size = val;
+				this.alarmsearchBtn();
+			},
+			alarmCurrentChange(val) {
+				console.log(`褰撳墠椤�: ${val}`);
+				this.alarmsearchData.current = val;
+				this.alarmsearchBtn();
+			},
+			alarmsearchBtn() {
+				this.$HTTP.get(`/api/blade-mdc/work-station-analysis/alarm/${this.lastLevelId}?current=${this.alarmsearchData.current}&size=${this.alarmsearchData.size}`).then(res=> {
+					if(res.code == 200) {
+						this.alarmtableData = res.data.records;
+						this.alarmtotal = res.data.total;
+					}
+				})
+			},
+			wcschangedate(date) {
+				this.wcsDate = date;
+				this.getwscLvalue();  //宸︿晶鍥捐〃
+				this.getwcsR();
+				this.getrecord();  //鐝鐘舵�佽褰晅able
+				this.getlogcart();  //鐝鐘舵�佽褰昪hart
+			},
+			getrecord() {  //鐝鐘舵�佽褰晅able
+				var obj = {
+					date: this.wcsDate,
+					humanFeedback: true,
+					workstationId: this.lastLevelId
+				}
+				this.$HTTP.post(`/api/blade-mdc/status-record/shift-index-status-record-table`,obj).then(res=> {
+					if(res.code == 200) {
+						res.data.forEach(item=> {
+							item.temdata = "00:00:00";
+							item.perdata = "0";
+						})
+						this.recordData = res.data;
+					}
+				})
+			},
+			getlogcart() {  //鐝鐘舵�佽褰昪hart
+				var obj = {
+					date: this.wcsDate,
+					humanFeedback: true,
+					workstationId: this.lastLevelId
+				}
+				this.$HTTP.post(`/api/blade-mdc/status-record/shift-index-status-record-table`,obj).then(res=> {
+					if(res.code == 200) {
+						var myChart = echarts.init(document.getElementById('wcs-log')); 
+						res.data.forEach(item => {
+							item.value = 0;
+						})
+						this.wcsOptionLog.series[0].data = res.data;
+						myChart.setOption(this.wcsOptionLog);
+					}
+				})
+			},
+			getwscLvalue() {
+				var obj = {
+					date: this.wcsDate,
+					humanFeedback: true,
+					workstationId: this.lastLevelId
+				}
+				this.$HTTP.post(`/api/blade-mdc/status-record/time-distribution`,obj).then(res=> {
+					if(res.code == 200) {
+						var myChart = echarts.init(document.getElementById('wcs-left')); 
+						var wcsOption = JSON.parse(JSON.stringify(this.wcsBeginOption));
+						if(res.data.length == 0) {
+							wcsOption.forEach(item=> {
+								item.value = 20;
+							})
+						}else {
+							wcsOption.forEach(item=> {
+								res.data.forEach(item2=> {
+									if(item.code == item2.name) {
+										item.value = item2.value;
+									}
+								})
+							})
+						}
+						this.wcsOptionL.series[0].data = wcsOption;
+						myChart.setOption(this.wcsOptionL);
+					}
+				})
+			},
+			getwcsLcolor() {
+				this.$HTTP.get(`/api/blade-cps/global_wcs/list?code=&name=`).then(res=> {
+					if(res.code == 200) {
+						res.data.forEach(item=> {
+							item.itemStyle = {color: item.color};
+						})
+						this.wcsBeginOption = res.data;
+						this.getwscLvalue();
+					}
+				})
+			},
+			getwcsR() {
+				var obj = {
+					date: this.wcsDate,
+					humanFeedback: true,
+					workstationId: this.lastLevelId
+				}
+				this.$HTTP.post(`/api/blade-mdc/status-record/equipment-efficiency`,obj).then(res=> {
+					if(res.code == 200) {
+						var myChart = echarts.init(document.getElementById('wcs-right')); 
+						res.data.forEach(item=> {
+							item.value = (Number(item.value)*100).toFixed(2);
+							if(item.name == "杩愯鐜�") item.itemStyle = {color: '#73d13d'};
+							if(item.name == "鎶ヨ鐜�") item.itemStyle = {color: '#ff4d4f'};
+							if(item.name == "绋煎姩鐜�") item.itemStyle = {color: '#40a9ff'};
+						})
+						this.wcsOptionR.series[0].data = res.data;	
+						myChart.setOption(this.wcsOptionR);
+					}
+				})
+			},
+			newDate() {
+				var date = new Date();  
+			    var year = date.getFullYear();  
+			    var month = (1 + date.getMonth()).toString().padStart(2, '0'); // JavaScript涓湀浠芥槸浠�0寮�濮嬬殑锛屾墍浠ユ垜浠渶瑕佸姞1  
+			    var day = date.getDate().toString().padStart(2, '0'); // getDate()杩斿洖鐨勬槸褰撳墠鏈堢殑鏃ユ暟锛屼笉闇�瑕佸姞1  
+			    this.wcsDate = year + '-' + month + '-' + day;
+			},
+			addfeedbackSuccess() {
+				
+			},
+			handleNodeClick(data) {
+				if(data.code) {
+					this.lastLevelId = data.id;
+					this.$HTTP.get(`/api/blade-cps/workstation/get?workstationId=${this.lastLevelId}`).then(res=> {
+						if(res.code == 200) {
+							this.stationForm = res.data;
+							this.getdmp(this.lastLevelId,this.stationForm.machineId);
+							this.newDate();  //鑾峰彇褰撳墠鏃ユ湡
+							this.getwcsR();
+							this.getwscLvalue();  //宸︿晶鍥捐〃
+							this.alarmsearchBtn();  //鏈哄櫒灞ュ巻
+							this.getrecord();  //鐝鐘舵�佽褰晅able
+							this.getlogcart();  //鐝鐘舵�佽褰昪hart
+						}
+					})
+				}
+			},
+			getdmp(lastLevelId,machineId) {
+				this.$HTTP.get(`/api/blade-cps/workstation/get-dmp-variables?machineId=${machineId}&workstationId=${lastLevelId}`).then(res=> {
+					if(res.code == 200) {
+						this.dmpList = res.data;
+						console.log(this.dmpList,1)
+					}
+				})
+			},
+			getLastLevelIds(tree) {  
+				if (tree.length === 0) return ""; // 濡傛灉娌℃湁鏍硅妭鐐癸紝杩斿洖绌� 
+				const lastLevelIds = []; 
+				const lastLevelCodes = [];
+				function traverseTree(node) {  
+					if(!node.code) {
+						lastLevelCodes.push(node.id);
+					}
+					if (node.children.length > 0) {  
+						node.children.forEach(traverseTree); // 閫掑綊閬嶅巻瀛愯妭鐐�  
+					} else {  
+						if(node.code) {
+							lastLevelIds.push(node.id); // 鏈塩ode鎵嶈 
+						}
+					}
+				}  	
+				// 鍙亶鍘嗙涓�涓牴鑺傜偣  
+				traverseTree(tree[0]);  
+				return {lastLevelCodes,lastLevelId:lastLevelIds[0]}; // 杩斿洖lastLevelCodes锛氭病鏈塩ode鐨勬暟缁勩�俵astLevelId锛氭湁code鐨勭涓�涓猧d
+			},
+			buildTree(items) {  
+			  const idMap = {};  
+			  const tree = [];  
+			  // 绗竴姝ワ細鍒涘缓id鍒板璞$殑鏄犲皠  
+			  items.forEach(item => {  
+			    idMap[item.id] = { ...item, children: [] };  
+			  }); 
+			  // 绗簩姝ワ細鏋勫缓鏍戝舰缁撴瀯  
+			  items.forEach(item => {  
+			    const currentNode = idMap[item.id];  
+			    // 濡傛灉parentId涓�0锛岃鏄庢槸鏍硅妭鐐�  
+			    if (item.parentId === 0) {  
+			      tree.push(currentNode);  
+			    } else {  
+			      // 鍚﹀垯锛屾煡鎵剧埗鑺傜偣锛屽苟灏嗗綋鍓嶈妭鐐规坊鍔犲埌鐖惰妭鐐圭殑children鏁扮粍涓�  
+			      const parentId = item.parentId;  
+			      if (idMap[parentId]) {  
+			        idMap[parentId].children.push(currentNode);  
+			      }  
+			    }  
+			  });  
+			  return tree;  
+			},
+			addTreeDisable(treeData) {
+				var tree = [];
+				treeData.forEach(item=> {
+					if(item.code) {
+						item.disabled = false;
+					}else {
+						item.disabled = true;
+					}
+					tree.push(item);
+				})
+				return tree;
+			},
+			getTreeList(id) {
+				var obj = {
+					groupCategory: 1,
+					groupType: "group_workstation"
+				}
+				this.$HTTP.post("/api/blade-cps/group/groupWorkstation/type",obj).then(res=> {
+					if(res.code == 200) {
+						if (res.code == 200) {
+							var treeDisabled = this.addTreeDisable(res.data);
+							this.tableData = this.buildTree(treeDisabled);  //浠庢墎骞冲寲鍙樹负鏍戠姸缁撴瀯
+							this.$nextTick(()=> {
+								if(id) {
+									this.lastLevelId = id;  //鎸囧畾id
+								}else {
+									this.lastLevelId = this.getLastLevelIds(this.tableData).lastLevelId;
+								}
+								this.$refs.treeRef.setCurrentKey(this.lastLevelId);  //绗竴涓妭鐐圭殑绗竴涓瓙鑺傜偣鏈�鍚庝竴绾ч粯璁ら�変腑
+								//浠ヤ笅鏄垵濮嬪寲鏁版嵁
+								this.getlist();  //娓叉煋璇︽儏鍜�(鐘舵�乴ist)
+								this.getwcsLcolor();  //宸︿晶鍥捐〃
+								this.getwcsR();  //鍙充晶鍥炬爣
+								this.getachievements();  //鐝鐘舵�佽褰曢噰闆嗙姸鎬�
+								this.getrecord();  //鐝鐘舵�佽褰晅able
+								this.getlogcart();  //鐝鐘舵�佽褰昪hart
+							})
+							
+						}
+					}
+				})
+			},
+			getachievements() { //鐝鐘舵�佽褰曢噰闆嗙姸鎬�
+				this.$HTTP.get(`/api/blade-cps/global_wcs/wcs-achievements`).then(res=> {
+					if(res.code == 200) {
+						var achievements = [];//閲囬泦鐘舵��
+						var collectionstatus = [];  //浜哄伐鍙嶉鐘舵��
+						res.data.forEach(item=> {
+							if(item.type == 1) {
+								achievements.push(item);
+							}
+							if(item.type == 4) {
+								collectionstatus.push(item);
+							}
+						})
+						this.achievements = achievements;
+						this.collectionstatus = collectionstatus;
+					}
+				})
+			},
+			getlist() {
+				this.$HTTP.get(`/api/blade-cps/workstation/get?workstationId=${this.lastLevelId}`).then(res=> {
+					if(res.code == 200) {
+						this.stationForm = res.data;
+						this.getdmp(this.lastLevelId,this.stationForm.machineId);
+					}
+				})
+			}
+		}
+	}
 </script>
-
-<style lang="scss" scoped>
-
+<style scoped>
+.aposcope-main {
+	display: flex;
+	min-height: 100%;
+	margin: 8px;
+}
+.aposcope-left {
+	width: 240px;
+	margin-right: 8px;
+	padding: 4px;
+	background-color: #fff;
+}
+.aposcope-right {
+	flex: 1;
+	padding: 8px;
+	background-color: #fff;
+}
+.left-title {
+	font-size: 16px;
+    text-align: center;
+    height: 38px;
+    line-height: 38px;
+    border-bottom: 1px solid #e2e2e2;
+    background-color: #409eff;
+    color: #fff;
+    border-radius: 2px 2px 0 0;
+}
+.content-machine-box {
+	display: flex;
+	align-items: center;
+	flex-direction: row;
+    flex-wrap: nowrap;
+    align-content: center;
+    justify-content: flex-start;
+    background-color: rgba(59, 142, 142, .06);
+    border-radius: 2px;
+}
+.content-machine-img {
+	margin: 14px;
+    padding: 2px;
+    border: 1px solid #e8e8e8;
+    width: 148px;
+    height: 145px;
+    justify-content: center;
+}
+.content-machine-img img {
+    width: 135px;
+    height: 135px;
+}
+.content-machine-detail {
+    display: flex;
+    width: calc(100% - 210px);
+    flex-direction: column;
+    align-items: flex-start;
+    align-content: flex-start;
+    flex-wrap: nowrap;
+}
+.content-machine-name {
+    margin-bottom: 12px;
+    font-size: 24px;
+    font-weight: 700;
+}
+.collect-info-panel {
+    background-color: rgba(59, 142, 142, .06);
+    padding: 8px;
+    padding-top: 0;
+}
+.fact-analysis-realtim {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    box-sizing: border-box;
+    background: #fff;
+}
+.fact-analysis-card {
+    border-radius: 2px;
+    box-sizing: border-box;
+    display: flex;
+    margin: 8px;
+}
+.fact-analysis-card .card-name {
+    width: 98px;
+    height: 68px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+}
+.fact-analysis-card .card-value {
+    min-width: 118px;
+    max-width: 396px;
+    align-items: center;
+    padding: 0 8px;
+    overflow: hidden;
+    word-break: break-all;
+}
+.wcs-main {
+	display: flex;
+}
+.wcs-main > div {
+	padding: 6px;
+	box-shadow: 2px 3px 10px rgba(0,0,0,.16);
+}
+.wcs-main > div:nth-child(1) {
+	width: 50%;
+	margin-right: 4px;
+}
+.wcs-main > div:nth-child(2) {
+	flex:1;
+}
+.alarm-title {
+	padding-bottom: 8px;
+	font-size: 14px;
+}
+.wimi-empty {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    border-radius: 2px;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+}
+.empty-description {
+    margin-bottom: 20px;
+    font-size: 14px;
+    color: #5e6d82;
+    margin-top: -16px;
+    line-height: 28px;
+}
+.bottom-panel {
+    margin-top: 8px;
+    min-height: 300px;
+}
+.content-panel {
+    height: 100%;
+    box-shadow: 2px 3px 10px rgba(0,0,0,.16);
+}
+.panel-title {
+    font-size: 16px;
+    box-sizing: border-box;
+    padding: 12px 24px;
+    width: 100%;
+    position: relative;
+    color: #333;
+    font-weight: 700;
+}
+.bottom-panel-chart {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-content: flex-start;
+    align-items: flex-start;
+    padding: 8px;
+    padding-top: 0;
+    box-sizing: border-box;
+}
+.panel-content {
+    width: 100%;
+    height: calc(100% - 45px);
+}
+.panel-content-gant, .panel-content-table {
+    width: 100%;
+}
+.gant {
+    box-sizing: border-box;
+    padding: 8px;
+}
+.status {
+    display: flex;
+    align-items: start;
+    flex-direction: column;
+    justify-content: start;
+    margin: 8px 0;
+    position: relative;
+	width: 100%;
+	font-size: 16px;
+	cursor: pointer;
+}
+.feed-button {
+	position: absolute;
+    right: 10px;
+    top: -2px;
+    color: #3b8e8e;
+    cursor: pointer;
+}
+.status-wrap.align-left, .status-wrap:first-child {
+    padding-left: 24px;
+    margin-bottom: 8px;
+}
+.status-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: start;
+}
+.collect-status {
+    color: #3b8e8e;
+    margin-right: 16px;
+	font-size: 14px;
+}
+.status-box {
+    margin: 0 8px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+.status-color {
+    width: 40px;
+    height: 15px;
+    border-radius: 2px;
+    margin-right: 8px;
+}
+.status-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: start;
+}
+.status-wrap .status-con {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+}
+.status-wrap /deep/ .el-checkbox.el-checkbox--large {
+    color: #3b8e8e;
+}
 </style>
\ No newline at end of file

--
Gitblit v1.9.3