From dcc4992bd51e9ee4a97099cd3a15085f7e247f23 Mon Sep 17 00:00:00 2001 From: gaoshp <291585735@qq.com> Date: 星期日, 03 十一月 2024 20:21:41 +0800 Subject: [PATCH] update --- src/views/mdc/status-record.vue | 874 +++++++++++++++++++++++++-------------------------------- 1 files changed, 386 insertions(+), 488 deletions(-) diff --git a/src/views/mdc/status-record.vue b/src/views/mdc/status-record.vue index 78f83ff..30c9383 100644 --- a/src/views/mdc/status-record.vue +++ b/src/views/mdc/status-record.vue @@ -1,89 +1,131 @@ +<!-- + * @Author: lzhe lzhe@example.com + * @Date: 2024-04-26 09:36:18 + * @LastEditors: lzhe lzhe@example.com + * @LastEditTime: 2024-09-19 10:11:58 + * @FilePath: /smart-web/src/views/mdc/status-record.vue + * @Description: 杩欐槸榛樿璁剧疆,璇疯缃甡customMade`, 鎵撳紑koroFileHeader鏌ョ湅閰嶇疆 杩涜璁剧疆: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE +--> <template> - <div class="aposcope-main"> - <div class="aposcope-left"> - <div class="left-title">鏌ヨ鏉′欢</div> - <div class="left-title-col">鏃ユ湡</div> - <el-date-picker v-model="time" type="daterange" :shortcuts="shortcuts" range-separator="-" size="small" style="width: 100%;" value-format="YYYY-MM-DD"/> - <div class="left-title-col">宸ヤ綅</div> - <div class="MYTree"> - <MYTree v-model="treeChecked" show-checkbox class="MYTree-content"></MYTree> - </div> - <div class="footer"> - <el-button @click="query" type="primary">鏌ヨ</el-button> - <el-button>瀵煎嚭</el-button> - </div> - </div> - <div class="aposcope-right"> - <el-tabs tab-position="top" v-model="activeName" type="card"> - <el-tab-pane label="鎸夋棩鏈熸煡鐪�" name="shift"> - <el-button-group> - <el-button @click="btnListActive = item.id" :type="btnListActive == item.id ? 'primary' : ''" v-for="item in btnList" :key="item.id" size="small">{{item.title }}</el-button> - </el-button-group> - <div class="status"> - <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> + <el-main style="height: 100%;"> + <el-card shadow="never" style="height: 100%;" body-style="height: 100%;padding: 0;"> + <el-container style="height: 100%;"> + <el-aside width="300px" style="height: 100%;"> + <el-container> + <div class="left-title">鏌ヨ鏉′欢</div> + <el-main style="padding: 20px;"> + <div class="left-title-col">鏃ユ湡</div> + <el-date-picker v-model="time" type="daterange" :shortcuts="shortcuts" range-separator="-" size="small" style="width: 100%;" value-format="YYYY-MM-DD"/> + <div class="left-title-col">宸ヤ綅</div> + <div class="MYTree"> + <MYTree getAll v-model="treeChecked" show-checkbox class="MYTree-content"></MYTree> </div> - </div> - </div> - <div> - <div id="record" style="width: 100%;height:500px;"></div> - </div> - <div class="pagination"> - <el-pagination layout="prev, pager, next" :total="total" :default-page-size="6"/> - </div> - </el-tab-pane> - <el-tab-pane label="鎸夊伐浣嶆煡鐪�" name="time"> - 鎸夊伐浣嶆煡鐪� - </el-tab-pane> - </el-tabs> - </div> - </div> + </el-main> + <el-footer> + <el-button @click="query" type="primary">鏌ヨ</el-button> + <el-button @click="exportData">瀵煎嚭</el-button> + </el-footer> + </el-container> + </el-aside> + <el-container> + <el-main> + <el-tabs tab-position="top" v-model="activeName" type="card" @tab-change="tabChange"> + <el-tab-pane label="鎸夋棩鏈熸煡鐪�" name="shift"> + <el-button-group> + <el-button @click="changeTab(item)" :type="btnListActive == item.id ? 'primary' : ''" v-for="item in btnList" :key="item.id" size="small">{{item.title }}</el-button> + </el-button-group> + <div class="status"> + <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="humanFeedback" label="浜哄伐鍙嶉鐘舵��" size="large" @change="humanFeedbackChange" /> + <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> + <!-- collectionstatus 鍙嶉鐘舵�� + date 鏃ユ湡 + workstationInfoList 宸ヤ綅list --> + <record-charts-by-date :achievements="allwcs" :date="date" :workstationInfoList="workstationInfoList" v-if="date != ''" ref="chart01" :humanFeedback="humanFeedback"></record-charts-by-date> + </el-tab-pane> + <el-tab-pane label="鎸夊伐浣嶆煡鐪�" name="time"> + <div class="fact-analysis-realtim"> + <div class="wimi-empty" style="background-color: rgb(255, 255, 255);" v-show="isshowempty"> + <div class="empty-description"> + <div>鏆傛棤鏁版嵁</div> + </div> + </div> + <div v-show="!isshowempty"> + <el-button-group> + <el-button @click="changeTabGongwei(item)" :type="btnGongweiListActive == item.id ? 'primary' : ''" v-for="item in btnGongweiList" :key="item.id" size="small">{{item.name }}</el-button> + </el-button-group> + <div class="status"> + <div class="status-wrap align-left"> + <div class="feed-button" @click="table_edit">鐘舵�佸弽棣�</div> + <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="humanFeedback" 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> + <!-- setWork 鍏ュ弬 --> + <record-charts-by-workstation :setWork="setWork" :select="workSelect" :achievements="allwcs" ref="chart02"></record-charts-by-workstation> + </div> + </div> + <save-dialog v-if="dialog.save" ref="saveDialog" @success="addfeedbackSuccess" :workstationId="lastLevelId" @closed="dialog.save=false"></save-dialog> + </el-tab-pane> + </el-tabs> + </el-main> + </el-container> + </el-container> + </el-card> + </el-main> </template> <script> +import saveDialog from './add-station-status' import moment from 'moment'; -import MYTree from './MYTree.vue' -import Shift from './components/Shift.vue' -import Time from './components/Time.vue' -import * as echarts from 'echarts'; +import MYTree from './MYTree.vue'; +import recordChartsByDate from './components/recordChartsByDate.vue'; +import recordChartsByWorkstation from './components/recordChartsByWorkstation.vue'; export default { components: { - time: "", MYTree, - Shift, - Time + recordChartsByDate, + recordChartsByWorkstation, + saveDialog }, watch: { - activeName() { - // this.$nextTick(() => { - // this.query() - // }) - }, - btnListActive(val) { - // this.query({ - // ...this.params, - // startDate: val, - // endDate: val - // }) - // this.queryChart({ - // ...this.params, - // startDate: val, - // endDate: val - // }) + treeChecked(select) { + var arr = []; + select.forEach(item=> { + arr.push({id: item.id,name: item.code}) + }) + this.select = arr; } }, data() { return { + isshowempty: true, + dialog: { + save: false + }, + workSelect: [], + select: [], workstationInfoList: [], - checked1: true, + date: "", + humanFeedback: true, btnListActive: '', + btnGongweiListActive: "", btnList: [], + btnGongweiList: [], timeBtn: "", shortcuts: [ { @@ -119,135 +161,106 @@ treeChecked: [], achievements: [], collectionstatus: [], - current: "1", - size: "6", - total: 0, - recordOptionLog: { - tooltip: { - trigger: 'axis', - axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥 - type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow' - }, - formatter: function (params) { - var tar; - if (params[1].value != '-') { - tar = params[1]; - } - else { - tar = params[0]; - } - return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value; - } - }, - grid: { - top: 10, - left: 70, - bottom: 120 - }, - yAxis: { - type: 'category', - axisLabel: { - formatter: function (value) { - return value + "\n" + '{a|鐘舵�佸弽棣坿'; - }, - rich: { - a: { - color: '#409eff', - cursor: 'pointer', - fontSize: '12px' - } - } - }, - data: ['123','345','789','888','666','222'] - }, - xAxis: { - type: 'value', - min: 0, - max: 1440, // 鍗曚綅鍒嗛挓 - interval: 1440/6, //姣忛殧澶氬皯鍒嗛挓鏄剧ず涓�涓埢搴� - axisLabel: { - formatter: (value)=> { - if(value == 0) { - return "00:00:00"; - }else if(value == 240) { - return "04:00:00"; - }else if(value == 480) { - return "08:00:00"; - }else if(value == 720) { - return "12:00:00"; - }else if(value == 960) { - return "16:00:00"; - }else if(value == 1200) { - return "18:00:00"; - }else if(value == 1440) { - return "00:00:00"; - } - } - } - }, - series: [ - { - name: '杈呭姪', - type: 'bar', - stack: 'grouup', - itemStyle: { - borderColor: 'transparent', - color: 'transparent' - }, - emphasis: { - itemStyle: { - borderColor: 'transparent', - color: 'transparent' - } - }, - data: [{value:100}, {value:0}, {value:0}, {value:240}, {value:360}, {value:540}] //浠庝粈涔堟椂鍊欏紑濮嬬殑 - //data: [] - }, - { - name: 'time', - type: 'bar', - stack: 'grouup', - data: [{value: 200}, {value: null}, {value: null}, {value:1200}, {value:240}, {value:900}] //鏁板�兼槸鍑狅紝濡�(20锛屽氨鏄粠4寮�濮嬶紝20鏍兼暟鎹�) - //data: [] - }, - { - name: '杈呭姪', - type: 'bar', - stack: 'grouup', - itemStyle: { - borderColor: 'transparent', - color: 'transparent' - }, - emphasis: { - itemStyle: { - borderColor: 'transparent', - color: 'transparent' - } - }, - data: [{value:400}, {value:null}, {value:null}, {value:null}, {value:10}, {value:null}] //浠庝粈涔堟椂鍊欏紑濮嬬殑 - //data: [] - }, - { - name: 'time', - type: 'bar', - stack: 'grouup', - data: [{value: 45}, {value: null}, {value: null}, {value:null}, {value:32}, {value:null}] //鏁板�兼槸鍑狅紝濡�(20锛屽氨鏄粠4寮�濮嬶紝20鏍兼暟鎹�) - //data: [] - } - ] - } + workstationId: "", + setWork: {}, + allwcs: [] } }, created() { }, mounted() { - this.getCharts(); - //this.init(); + this.date = moment().format('YYYY-MM-DD'); + this.init(); }, methods: { + humanFeedbackChange(falg) { + this.$refs.chart01.getCharts(); + }, + addfeedbackSuccess() { + var workstationName = ""; + this.btnGongweiList.forEach(item=> { + if(item.id == this.btnGongweiListActive) { + workstationName = item.name; + } + }) + this.setWork = { + endDate: this.time[1], + startDate: this.time[0], + humanFeedback: this.humanFeedback, + machineFeedback: true, + workstationId: this.lastLevelId, + workstationName: workstationName + } + }, + table_edit(){ + this.dialog.save = true + this.$nextTick(() => { + this.$refs.saveDialog.open('edit').setData(this.lastLevelId); + }) + }, + tabChange(val) { + if(val == "shift") { //鎸夋棩鏈熸煡鐪� + this.$refs.chart01.getCharts(); + }else if(val == "time") { //鎸夊伐浣嶆煡鐪� + if(this.btnGongweiList.length != 0) { //鏈夐�夊伐浣嶆墠鑳藉睍绀哄伐浣� + this.btnGongweiListActive = this.btnGongweiList[0].id; //宸ヤ綅 + this.lastLevelId = this.btnGongweiListActive; + this.setWork = { //宸ヤ綅 + endDate: this.time[1], + startDate: this.time[0], + humanFeedback: this.humanFeedback, + machineFeedback: true, + workstationId: this.select[0].id, + workstationName: this.btnGongweiList[0].name + } + this.workSelect = this.select; + this.$refs.chart02.getCharts(); + } + } + }, + exportData() { //瀵煎嚭 + var obj = { + endTime: this.time[1], + startTime: this.time[0], + workstationInfoList: this.workstationInfoList + } + this.$HTTP.post(`/api/mdc/status-record/excel/export`,obj).then(res=> { + if(res.code == 200) { + window.open(res.data.link); + } + }) + }, + changeTab(item) { + this.btnListActive = item.id; + this.date = item.id; + this.$nextTick(()=> { + this.$refs.chart01.getCharts(); + }) + }, + changeTabGongwei(item) { //鎸夊伐浣嶆煡璇� + this.btnGongweiListActive = item.id; + this.lastLevelId = this.btnGongweiListActive; + var workstationName = ""; + this.btnGongweiList.forEach(item=> { + if(item.id == this.btnGongweiListActive) { + workstationName = item.name; + } + }) + this.setWork = { + endDate: this.time[1], + startDate: this.time[0], + humanFeedback: this.humanFeedback, + machineFeedback: true, + workstationId: item.id, + workstationName: workstationName + } + this.$nextTick(()=> { + this.$refs.chart02.getCharts(); + }) + }, getachievements() { //鐝鐘舵�佽褰曢噰闆嗙姸鎬� - this.$HTTP.get(`/api/blade-cps/global_wcs/wcs-achievements`).then(res=> { + this.$HTTP.get(`/api/smis/global_wcs/wcs-achievements`).then(res=> { if(res.code == 200) { var achievements = [];//閲囬泦鐘舵�� var collectionstatus = []; //浜哄伐鍙嶉鐘舵�� @@ -261,327 +274,212 @@ }) this.achievements = achievements; this.collectionstatus = collectionstatus; + this.allwcs = res.data; } }) }, getTime(data) { - this.$HTTP.post('/api/blade-mdc/efficiency-analysis/interval', { - ...data - }).then(res => { - if (res.code === 200) { - var today = moment().format('YYYY-MM-DD'); - var yesterday = moment().subtract(1, 'days').format('YYYY-MM-DD'); - res.data.forEach(item=> { - if(item.title == today) { - item.title = "浠婂ぉ"; - } - if(item.title == yesterday) { - item.title = "鏄ㄥぉ"; - } - }) - this.btnList = res.data.reverse(); - this.btnListActive = res?.data?.[0]?.id - } - }) - }, - getCharts() { - var obj = { - //date: this.time[1], - date: "2024-04-24", - humanFeedback: true, - machineFeedback: true, - workstationInfoList: this.workstationInfoList - } - // var recordDom = document.getElementById('record'); - // var myChart = echarts.init(recordDom); - // myChart.setOption(this.recordOptionLog); - // return; - this.$HTTP.post(`/api/blade-mdc/status-record/status-record-by-date?current=${this.current}&size=${this.size}`,obj).then(res => { - if (res.code === 200) { - var yAxis = []; //璁$畻y杞存暟鎹� - var seriesData = []; //鏄剧ず鐨勬暟鎹� - res.data.records.forEach(item=> { - yAxis.push(item.workstationInfo.name); - //璁$畻寮�濮嬫椂闂达紝鏄剧ず鏃堕棿 - item.statusRecordList.forEach(item1=> { - var endTime = item1.endTime; - var startTime = item1.startTime; - var initstart = item1.startTime.split(" ")[0]; - item1.startMinutes = moment(item1.startTime).diff(moment(initstart + " 00:00:00"), 'minutes') //浠庝粈涔堟椂鍊欏紑濮� - item1.diff = moment(item1.endTime).diff(moment(item1.startTime), 'minutes') //寮�濮嬩簡澶氫箙 + return new Promise(resolve=> { + this.$HTTP.post('/api/mdc/efficiency-analysis/interval', {...data}).then(res => { + if (res.code === 200) { + var today = moment().format('YYYY-MM-DD'); + var yesterday = moment().subtract(1, 'days').format('YYYY-MM-DD'); + res.data.forEach(item=> { + if(item.title == today) { + item.title = "浠婂ぉ"; + } + if(item.title == yesterday) { + item.title = "鏄ㄥぉ"; + } }) - // var data1 = []; - // var data2 = []; - //璁$畻鏄剧ず鐨勬暟鎹� - // item.statusRecordList.forEach(item2=> { - // seriesData.push({ - // name: '杈呭姪', - // type: 'bar', - // stack: 'grouup', - // itemStyle: { - // borderColor: 'transparent', - // color: 'transparent' - // }, - // emphasis: { - // itemStyle: { - // borderColor: 'transparent', - // color: 'transparent' - // } - // }, - // data: [{value:item.startMinutes}, {value:0}, {value:0}, {value:240}, {value:360}, {value:540}] //浠庝粈涔堟椂鍊欏紑濮嬬殑 - // }) - // arr.push({ - // name: 'time', - // type: 'bar', - // stack: 'grouup', - // data: [{value: item.diff}, {value: null}, {value: null}, {value:1200}, {value:240}, {value:900}] //鏁板�兼槸鍑狅紝濡�(20锛屽氨鏄粠4寮�濮嬶紝20鏍兼暟鎹�) - // }) - //}) - }) - //demo - // var data = []; - // var vb = a[0].statusRecordList; - // vb.forEach((item,index)=> { - // if(index == 0) { - // data.push({value: item.startMinutes}); //骞曞竷 - // }else { - // data.push({value: item.startMinutes - (vb[index-1].startMinutes+vb[index-1].diff)}); //骞曞竷 - // } - // data.push({value: item.diff}); //鍐呭 - // }) - // data; - //end - - var recordDom = document.getElementById('record'); - var myChart = echarts.init(recordDom); - this.recordOptionLog.yAxis.data = yAxis; //y杞存暟鎹� - var series0data = []; //浠庝粈涔堟椂鍊欏紑濮嬬殑 - var series1data = []; //鏁板�兼槸鍑狅紝濡�(20锛屽氨鏄粠4寮�濮嬶紝20鏍兼暟鎹�) - console.log(JSON.stringify(res.data.records)) - // res.data.records.forEach(item=> { - // item.statusRecordList.forEach(item1=> { - - // }) - // }) - - myChart.setOption(this.recordOptionLog); - // 妫�鏌ユ槸鍚﹀瓨鍦╥d涓�'parentNodeDom'鐨凞OM鍏冪礌,鏈夊氨鍏堝垹闄� - var parentNodeDom = document.getElementById('parentNodeDom'); - if (parentNodeDom) { - parentNodeDom.parentNode.removeChild(parentNodeDom); + this.btnList = res.data.reverse(); + this.btnListActive = res?.data?.[0]?.id + resolve(); } - this.domlocation(); //閲嶆柊娣诲姞锛岃绠椾綅缃� - this.total = res.data.total; - } + }) }) - }, - domlocation() { - var recordDom = document.getElementById('record'); - //娣诲姞dom锛屽畾浣� - var parentNodeDom = document.createElement('div'); - parentNodeDom.id="parentNodeDom"; - recordDom.appendChild(parentNodeDom); - for(var i=0;i<this.recordOptionLog.yAxis.data.length;i++) { - var dom = document.createElement('span'); - dom.className = "domSpan spanIndex" + i; - if(this.recordOptionLog.yAxis.data.length == 1) { - dom.style.top = 220 + "px"; //瀹氫綅top - } - if(this.recordOptionLog.yAxis.data.length == 2) { - if(i==0){ - dom.style.top = 325 + "px"; - }else if(i==1){ - dom.style.top = 116 + "px"; //瀹氫綅top - } - } - if(this.recordOptionLog.yAxis.data.length == 3) { - if(i==0){ - dom.style.top = 360 + "px"; - }else if(i==1){ - dom.style.top = 220 + "px"; //瀹氫綅top - }else if(i==2){ - dom.style.top = 80 + "px"; //瀹氫綅top - } - } - if(this.recordOptionLog.yAxis.data.length == 4) { - if(i==0){ - dom.style.top = 377 + "px"; - }else if(i==1){ - dom.style.top = 272 + "px"; //瀹氫綅top - }else if(i==2){ - dom.style.top = 168 + "px"; //瀹氫綅top - }else if(i==3){ - dom.style.top = 62 + "px"; //瀹氫綅top - } - } - if(this.recordOptionLog.yAxis.data.length == 5) { - if(i==0){ - dom.style.top = 387 + "px"; - }else if(i==1){ - dom.style.top = 303 + "px"; //瀹氫綅top - }else if(i==2){ - dom.style.top = 220 + "px"; //瀹氫綅top - }else if(i==3){ - dom.style.top = 135 + "px"; //瀹氫綅top - }else if(i==4){ - dom.style.top = 51 + "px"; //瀹氫綅top - } - } - if(this.recordOptionLog.yAxis.data.length == 6) { - if(i==0){ - dom.style.top = 348 + "px"; - }else if(i==1){ - dom.style.top = 287 + "px"; //瀹氫綅top - }else if(i==2){ - dom.style.top = 225 + "px"; //瀹氫綅top - }else if(i==3){ - dom.style.top = 163 + "px"; //瀹氫綅top - }else if(i==4){ - dom.style.top = 102 + "px"; //瀹氫綅top - }else if(i==5){ - dom.style.top = 40 + "px"; //瀹氫綅top - } - } - dom.style.left = recordDom.offsetLeft + "px"; //瀹氫綅left - parentNodeDom.appendChild(dom); - } }, init() { this.time = [moment().subtract(2, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]; this.getTime({endDate: this.time[1],startDate: this.time[0],statisticalMethod: 'SHIFT'}); //鏃ユ湡sort this.getachievements(); //閲囬泦鐘舵�乷r浜哄伐鍙嶉鐘舵�� - this.getCharts(); }, timeBtnChange() { }, query() { - this.getTime({endDate: this.time[1],startDate: this.time[0],statisticalMethod: 'SHIFT'}); - //this.getCharts(); - console.log(this.treeChecked,2) + this.getTime({endDate: this.time[1],startDate: this.time[0],statisticalMethod: 'SHIFT'}).then(()=> { + this.workstationInfoList = this.select; + this.btnGongweiList = this.select; //宸ヤ綅 + this.date = this.btnList[0].id; + this.$nextTick(()=> { //鎸夋棩鏈熸煡鐪� + this.$refs.chart01.getCharts(); + }) + //鎸夊伐浣嶆煡鐪� + if(this.btnGongweiList.length != 0) { //鏈夐�夊伐浣嶆墠鑳藉睍绀哄伐浣� + this.isshowempty = false; + this.btnGongweiListActive = this.btnGongweiList[0].id; //宸ヤ綅 + this.lastLevelId = this.btnGongweiListActive; + this.setWork = { //宸ヤ綅 + endDate: this.time[1], + startDate: this.time[0], + humanFeedback: this.humanFeedback, + machineFeedback: true, + workstationId: this.select[0].id, + workstationName: this.btnGongweiList[0].name + } + this.workSelect = this.select; + this.$nextTick(()=> { + this.$refs.chart02.getCharts(); + }) + } + }); } } } </script> <style scoped> -.aposcope-main { - display: flex; - min-height: 100%; - height: 100%; - overflow: hidden; - margin: 8px; -} -.aposcope-left { - position: relative; - width: 240px; - margin-right: 8px; - padding: 4px; - height: 100%; - background-color: #fff; - border-radius: 2px; - overflow: hidden; -} -.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; -} -.left-title-col { - margin-bottom: 8px; - font-size: 14px; - margin-top: 8px; -} -.footer { - padding: 0px 32px; - border-radius: 0 0 2px 2px; - background: #fff; - box-shadow: -1px 0 3px rgba(92, 92, 92, .16); - height: 48px; - display: flex; - align-items: center; - justify-content: center; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - padding: 0 10px; - box-sizing: border-box; - z-index: 99; -} -.MYTree { - height: calc(100% - 200px); - overflow: hidden; - overflow-y: auto; -} -.status { - display: flex; - align-items: start; - flex-direction: column; - justify-content: start; - margin: 20px 0 8px; - position: relative; - width: 100%; - font-size: 16px; - cursor: pointer; -} -.status-wrap.align-left, .status-wrap:first-child { - padding-left: 24px; -} -.status-wrap { - display: flex; - flex-wrap: wrap; - justify-content: start; -} -.collect-status { - color: #409eff; - 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 .status-con { - display: flex; - flex: 1; - flex-wrap: wrap; -} -.status-wrap /deep/ .el-checkbox.el-checkbox--large { - color: #3b8e8e; -} -.pagination { - text-align: right; - display: flex; - justify-content: end; -} -#record { - position: relative; -} -#record /deep/ .domSpan { - display: inline-block; - width: 70px; - height: 20px; - background: green; - position: absolute; - cursor: pointer; -} + .aposcope-main { + display: flex; + min-height: 100%; + margin: 8px; + } + .aposcope-left { + position: relative; + width: 240px; + margin-right: 8px; + padding: 4px; + height: 100%; + background-color: #fff; + border-radius: 2px; + overflow: hidden; + } + .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; + } + .left-title-col { + margin-bottom: 8px; + font-size: 14px; + margin-top: 8px; + } + .footer { + padding: 0px 32px; + border-radius: 0 0 2px 2px; + background: #fff; + box-shadow: -1px 0 3px rgba(92, 92, 92, .16); + height: 48px; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + padding: 0 10px; + box-sizing: border-box; + z-index: 99; + } + .MYTree { + height: 600px; + } + .MYTree-content { + height: 100%; + overflow: hidden; + overflow-y: auto; + } + .status { + display: flex; + align-items: start; + flex-direction: column; + justify-content: start; + margin: 20px 0 8px; + position: relative; + width: 100%; + font-size: 16px; + cursor: pointer; + } + .status-wrap.align-left, .status-wrap:first-child { + padding-left: 24px; + } + .status-wrap { + display: flex; + flex-wrap: wrap; + justify-content: start; + } + .collect-status { + color: #409eff; + 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 .status-con { + display: flex; + flex: 1; + flex-wrap: wrap; + } + .status-wrap /deep/ .el-checkbox.el-checkbox--large { + color: #409eff; + } + .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; + height: 500px; + } + .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; + } + .feed-button { + position: absolute; + right: 10px; + top: -2px; + color: #409eff; + cursor: pointer; + } + .aposcope-right /deep/ .el-tabs__content { + overflow: visible; + } </style> \ No newline at end of file -- Gitblit v1.9.3