<template>
|
<div class="main">
|
<!-- <div class="title vertical_middle">负载柜自动加载画面</div> -->
|
<div class="flex_contain">
|
<div class="item border-angle" v-for="(item, index) in list" :key="index">
|
<div class="item-inner">
|
<div class="item_title vertical_middle">{{item.dev_name}}<div class="btn-wrap"><div class="btn btn_export" @click="exportData(item)">数据导出</div></div></div>
|
<!-- 按钮组 -->
|
<div class="item_btn_grp">
|
<div class="vertical_middle">
|
<div class="btn" v-btn-confirm="handleConfirm" data-fn="startLoad" data-confirmTxt="启动加减载确认" :param="JSON.stringify(['CONTEXT.list[' + index + ']'])">启动加减载</div>
|
</div>
|
<div class="vertical_middle">
|
<div class="btn" v-btn-confirm="handleConfirm" data-fn="stopLoad" data-confirmTxt="停止加减载确认" :param="JSON.stringify(['CONTEXT.list[' + index + ']'])">停止加减载</div>
|
</div>
|
<div class="vertical_middle">
|
<div class="btn" v-btn-confirm="handleConfirm" data-fn="switchOff" data-confirmTxt="全部分闸确认" :param="JSON.stringify(['CONTEXT.list[' + index + ']'])">全部分闸</div>
|
</div>
|
</div>
|
<!-- 自动流程 -->
|
<div class="indicator_row">
|
<div class="label vertical_middle">自动流程</div>
|
<div class="indicator_grp">
|
<div v-for="index of 5" :key="index" class="wrap_indicator vertical_middle" :class="{'status_off': !item['FZ_autostate' + index], 'status_normal': item['FZ_autostate' + index]}"><div><span>{{index}}</span></div></div>
|
</div>
|
</div>
|
<!-- 数据 -->
|
<div class="data_contain">
|
<!-- 是否允许合闸 -->
|
<div class="row">
|
<div class="label vertical_middle">是否允许合闸</div>
|
<div class="data vertical_middle">
|
<div class="nowrap_indicator" :class="{'status_off': !item.allow_close, 'status_normal': item.allow_close}"></div>
|
</div>
|
</div>
|
<div class="row">
|
<div class="label vertical_middle">设定功率</div>
|
<div class="data editable txt_strong vertical_middle" title="点击修改" @click="setPower(item)">{{item.set_power}} kVA</div>
|
</div>
|
<div class="row">
|
<div class="label vertical_middle">间隔时间</div>
|
<div class="data editable txt_strong vertical_middle" title="点击修改" @click="setDelay(item)">{{item.interval_time}} (× 0.1s)</div>
|
</div>
|
<div class="row">
|
<div class="label vertical_middle">已输出功率</div>
|
<div class="data txt_strong vertical_middle">{{item.output_power}} kVA</div>
|
</div>
|
<div class="row">
|
<div class="label vertical_middle">电压</div>
|
<div class="data txt_strong vertical_middle">{{item.actual_mov}} V</div>
|
</div>
|
<div class="row">
|
<div class="label vertical_middle">电流</div>
|
<div class="data txt_strong vertical_middle">{{item.actual_curr}} A</div>
|
</div>
|
</div>
|
<!-- 状态 -->
|
<div class="item_status">
|
<div class="column" v-for="index of 2" :key="index">
|
<div class="sub_item" v-for="idx of 6" :key="idx">
|
<div class="cell vertical_middle" v-if="(index - 1) * 6 + idx <= item.FZ_button_num">KM{{(index - 1) * 6 + idx}}</div>
|
<div class="cell vertical_middle" v-else></div>
|
<div class="cell power txt_strong vertical_middle" v-if="(index - 1) * 6 + idx <= item.FZ_button_num">{{item['FZ_b' + ((index - 1) * 6 + idx) + '_power']}}kVA</div>
|
<div class="cell vertical_middle" v-else></div>
|
<div class="cell_indicator vertical_middle" v-if="(index - 1) * 6 + idx <= item.FZ_button_num"><div :class="{'status_off': !item['FZ_fw' + ((index - 1) * 6 + idx)], 'status_normal': item['FZ_fw' + ((index - 1) * 6 + idx)]}"></div></div>
|
<div class="cell_indicator vertical_middle" v-else></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="footer">
|
<div class="btn-grp">
|
<div class="btn" @click="goTo('/load/main')">主画面</div>
|
<div class="btn" @click="goTo('/load/manual')">手动加载</div>
|
<div class="btn">自动加载</div>
|
<div class="btn" @click="goTo('/load/burst')">突加突卸</div>
|
</div>
|
</div>
|
<!-- 弹窗 -->
|
<el-dialog class="el-dialog-center dialog-drag dialog-white" v-cloak title='修改设定功率'
|
:modal="false"
|
v-dialogDrag
|
:visible.sync="updateSetPower.show" width="3.2rem"
|
:close-on-click-modal='false'
|
@closed="updateSetPower.show = false">
|
<flex-layout>
|
<div class="color-black">
|
<el-form class="updateSetPower" ref="updateSetPower" label-position="right" label-width="180px" size="small" :rules="updateSetPower.rules" :model="updateSetPower.data">
|
<el-col :span="24">
|
<el-form-item label="设定功率(kVA 0~750)" prop="set_power">
|
<el-input v-model="updateSetPower.data.set_power"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-form>
|
</div>
|
<div slot="footer" class="color-black dialog-footer">
|
<el-button type="default" size="small" @click="updateSetPower.show = false">取 消</el-button>
|
<el-button type="primary" size="small" @click="editSetPowerOk">确 定</el-button>
|
</div>
|
</flex-layout>
|
</el-dialog>
|
<!-- 时间间隔弹窗 -->
|
<el-dialog class="el-dialog-center dialog-drag dialog-white" v-cloak title='修改时间间隔'
|
:modal="false"
|
v-dialogDrag
|
:visible.sync="updateDelay.show" width="3.2rem"
|
:close-on-click-modal='false'
|
@closed="updateDelay.show = false">
|
<flex-layout>
|
<div class="color-black">
|
<el-form class="updateDelay" ref="updateDelay" label-position="right" size="small" label-width="180px" :rules="updateDelay.rules" :model="updateDelay.data">
|
<el-col :span="24">
|
<el-form-item label="时间间隔(s 20的倍数)" prop="delay">
|
<el-input v-model="updateDelay.data.delay"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-form>
|
</div>
|
<div slot="footer" class="color-black dialog-footer">
|
<el-button type="default" size="small" @click="updateDelay.show = false">取 消</el-button>
|
<el-button type="primary" size="small" @click="updateDelayOk">确 定</el-button>
|
</div>
|
</flex-layout>
|
</el-dialog>
|
<!-- 按钮二次确认 -->
|
<el-dialog
|
:title="confirmTxt"
|
:visible.sync="confirmVisible"
|
width="300px">
|
<!-- <span>{{}}</span> -->
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="confirmVisible = false">取 消</el-button>
|
<el-button type="primary" @click="callBack">确 定</el-button>
|
</span>
|
</el-dialog>
|
<!-- 导出数据弹窗 -->
|
<el-dialog
|
title="数据导出"
|
:visible.sync="exportDialogVisible"
|
width="400px" >
|
<label class="pr_o6em">选择日期</label>
|
<el-date-picker
|
v-model="export_date"
|
value-format="yyyy-MM-dd"
|
type="date"
|
size="small"
|
:picker-options="pickerOptions"
|
placeholder="选择日期" >
|
</el-date-picker>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="exportDialogVisible = false">关 闭</el-button>
|
<el-button type="primary" @click="exportCsv">导 出</el-button>
|
</span>
|
</el-dialog>
|
<progress-load
|
:show="progress.show"
|
:percentage="progress.value"
|
:text="progress.text"></progress-load>
|
</div>
|
</template>
|
|
<script>
|
|
import FlexLayout from '@/components/FlexLayout'
|
import ProgressLoad from '@/components/ProgressLoad'
|
export default {
|
name: 'AutoLoad',
|
components: {
|
FlexLayout
|
,ProgressLoad
|
},
|
data () {
|
return {
|
progress: {
|
show: false,
|
value: 0,
|
text: '',
|
},
|
export_id: 0,
|
export_name: '',
|
exportDialogVisible: false,
|
export_date: new Date().format('yyyy-MM-dd'),
|
pickerOptions: {
|
disabledDate (data) {
|
return data && data.valueOf() > Date.now().valueOf() || data.valueOf() < Date.now().valueOf() - 1000 * 60 * 60 * 24 * 30;
|
}
|
},
|
confirmTxt: '',
|
confirmVisible: false,
|
cbFn: null,
|
cbParam: null,
|
timer: new this.$common.Timeout(),
|
info: [],
|
list: [],
|
updateSetPower: {
|
show: false,
|
data: {
|
set_power: '',
|
dev_id: '',
|
dev_name: '',
|
dev_ip: '',
|
num: 0
|
},
|
rules: {
|
set_power: [{
|
validator: (rule, value, callback) => {
|
// console.log(value);
|
if (!('' + value).trim()) {
|
callback(new Error('功率值必填'));
|
}
|
if (/[^0-9]/.test(value)) {
|
callback(new Error('功率值必须为数值'));
|
}
|
if (value < 0 || value > 750) {
|
callback(new Error('功率值应介于0~750之间'));
|
} else {
|
callback()
|
}
|
},
|
trigger: 'blur'
|
}]
|
}
|
},
|
updateDelay: {
|
show: false,
|
data: {
|
delay: '',
|
dev_id: '',
|
dev_name: '',
|
dev_ip: '',
|
num: 0
|
},
|
rules: {
|
delay: [{
|
validator: (rule, value, callback) => {
|
// console.log(value);
|
if (!('' + value).trim()) {
|
callback(new Error('时间间隔不能为空'));
|
}
|
if (/[^0-9]/.test(value)) {
|
callback(new Error('时间间隔必须为数值'));
|
}
|
if (value < 0 || value % 20) {
|
callback(new Error('时间间隔必须大于0且为20的倍数'));
|
} else {
|
callback()
|
}
|
},
|
trigger: 'blur'
|
}]
|
}
|
}
|
}
|
},
|
methods: {
|
goTo (path) {
|
this.$router.push({path});
|
}
|
,callBack () {
|
this.confirmVisible = false;
|
let cbParam = [];
|
this.cbParam.forEach((v) => {
|
if ('string' == typeof v && v.indexOf('CONTEXT') > -1) {
|
let arr = v.split('.');
|
if (arr.length > 2) {
|
console.warn('目前不支持深层属性参数');
|
}
|
let _param = arr[1];
|
if (_param.indexOf('[') > -1) {
|
const reg = /\[|\]/;
|
let _arr = _param.split(reg);
|
cbParam.push(this[_arr[0]][_arr[1]]);
|
} else {
|
cbParam.push(this[_param]);
|
}
|
// console.log(this[arr[1]], 99);
|
} else {
|
cbParam.push(v);
|
}
|
});
|
|
this[this.cbFn](...cbParam);
|
}
|
,handleConfirm (obj) {
|
// console.log(obj, 9090);
|
this.confirmTxt = obj.confirmTxt;
|
this.cbFn = obj.cbFn;
|
this.cbParam = obj.cbParam;
|
this.confirmVisible = true;
|
}
|
,getInfo () {
|
return this.$api.load.getInfo().then((res) => {
|
res = JSON.parse(res.data.result);
|
if (res.code) {
|
this.info = res.data;
|
}
|
});
|
}
|
// 全部分闸
|
,switchOff (obj) {
|
// 根据机柜信息构造查询条件
|
let searchParams = {
|
all_open: '1',
|
dev_name: obj.dev_name,
|
dev_id: obj.dev_id,
|
dev_ip: obj.dev_ip
|
};
|
// 查询后台
|
this.$api.load.allBtnControl(searchParams).then(res=>{
|
res = JSON.parse(res.data.result);
|
if(res.code) {
|
this.$message({
|
type: 'success',
|
message: res.msg
|
});
|
}else {
|
this.$message({
|
type: 'error',
|
message: res.msg
|
});
|
}
|
}).catch(error=>{
|
console.warn(error);
|
});
|
}
|
// 查询显示数据
|
,getStatus () {
|
this.$api.load.getAutoStatus().then((res) => {
|
let re = JSON.parse(res.data.result);
|
let list = [];
|
// console.log(re);
|
if (re.code) {
|
this.info.forEach((v, idx) => {
|
list[idx] = {};
|
for (let i = 0, j = re.data.length; i < j; i++) {
|
if (re.data[i].dev_id == v.dev_id) {
|
list[idx] = re.data[i];
|
list[idx]['dev_ip'] = v.dev_ip;
|
list[idx]['FZ_button_num'] = v.FZ_button_num;
|
break;
|
}
|
}
|
});
|
this.list = list;
|
}
|
});
|
}
|
// 设定功率
|
,setPower (obj) {
|
// console.log(obj);
|
this.updateSetPower.data.set_power = obj.set_power;
|
this.updateSetPower.data.dev_id = obj.dev_id;
|
this.updateSetPower.data.dev_ip = obj.dev_ip;
|
this.updateSetPower.data.dev_name = obj.dev_name;
|
this.updateSetPower.data.num = obj.FZ_button_num;
|
this.updateSetPower.show = true;
|
}
|
// 设定时间间隔
|
,setDelay (obj) {
|
// console.log(obj);
|
this.updateDelay.data.delay = obj.interval_time;
|
this.updateDelay.data.dev_id = obj.dev_id;
|
this.updateDelay.data.dev_name = obj.dev_name;
|
this.updateDelay.data.dev_ip = obj.dev_ip;
|
this.updateDelay.data.num = obj.FZ_button_num;
|
this.updateDelay.show = true;
|
}
|
,updateDelayOk () {
|
let param = {
|
interval_time: this.updateDelay.data.delay,
|
dev_id: this.updateDelay.data.dev_id,
|
dev_name: this.updateDelay.data.dev_name,
|
dev_ip: this.updateDelay.data.dev_ip,
|
num: this.updateDelay.data.num
|
};
|
this.$refs.updateDelay.validate((valid) => {
|
// console.log(valid);
|
if (valid) {
|
this.$api.load.updateDelay(param).then((res) => {
|
let re = JSON.parse(res.data.result);
|
// console.log(re, '======re');
|
if (re.code) {
|
this.$message({
|
type: 'success',
|
message: re.msg
|
});
|
this.updateDelay.show = false;
|
} else {
|
this.$message({
|
type: 'success',
|
message: re.msg
|
});
|
}
|
});
|
}
|
});
|
}
|
,editSetPowerOk () {
|
let param = {
|
set_power: this.updateSetPower.data.set_power,
|
dev_id: this.updateSetPower.data.dev_id,
|
dev_name: this.updateSetPower.data.dev_name,
|
dev_ip: this.updateSetPower.data.dev_ip,
|
num: this.updateSetPower.data.num
|
};
|
this.$refs.updateSetPower.validate((valid) => {
|
// console.log(valid);
|
if (valid) {
|
this.$api.load.updateSetPower(param).then((res) => {
|
let re = JSON.parse(res.data.result);
|
// console.log(re, '======re');
|
if (re.code) {
|
this.$message({
|
type: 'success',
|
message: re.msg
|
});
|
this.updateSetPower.show = false;
|
} else {
|
this.$message({
|
type: 'success',
|
message: re.msg
|
});
|
}
|
});
|
}
|
});
|
}
|
// 轮询
|
,loop () {
|
this.timer.start(() => {
|
this.getStatus();
|
this.timer.open();
|
}, 1000);
|
}
|
// 启动加减载
|
,startLoad(item) {
|
/*if (!item.allow_close) {
|
this.$message({
|
type: 'warning',
|
message: '当前机柜不允许合闸'
|
});
|
return false;
|
}*/
|
// 根据机柜信息构造查询条件
|
let searchParams = {
|
dev_id: item.dev_id,
|
dev_name: item.dev_name,
|
start_auto: 1,
|
dev_ip: item.dev_ip
|
};
|
// 请求后台
|
this.$api.load.autoLoad(searchParams).then(res=>{
|
res = JSON.parse(res.data.result);
|
if(res.code) {
|
this.$message({
|
type: 'success',
|
message: res.msg
|
});
|
}else {
|
this.$message({
|
type: 'error',
|
message: res.msg
|
});
|
}
|
}).catch(error=>{
|
console.warn(error);
|
});
|
}
|
// 停止加减载
|
,stopLoad(item) {
|
// 根据机柜信息构造查询条件
|
let searchParams = {
|
dev_id: item.dev_id,
|
dev_name: item.dev_name,
|
stop_auto: 1,
|
dev_ip: item.dev_ip
|
};
|
// 请求后台
|
this.$api.load.stopLoad(searchParams).then(res=>{
|
res = JSON.parse(res.data.result);
|
if(res.code) {
|
this.$message({
|
type: 'success',
|
message: res.msg
|
});
|
}else {
|
this.$message({
|
type: 'error',
|
message: res.msg
|
});
|
}
|
}).catch(error=>{
|
console.warn(error);
|
});
|
}
|
// 数据导出
|
,exportData (obj) {
|
// console.log('数据导出');
|
this.export_id = obj.dev_id;
|
this.export_name = obj.dev_name;
|
this.exportDialogVisible = true;
|
}
|
,getProgress () {
|
this.exportDialogVisible = false;
|
this.$api.common.getProgress().then((res) => {
|
res = JSON.parse(res.data.result);
|
let percentage = !res.data[0] ? 0 : Number(res.data[0].toFixed(0));
|
this.progress.value = percentage;
|
// console.log(res);
|
if(percentage == 0) {
|
this.progress.text="数据加载中...";
|
}else {
|
this.progress.text="文件下载中...";
|
}
|
|
if(res.data<100 && this.progress.show) {
|
setTimeout(this.getProgress, 50);
|
}else {
|
this.progress.value = 100;
|
}
|
});
|
}
|
,exportCsv () {
|
let param = {
|
dev_name: this.export_name.replace(/#/g, '号'),
|
dev_id: this.export_id,
|
export_num: 1,
|
table_name: this.export_date.replace(/-/g, '_'),
|
record_time: this.export_date + " 00:00:00"
|
};
|
// 显示进度条
|
this.progress.show = true;
|
// 请求后台
|
this.$api.common.clearProgress().then(() => {
|
this.getProgress();
|
this.$api.common.download(param).then((res) => {
|
res = JSON.parse(res.data.result);
|
// console.log(res, 'download res');
|
if(res.code == 1) {
|
// 关闭进度条
|
this.progress.show = false;
|
this.progress.value = 0;
|
let data = res.data[0];
|
const link = document.createElement("a");
|
link.href = encodeURI(this.$config.url + 'tomcat7_csv/' + data.fileName);
|
link.download = data.fileName;
|
document.body.appendChild(link);
|
link.click();
|
document.body.removeChild(link);
|
setTimeout(()=>{
|
// 关闭进度条
|
this.progress.show = false;
|
this.progress.value = 0;
|
}, 1000);
|
}else {
|
// 关闭进度条
|
this.progress.show = false;
|
this.progress.value = 0;
|
this.$layer.msg('生成文件失败！');
|
}
|
}).catch(error=>{
|
// 关闭进度条
|
this.progress.show = false;
|
this.progress.value = 0;
|
this.$layer.msg('生成文件失败！');
|
console.warn(error);
|
});
|
});
|
}
|
},
|
mounted () {
|
this.getInfo().then(() => {
|
this.loop();
|
});
|
},
|
destroyed () {
|
this.timer.stop();
|
}
|
|
}
|
</script>
|
<style scoped>
|
.main {
|
margin: 0;
|
padding: 0 0 26px 0;
|
width: 100%;
|
height: 100%;
|
display: -webkit-flex;
|
display: flex;
|
flex-direction: column;
|
|
/*background: radial-gradient(circle, rgba(0, 0, 20, .1) 30%,transparent 0) 0 0, radial-gradient(circle, rgba(0, 0, 200, .1) 30%,transparent 0) 10px 10px;
|
background-size: 20px 20px;*/
|
}
|
.title {
|
height: 60px;
|
flex-shrink: 0;
|
text-align: center;
|
}
|
.flex_contain {
|
flex: auto;
|
display: -webkit-flex;
|
display: flex;
|
padding: 0 10px;
|
}
|
.vertical_middle {
|
display: -webkit-flex;
|
display: flex;
|
/*flex-direction: column;*/
|
justify-content: center;
|
align-items: center;
|
}
|
/*.trans_center {
|
position: relative;
|
top: 50%;
|
left: 50%;
|
-webkit-transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
}*/
|
.item {
|
flex: auto;
|
margin: 8px;
|
/*border: 2px #fff solid;*/
|
/*color: #6963bd;*/
|
font-size: .16rem;
|
background: linear-gradient(0deg, rgba(0, 247, 249, .3) 0, rgba(0, 247, 249, .1) 50%, rgba(0, 247, 249, .3) 100%);
|
/*padding: 14px;*/
|
position: relative;
|
}
|
.item-inner {
|
position: absolute;
|
left: 14px;
|
right: 14px;
|
top: 14px;
|
bottom: 14px;
|
border: 1px #00f7f9 solid;
|
display: -webkit-flex;
|
display: flex;
|
flex-direction: column;
|
text-align: center;
|
|
}
|
.item_title {
|
justify-content: flex-start;
|
border-bottom: 1px #00f7f9 solid;
|
flex: auto;
|
text-indent: .4em;
|
}
|
.btn-wrap {
|
flex: 1;
|
text-align: center;
|
}
|
.item_btn_grp {
|
flex: auto;
|
display: -webkit-flex;
|
display: flex;
|
justify-content: space-around;
|
border-bottom: 1px #00f7f9 solid;
|
}
|
.item_btn_grp > div {
|
flex: auto;
|
padding: 0 10px;
|
}
|
.indicator_row {
|
flex: 1.5 1.5 auto;
|
border-bottom: 1px #083458 solid;
|
display: -webkit-flex;
|
display: flex;
|
/*flex-direction: column;*/
|
}
|
.indicator_row .row {
|
flex: auto;
|
display: -webkit-flex;
|
display: flex;
|
}
|
.indicator_row .label {
|
border-right: 1px #00f7f9 solid;
|
/*width: 80px;*/
|
flex: 2.2;
|
justify-content: flex-start;
|
text-indent: .4em;
|
/*flex-shrink: 0;*/
|
}
|
.indicator_row .data {
|
flex: 4.2;
|
padding-right: 1px;
|
}
|
.indicator_grp {
|
flex: 4.2;
|
padding-right: 1px;
|
display: -webkit-flex;
|
display: flex;
|
/*padding: 0 10px;*/
|
justify-content: space-around;
|
}
|
.indicator_grp .indicator {
|
/*flex: auto;*/
|
}
|
.indicator_grp .wrap_indicator div {
|
position: relative;
|
/*margin-top: 4px;*/
|
/* height: 18px;
|
width: 18px;
|
-webkit-border-radius: 50%;
|
border-radius: 50%; */
|
top: 8px;
|
}
|
/* .nowrap_indicator {
|
width: 18px;
|
height: 18px;
|
-webkit-border-radius: 50%;
|
border-radius: 50%;
|
} */
|
.cell_indicator {
|
text-align: center;
|
}
|
/* .cell_indicator div {
|
width: 18px;
|
height: 18px;
|
-webkit-border-radius: 50%;
|
border-radius: 50%;
|
display: inline-block;
|
} */
|
.indicator_grp .wrap_indicator div span {
|
position: absolute;
|
left: 50%;
|
top: 0;
|
-webkit-transform: translate(-50%, -100%);
|
transform: translate(-50%, -100%);
|
}
|
.data_contain {
|
flex: 5 5 auto;
|
display: -webkit-flex;
|
display: flex;
|
flex-direction: column;
|
}
|
.data_contain .row {
|
flex: auto;
|
/*border-bottom: 1px #fff solid;*/
|
display: -webkit-flex;
|
display: flex;
|
}
|
.data_contain .data {
|
flex: 4.2;
|
padding-right: 1px;
|
}
|
.data_contain .label {
|
flex: 2.2;
|
justify-content: flex-start;
|
text-indent: .4em;
|
border-right: 1px #00f7f9 solid;
|
}
|
.item_status {
|
font-size: .16rem;
|
flex: 5 5 auto;
|
display: -webkit-flex;
|
display: flex;
|
}
|
.item_status .column {
|
flex: 1;
|
display: -webkit-flex;
|
display: flex;
|
flex-direction: column;
|
}
|
.item_status .sub_item {
|
flex: 1;
|
display: -webkit-flex;
|
display: flex;
|
border-bottom: 1px #083458 solid;
|
}
|
.item_status .sub_item:last-of-type {
|
border-bottom: 0 none;
|
}
|
.item_status .cell {
|
flex: 1;
|
border-right: 1px #00f7f9 solid;
|
}
|
.item_status .cell:nth-of-type(2) {
|
flex: 1.2;
|
justify-content: flex-start;
|
text-indent: .4em;
|
}
|
.item_status .cell_indicator {
|
flex: 1;
|
border-right: 1px #00f7f9 solid;
|
}
|
.item_status .column:last-of-type .cell_indicator {
|
border: 0 none;
|
}
|
.footer {
|
height: 58px;
|
/*background: rgba(0, 0, 0, .3);*/
|
flex-shrink: 0;
|
display: -webkit-flex;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
}
|
.footer .btn-grp {
|
display: -webkit-flex;
|
display: flex;
|
|
justify-content: space-around;
|
padding: 0 18%;
|
}
|
.btn {
|
display: inline-block;
|
background: #f69f41;
|
color: #041b3f;
|
width: 6em;
|
height: 30px;
|
line-height: 30px;
|
-webkit-border-radius: 4px;
|
border-radius: 4px;
|
}
|
.footer .btn-grp .btn {
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
-webkit-border-radius: 4px;
|
border-radius: 4px;
|
background: #90ed7d;
|
color: #041b3f;
|
}
|
.updateDelay,
|
.updateSetPower {
|
padding: .1rem;
|
}
|
.updateDelay >>> label,
|
.updateSetPower >>> label {
|
font-size: 16px;
|
font-weight: bold;
|
}
|
.dialog-footer {
|
text-align: right;
|
padding: .1rem;
|
}
|
.editable {
|
cursor: pointer;
|
}
|
.editable:hover {
|
text-decoration: underline;
|
font-weight: bolder;
|
}
|
.btn_3d.btn_export {
|
margin-left: 1em;
|
}
|
.data_contain .row,
|
.bdb {
|
border-bottom: 1px solid #083458;
|
}
|
.data_contain .row:last-child {
|
border-bottom: 1px solid #00f7f9;
|
}
|
.item_title,
|
.indicator_row,
|
.data_contain .row:nth-child(2n),
|
.sub_item:nth-child(2n) {
|
background: rgba(0, 247, 249, .1);
|
}
|
.cell.power {
|
font-weight: normal;
|
font-size: .16rem;
|
}
|
</style>
|
