<template>
|
<div class="main">
|
<!-- list -->
|
<div class="list">
|
<div class="list-title">
|
<div class="">设备列表</div>
|
</div>
|
<div class="list-filter">
|
<el-form size="mini" class="el-normal el-form-quiet" :inline="true" label-width="4em">
|
<el-form-item label="搜索">
|
<el-input v-model="list_keyword" required placeholder="输入关键字过滤" @input="search"></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="list-content posR">
|
<div class="posA_full">
|
<div class="inner">
|
<!-- :props="defaultProps" -->
|
<tree-item
|
v-for="(data, key) in list" :key="key"
|
:tree-data="data"
|
:level=0
|
@leaf-click="selectDev"></tree-item>
|
<!-- 无数据 -->
|
<div v-if="!list.length" class="empty-list">暂无数据</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="page-content">
|
<div class="page-banner tac">
|
<div class="f_right d_flex">
|
<div class="btn-grp" v-show="!showTable">
|
|
<div class="btn_3d" :class="{'disabled': prevDisabled}" @click="prevGrp">上一组</div>
|
<div class="btn_3d" :class="{'disabled': nextDisabled}" @click="nextGrp">下一组</div>
|
<div class="btn_3d" @click="showGOptions">图表选项</div>
|
</div>
|
<!-- <div class="btn_3d" @click="toggle">显示{{showTable ? '图表' : '表格'}}</div> -->
|
</div>
|
<div class="f_left">
|
<el-form :inline="true" class="el-normal el-form-search el-form-quiet" :show-message="false" size="small">
|
<el-form-item label="时间段">
|
<el-date-picker type="datetime" size="mini" placeholder="选择日期" :disabled="!cur_devid" :clearable="false" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" @focus="selectDate" @change="startChanged" v-model="time_start"></el-date-picker> 至
|
<el-date-picker type="datetime" size="mini" placeholder="选择日期" :disabled="!cur_devid" :clearable="false" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" @focus="selectDate" @change="endChanged" v-model="time_end"></el-date-picker>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="btn-grp f_left">
|
<div class="btn_3d" :class="{'disabled': !cur_devid || !this.date_range[0]}" @click="searchHis">查询</div>
|
<div class="btn_3d" :class="{'disabled': !cur_devid || !this.date_range[0]}" @click="exportCSV">导出</div>
|
</div>
|
<div class="content-title">{{cur_devname}}</div>
|
</div>
|
<div class="wraper">
|
<div class="container" :class="{'showTable': showTable}">
|
<div class="wrap-graph">
|
<line-chart-mul id="G_linechart" ref="G_linechart"
|
title="我是标题"
|
height="100%"
|
:max-size='true'
|
:show-xaxis="true"
|
:categoryLen="categoryLen"
|
:show-zoom='true'
|
:end="50"
|
sub-title-width="160"
|
:title-split-len="12"
|
:subtext="true" trigger-on="mousemove"></line-chart-mul>
|
</div>
|
<div class="wrap-table">
|
<assemble-table
|
:data=rtData
|
:len="3"
|
></assemble-table>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 图表配置 -->
|
<el-drawer
|
title="图表配置"
|
direction="rtl"
|
size="800px"
|
custom-class="drawer-bg drawer-options"
|
:visible.sync="G_options.show" >
|
<div class="drawer-content">
|
<el-form ref="form" :inline="true" size="mini" :model="form.data" :rules="form.rules" label-width="8em">
|
<el-form-item label="显示属性数量" prop="categoryLen">
|
<el-input type="number" v-model="form.data.categoryLen"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="setCategoryLen">设定</el-button>
|
</el-form-item>
|
</el-form>
|
<el-transfer
|
class=""
|
v-model="selectedLegends"
|
:titles="['未选定属性', '已选定属性']"
|
:button-texts="['移除', '添加']"
|
:data="allLegends"
|
:filterable="true"
|
@change="selectChange"
|
>
|
</el-transfer>
|
</div>
|
</el-drawer>
|
<loading :show="showLoading"></loading>
|
<progress-load
|
:show="progress.show"
|
:percentage="progress.value"
|
:text="progress.text"></progress-load>
|
<!-- ROOTEND -->
|
</div>
|
</template>
|
|
<script>
|
// import Timeout from '@/script/Timeout'
|
import Mock from 'mockjs'
|
import AssembleTable from '@/components/AssembleTable';
|
import LineChartMul from '@/components/chart/LineChartMul';
|
import TreeItem from '@/components/tree/TreeItem';
|
import CONFIG from '@/script/config_subject';
|
import Loading from '@/components/Loading'
|
import ProgressLoad from '@/components/ProgressLoad'
|
import common from '@/script/common';
|
|
// 设定值的备份 因为要处理最后的余项
|
let category_len = 10;
|
let unit;
|
let config = null;
|
// 图表实例对象
|
let G = null;
|
const isArray = common.isArray;
|
export default {
|
name: 'subject_history',
|
components: {
|
AssembleTable
|
,LineChartMul
|
,TreeItem
|
,Loading
|
,ProgressLoad
|
},
|
data () {
|
const dev_id = this.$route.query.dev_id;
|
const vm = this;
|
return {
|
progress: {
|
show: false,
|
value: 0,
|
text: '',
|
}
|
// 可用时间段
|
,date_range: [0, 0]
|
,pickerOptions: {
|
disabledDate (data) {
|
return ( data && data.valueOf() > Date.now().valueOf() ) || vm.checkDate(data, vm.date_range);
|
}
|
}
|
,list: []
|
,list_keyword: ''
|
,cur_devname: ''
|
,cur_devid: 0
|
,cur_devtype: 0
|
,data_list: []
|
// ,timer: new Timeout()
|
,cur_id: 0
|
,showTable: false
|
,rtData: []
|
,G_data: []
|
,curLegendIdx: 0
|
// 图表的缩放位置
|
,datazoom: {
|
start: 0
|
,end: 50
|
}
|
// 当前选中的
|
,selectedLegends: []
|
// 图表显示的
|
,curLegends: []
|
// 查询出的全量
|
,allLegends: []
|
// 筛选后的
|
,categoryList: []
|
// 历史数据的起始时间点
|
,time_start: new Date(new Date().getTime() - 1000 * 60 * 60 * 24 + 1000).format('yyyy-MM-dd hh:mm:ss')
|
// 历史数据的结束时间点
|
,time_end: new Date().format('yyyy-MM-dd hh:mm:ss')
|
,categoryLen_old: 10
|
,categoryLen: 10
|
,G_options: {
|
show: false
|
}
|
,keyword: ''
|
,form: {
|
data: {
|
categoryLen: 10
|
}
|
,rules: {
|
categoryLen: [{
|
validator: (rule, value, callback) => {
|
if (!('' + value).trim()) {
|
callback(new Error('显示属性数量必填'));
|
}
|
if (/[^0-9]/.test(value)) {
|
callback(new Error('显示属性数量必须为数值'));
|
}
|
if (value < 1 || value > 10) {
|
callback(new Error('显示属性数量应介于1~10之间'));
|
} else {
|
callback()
|
}
|
},
|
trigger: 'blur'
|
}]
|
}
|
}
|
,showLoading: false
|
}
|
},
|
computed: {
|
prevDisabled () {
|
return this.curLegendIdx < category_len;
|
}
|
,nextDisabled () {
|
// 收集依赖
|
this.categoryLen;
|
return this.curLegendIdx + category_len >= this.selectedLegends.length;
|
}
|
,
|
},
|
methods: {
|
// 获取列表
|
getList () {
|
let list = [];
|
this.$api.subject.getList().then((res) => {
|
res = JSON.parse(res.data.result);
|
// console.log(res, '++++++++++++++++++++');
|
if (res.code) {
|
res.data.forEach((v) => {
|
v.txt = v.dev_name;
|
v.open = false;
|
v.state = v.connection_state ? 'normal' : 'off';
|
v.children = [];
|
});
|
}
|
this.data_list = res.data;
|
this.search();
|
});
|
}
|
,toggle () {
|
this.showTable = !this.showTable;
|
}
|
// 验证时间是不是可用 有没有当天的数据表
|
,checkDate (data, list) {
|
const stamp = new Date(data).getTime();
|
return stamp < list[0] || stamp > list[1];
|
}
|
// 准备选日期时间 获得焦点
|
,selectDate () {
|
if (!this.cur_devid) {
|
this.$message({
|
type: 'warning'
|
,message: '请先选择要查询的设备'
|
});
|
return false;
|
}
|
|
if (!this.date_range[0]) {
|
this.$message({
|
type: 'warning'
|
,message: '当前设备没有历史数据'
|
});
|
return false;
|
}
|
}
|
,search () {
|
let key = this.list_keyword;
|
let res = [];
|
let obj = {};
|
let reg = new RegExp(key, ['i']);
|
let list = this.data_list.filter((v) => {
|
if (reg.test(v.dev_name)) {
|
return v;
|
}
|
});
|
list.forEach((v) => {
|
obj[v.dev_type] = obj[v.dev_type] || [];
|
v.active = v.dev_id == this.cur_devid;
|
obj[v.dev_type].push(v);
|
});
|
|
Object.keys(obj).forEach((v) => {
|
let status = false;
|
let active = false;
|
for (let i = 0, j = obj[v].length; i < j; i++) {
|
if (obj[v][i].active) {
|
active = true;
|
}
|
if (obj[v][i].connection_state) {
|
status = true;
|
}
|
}
|
res.push({
|
state: status ? 'normal' : 'off',
|
open: false,
|
txt: obj[v][0].note,
|
active: active,
|
dev_type: obj[v][0].dev_type,
|
children: obj[v]
|
});
|
});
|
this.list = res;
|
}
|
// 选择设备
|
,selectDev (data) {
|
console.log(data, 'selectdev');
|
// 设定设备名称
|
this.cur_devname = data.dev_name;
|
this.cur_devid = data.dev_id;
|
this.cur_devtype = data.dev_type;
|
let param = [];
|
switch (data.dev_type) {
|
case 11:
|
case 12:
|
case 19:
|
param = [data.dev_type, data.dev_id];
|
break;
|
default:
|
param = [data.dev_type];
|
break;
|
}
|
// 初始化属性列表
|
this.initLegends(...param);
|
// 校验有没有数据 没有则提醒
|
this.checkHis();
|
// 查询历史数据
|
// this.getHisData();
|
}
|
// 起始时间更改
|
,startChanged () {
|
// console.log('start change');
|
// console.log(this.time_start, this.time_end, 'start end');
|
if (!this.cur_devid) {
|
return false;
|
}
|
// 开始时间确定后 结束时间要做限定 （不能超过24小时）
|
// 当时间发生改变时重新取数据
|
// this.getHisData();
|
}
|
// 结束时间更改
|
,endChanged () {
|
if (!this.cur_devid) {
|
return false;
|
}
|
// 当结束时间改变后 限定开始时间 （不能选定24小时之外的时间)
|
// 当时间发生改变时重新取数据
|
// console.log('end change');
|
// this.getHisData();
|
}
|
// 点击查询
|
,searchHis () {
|
if (!this.cur_devid) {
|
this.$message({
|
type: 'warning',
|
message: '请先选择要查询的设备'
|
});
|
return false;
|
}
|
if (!this.date_range[0]) {
|
this.$message({
|
type: 'warning'
|
,message: '当前设备没有历史数据'
|
});
|
return false;
|
}
|
|
// 验证时间段是否超过24小时
|
let start = new Date(this.time_start).getTime();
|
let end = new Date(this.time_end).getTime();
|
if (end - start > 1000 * 60 * 60 * 24) {
|
this.$message({
|
type: 'warning',
|
message: '由于数据量过大,最大可查询连续24小时数据'
|
});
|
return false;
|
}
|
|
this.getHisData();
|
}
|
// 点击导出
|
,exportCSV () {
|
if (!this.cur_devid) {
|
this.$message({
|
type: 'warning',
|
message: '请先选择要导出的设备'
|
});
|
return false;
|
}
|
if (!this.date_range[0]) {
|
this.$message({
|
type: 'warning'
|
,message: '当前设备没有历史数据'
|
});
|
return false;
|
}
|
let param = {
|
dev_name: this.cur_devname
|
,dev_id: this.cur_devid
|
,export_num: this.cur_devtype
|
,table_name: this.time_start.split(' ')[0].replace(/-/g, '_')
|
,record_time: this.time_start
|
,record_time1: this.time_end
|
,states: this.selectedLegends.map((v) => {return config[v]}).join(',')
|
,tablists: this.selectedLegends.join(',')
|
};
|
// debugger;
|
// console.log(param, 'param');
|
// 显示进度条
|
this.progress.show = true;
|
// 请求后台
|
this.$api.common.clearProgress().then(() => {
|
this.getProgress();
|
this.$api.subject.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);
|
});
|
});
|
}
|
,getProgress () {
|
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;
|
}
|
});
|
}
|
// 初始化要显示的属性列表
|
,initLegends (type, id) {
|
config = id ? CONFIG.DIR[type][id] : CONFIG.DIR[type];
|
unit = config.unit;
|
let allLegends = [];
|
let selectedLegends = [];
|
if (config) {
|
// console.log(config);
|
/*Object.keys(config).forEach((v) => {
|
if (v != 'unit') {
|
allLegends.push({
|
key: v,
|
label: config[v],
|
unit: config.unit[v]
|
});
|
selectedLegends.push(v);
|
}
|
});*/
|
|
|
let props = Object.keys(config);
|
for (let i = 0, j = props.length; i < j; i++) {
|
const v = props[i];
|
// debugger;
|
if (v != 'unit' && config[v] != '备用') {
|
allLegends.push({
|
key: v,
|
label: config[v],
|
unit: config.unit[v]
|
});
|
selectedLegends.push(v);
|
}
|
}
|
}
|
this.allLegends = allLegends;
|
this.selectedLegends = selectedLegends;
|
this.curLegendIdx = 0;
|
this.G_data = [];
|
this.curLegends = selectedLegends.slice(this.curLegendIdx, category_len);
|
this.updateGraph();
|
|
}
|
// 检查当前设备的历史数据
|
,checkHis () {
|
if (!this.cur_devid) {
|
return false;
|
}
|
let param = {
|
dev_id: this.cur_devid
|
};
|
// debugger;
|
this.$api.subject.checkHis(param).then((res) => {
|
res = JSON.parse(res.data.result);
|
if (res.code) {
|
// console.log(res.data, 'data=========');
|
let data = res.data;
|
let start = data[0] == '0' ? 0 : new Date(data[0] + ' 00:00:00').getTime();
|
let end = data[1] == '0' ? 0 : new Date(data[1] + ' 23:59:59').getTime();
|
this.$set(this.date_range, 0, start);
|
this.$set(this.date_range, 1, end);
|
|
// 当前没有历史数据时提示
|
if (!start) {
|
this.$message({
|
type: 'warning'
|
,message: '当前设备没有历史数据'
|
});
|
|
return false;
|
// this.cur_devid = 0;
|
}
|
// 如果当前起止时间不在查询的时间段内则修改当前起止时间
|
if (new Date(this.time_end).getTime() > end) {
|
this.time_end = new Date(end).format('yyyy-MM-dd hh:mm:ss');
|
}
|
if (new Date(this.time_end).getTime() < start) {
|
this.time_end = new Date(end).format('yyyy-MM-dd hh:mm:ss');
|
}
|
this.time_start = new Date(end - 1000 * 60 * 60 * 24 + 1000).format('yyyy-MM-dd hh:mm:ss');
|
|
if (new Date(this.time_start).getTime() < start) {
|
this.time_start = new Date(start).format('yyyy-MM-dd hh:mm:ss');
|
}
|
if (new Date(this.time_start).getTime() > end) {
|
this.time_start = new Date(start).format('yyyy-MM-dd hh:mm:ss');
|
}
|
}
|
});
|
}
|
// 根据id查询历史数据
|
,getHisData () {
|
// 判断时间是不是同一天的 跨天的要请求两次
|
let start_day = this.time_start.split(' ')[0];
|
let end_day = this.time_end.split(' ')[0];
|
|
let param,
|
promiseList = [];
|
if (start_day == end_day) {
|
param = [{
|
type: this.cur_devtype,
|
data: {
|
dev_id: this.cur_devid
|
,record_time: this.time_start
|
,record_time1: this.time_end
|
}
|
}];
|
} else {
|
param = [{
|
type: this.cur_devtype,
|
data: {
|
dev_id: this.cur_devid
|
,record_time: this.time_start
|
,record_time1: start_day + ' 23:59:59'
|
}
|
}
|
,{
|
type: this.cur_devtype,
|
data: {
|
dev_id: this.cur_devid
|
,record_time: end_day + ' 00:00:00'
|
,record_time1: this.time_end
|
}
|
}];
|
}
|
|
// debugger;
|
this.showLoading = true;
|
param.forEach((v) => {
|
promiseList.push(this.$api.subject.getHisData(v));
|
});
|
|
Promise.all(promiseList)
|
.then((values) => {
|
let list = [];
|
values.forEach((v) => {
|
let res = JSON.parse(v.data.result);
|
console.log(JSON.stringify(res.data), 'data');
|
|
if (res.code) {
|
list.push(...res.data);
|
}
|
});
|
|
this.G_data = list;
|
this.updateGraph();
|
this.showLoading = false;
|
|
if (!list.length) {
|
this.$message({
|
type: 'warning'
|
,message: '暂无数据'
|
});
|
}
|
})
|
.catch((reason) => {
|
this.showLoading = false;
|
this.$message({
|
type: 'warning'
|
,message: reason
|
});
|
});
|
}
|
,format (data) {
|
let xLabel = [],
|
series = [],
|
obj = {},
|
attrs = {};
|
let curLegends = this.curLegends;
|
|
// debugger;
|
curLegends.forEach((v) => {
|
obj[v] = [];
|
attrs[v] = attrs[v] || [];
|
series.push({
|
name: config[v],
|
unit: unit[v],
|
data: obj[v],
|
step: '' == unit[v]
|
})
|
});
|
|
for (let i = 0, j = data.length; i < j; i++) {
|
let item = data[i];
|
xLabel.push(item.record_time);
|
|
let arr = Object.keys(item);
|
for (let m = 0, n = arr.length; m < n; m++) {
|
// debugger;
|
const _val = arr[m];
|
const value = item[_val];
|
if (isArray(value)) {
|
for (let x = 0, y = value.length; x < y; x++) {
|
attrs[_val + (x + 1)] = attrs[_val + (x + 1)] || [];
|
attrs[_val + (x + 1)].push(value[x]);
|
}
|
} else {
|
attrs[_val] = attrs[_val] || [];
|
attrs[_val].push(value);
|
}
|
}
|
}
|
|
Object.keys(obj).forEach((v) => {
|
obj[v].push(...attrs[v]);
|
});
|
|
// console.log(xLabel, series, 99899);
|
|
return {
|
xLabel
|
,series
|
}
|
}
|
// 选配置项 上一组
|
,prevGrp () {
|
if (this.curLegendIdx < category_len) {
|
return false;
|
}
|
this.curLegendIdx -= category_len;
|
this.curLegends = this.selectedLegends.slice(this.curLegendIdx, this.curLegendIdx + category_len);
|
// 更新图表
|
this.updateGraph();
|
}
|
// 选配置项 下一组
|
,nextGrp () {
|
if (this.curLegendIdx + category_len >= this.selectedLegends.length) {
|
return false;
|
}
|
// debugger;
|
this.curLegendIdx += category_len;
|
this.curLegends = this.selectedLegends.slice(this.curLegendIdx, this.curLegendIdx + category_len);
|
// 更新图表
|
this.updateGraph();
|
}
|
// 更新图表
|
,updateGraph () {
|
// debugger;
|
this.categoryLen = this.curLegends.length;
|
|
if (this.categoryLen != this.categoryLen_old) {
|
// console.log('clear');
|
G.clear();
|
}
|
this.categoryLen_old = this.categoryLen;
|
this.$nextTick(() => {
|
this.$refs['G_linechart'].setOption(this.format(this.G_data));
|
G.dispatchAction({
|
type: 'dataZoom',
|
// 开始位置的百分比，0 - 100
|
start: this.datazoom.start,
|
// 结束位置的百分比，0 - 100
|
end: this.datazoom.end
|
});
|
});
|
}
|
// 设定categoryLen
|
,setCategoryLen () {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
this.categoryLen = this.form.data.categoryLen * 1;
|
category_len = this.form.data.categoryLen * 1;
|
this.curLegendIdx = 0;
|
this.curLegends = this.selectedLegends.slice(this.curLegendIdx, this.curLegendIdx + category_len);
|
this.updateGraph();
|
}
|
});
|
}
|
,showGOptions () {
|
this.G_options.show = true;
|
}
|
,selectChange (list, type, values) {
|
// console.log('hhh',list, type, values);
|
this.curLegendIdx = 0;
|
this.selectedLegends = list;
|
this.curLegends = this.selectedLegends.slice(this.curLegendIdx, this.curLegendIdx + category_len);
|
this.updateGraph();
|
}
|
},
|
mounted () {
|
const vm = this;
|
G = this.$G.chartManage.get('G_linechart');
|
G.on('datazoom', (e) => {
|
// console.log(e);
|
vm.datazoom.start = e.start;
|
vm.datazoom.end = e.end;
|
});
|
this.getList();
|
},
|
destroyed () {
|
|
}
|
}
|
</script>
|
<style scoped>
|
.main {
|
display: -webkit-flex;
|
display: flex;
|
height: 100%;
|
}
|
.list {
|
display: -webkit-flex;
|
display: flex;
|
flex-direction: column;
|
width: 24em;
|
margin-right: .4em;
|
}
|
.list-title {
|
background: #24a3bf;
|
padding: 10px 0;
|
text-align: center;
|
}
|
.list-content {
|
flex: 1;
|
background: #00324b;
|
}
|
.inner {
|
height: 100%;
|
padding: .6em 0 .6em .6em;
|
overflow-y: auto;
|
}
|
.list-item {
|
margin: .2em 0;
|
color: #999;
|
}
|
.list-item .name {
|
font-style: italic;
|
}
|
.list-item.isRun {
|
color: #fff;
|
cursor: pointer;
|
}
|
.list-item.disabled {
|
cursor: not-allowed;
|
}
|
.list-item.active {
|
background: rgba(200, 200, 200, .4);
|
}
|
.list-item.isRun .name {
|
font-style: normal;
|
}
|
.list-item:hover {
|
background: rgba(200, 200, 200, .2);
|
}
|
.page-content {
|
flex: 1;
|
background: rgba(0,0,0,.2);
|
display: -webkit-flex;
|
display: flex;
|
flex-direction: column;
|
}
|
.wraper {
|
flex: 1;
|
overflow: hidden;
|
}
|
.page-banner {
|
padding: 6px;
|
}
|
.page-banner .btn_3d {
|
width: 5em;
|
margin-left: 1em;
|
}
|
.content-title {
|
font-size: 22px;
|
}
|
.container {
|
width: 200%;
|
height: 100%;
|
display: -webkit-flex;
|
display: flex;
|
-webkit-transition: -webkit-transform 0.4s;
|
transition: transform 0.4s;
|
}
|
.showTable {
|
-webkit-transform: translateX(-50%);
|
transform: translateX(-50%);
|
}
|
.wrap-graph,
|
.wrap-table {
|
flex: 1;
|
}
|
.wrap-graph {
|
background: rgba(0,0,0,.2);
|
}
|
.empty-list {
|
text-align: center;
|
-webkit-transform: translate(-.3em, 1em);
|
transform: translate(-.3em, 1em);
|
}
|
.btn-grp {
|
display: -webkit-flex;
|
display: flex;
|
}
|
>>> .drawer-options {
|
background: #005074;
|
}
|
.drawer-content {
|
height: 100%;
|
display: -webkit-flex;
|
display: flex;
|
flex-direction: column;
|
padding: 10px;
|
}
|
.list-filter {
|
background: #00324b;
|
padding: 4px 0;
|
}
|
>>> .el-date-editor.el-input {
|
width: 150px;
|
}
|
.el-form-search >>> .el-input--suffix .el-input__inner {
|
padding-right: 0;
|
}
|
</style>
|
