<template>
|
<div>
|
<div class="whole_top">
|
<el-form ref="form" :inline="true" :model="formData">
|
<div class="top">
|
<el-form-item label="类别：">
|
<el-checkbox-group v-model="formData.ht_typesub">
|
<el-checkbox v-for="item in YHLXList" :key="item.value" :value="item.value"
|
:label="item.value"></el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
<el-form-item label="级别：">
|
<el-checkbox-group v-model="formData.level">
|
<el-checkbox v-for="item in YHJBList" :key="item.value" :value="item.value"
|
:label="item.value"></el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
<el-form-item label="上级单位：">
|
<el-checkbox-group v-model="formData.superior">
|
<!-- <el-checkbox v-for="item in JCBMList" :label="item.value"></el-checkbox>-->
|
<el-checkbox v-for="item in JCBMList" :key="item.value" :value="item.value"
|
:label="item.value"></el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
<el-form-item label="检查类别：" class="checkbox">
|
<el-checkbox-group v-model="formData.checktype">
|
<el-checkbox v-for="item in JCLBList" :key="item.value" :value="item.value"
|
:label="item.value"></el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
<el-form-item label="当前警情：">
|
<el-checkbox-group v-model="formData.curWarningLevel">
|
<el-checkbox label="轻警"></el-checkbox>
|
<el-checkbox label="低警"></el-checkbox>
|
<el-checkbox label="中警"></el-checkbox>
|
<el-checkbox label="重警"></el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
<el-form-item style="margin-left: 30px;">
|
<el-radio-group v-model="formData.model">
|
<el-radio label="0">按隐患单位</el-radio>
|
<el-radio label="1">按类别</el-radio>
|
<el-radio label="2">按级别</el-radio>
|
<el-radio label="3">按检查单位</el-radio>
|
<el-radio label="4">按录入单位</el-radio>
|
<el-radio label="5">按检查类别</el-radio>
|
<el-radio label="6">按当前警情</el-radio>
|
</el-radio-group>
|
<el-radio-group v-model="chartType" v-if="!THDB" style="margin-left: 50px;">
|
<el-radio label="line">曲线图</el-radio>
|
<el-radio label="pie">饼状图</el-radio>
|
<el-radio label="column">柱形图</el-radio>
|
</el-radio-group>
|
|
<el-radio-group v-model="timeDes" v-if="THDB" @change="initTHDBTime" style="margin-left: 50px;">
|
<el-radio label="month">月度</el-radio>
|
<el-radio label="quarter">季度</el-radio>
|
<el-radio label="year">年度</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</div>
|
<div class="center">
|
<el-form-item label="已选单位：">
|
<el-input autosize v-model="form.name"></el-input>
|
</el-form-item>
|
<el-form-item autosize label="已选类别：">
|
<el-input v-model="formData.ht_typesub.join(',')"></el-input>
|
</el-form-item>
|
<el-form-item label="已选级别：">
|
<el-input v-model="formData.level.join(',')"></el-input>
|
</el-form-item>
|
<el-form-item label="已选上级单位：">
|
<el-input v-model="formData.superior.join(',')"></el-input>
|
</el-form-item>
|
<el-form-item label="已选检查类别：">
|
<el-input v-model="formData.checktype.join(',')"></el-input>
|
</el-form-item>
|
<el-form-item label="已选当前警情：">
|
<el-input v-model="formData.curWarningLevel.join(',')"></el-input>
|
</el-form-item>
|
<el-form-item label="检查时间：" v-if="!THDB" class="time" style="width: 300px">
|
<el-date-picker
|
style="width: 218px"
|
v-model="time"
|
type="daterange"
|
range-separator="至"
|
value-format="yyyy-MM-dd"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
</el-form-item>
|
|
<el-form-item label="对比时间：" v-if="THDB" class="time" style="width: 340px">
|
<div v-if="timeDes!='quarter'">
|
<el-date-picker
|
v-model="THDBBegin"
|
:type="timeDes"
|
style="width: 40%;float: left"
|
:value-format="timeDes=='month'?'yyyy年MM月':'yyyy年'"
|
:placeholder="timeDes=='month'?'请选择月':'请选择年'">
|
</el-date-picker>
|
<span style="width: 20px">-</span>
|
<el-date-picker
|
v-model="THDBEnd"
|
:type="timeDes"
|
:value-format="timeDes=='month'?'yyyy年MM月':'yyyy年'"
|
style="width: 40%"
|
:placeholder="timeDes=='month'?'请选择月':'请选择年'">
|
</el-date-picker>
|
</div>
|
<div v-if="timeDes=='quarter'">
|
|
<el-quarter-picker v-model="THDBBegin" style="width: 45%" placeholder="选择季度"/>
|
<span style="width: 20px">-</span>
|
<el-quarter-picker v-model="THDBEnd" style="width: 45%" placeholder="选择季度"/>
|
</div>
|
|
</el-form-item>
|
|
<el-form-item>
|
<el-button class="btn" size="small" type="primary" @click="getData()"
|
>汇总
|
</el-button>
|
<el-button v-if="!THDB" class="btn" size="small" type="primary" @click="THDB=true"
|
>同比环比
|
</el-button>
|
</el-form-item>
|
</div>
|
</el-form>
|
</div>
|
<div class="whole_bottom" style="position: relative;z-index: 1">
|
<div id="heigcharts" style="width: 100%;height: 550px;"></div>
|
<!--<div v-if="chartType == 'line'" id="line" style="width: 100%;height: 550px;"></div>-->
|
<!--<div v-if="chartType == 'column'" id="column" style="width: 100%;height: 550px;"></div>-->
|
<div v-if="chartType == 'column'" class="legend">
|
<div class="legend-body">
|
|
<div v-for="(item,index) in this.columnChartData.xList" class="legend-item">
|
<div :class="'legendItemBack'+index"></div>
|
{{ item }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import {echarts} from "../../global";
|
import {chart_analysis,chart_compare} from "@/api/sgyhpczl/chartAnalysis";
|
import {
|
initJCBM,
|
initYHLX,
|
initBC,
|
initJCLB,
|
initYHBM,
|
initYHJB,
|
initLlr,
|
initReformStatus
|
} from "@/api/sgyhpczl/initSelect";
|
|
// 导入chart组件
|
import Highcharts from "highcharts/highstock";
|
import loadExporting from "highcharts/modules/exporting";
|
import exportExcel from "highcharts/modules/export-data.src";
|
import highcharts3d from 'highcharts/highcharts-3d'
|
import ElQuarterPicker from "../common/jdSelect";
|
|
loadExporting(Highcharts);
|
exportExcel(Highcharts);
|
highcharts3d(Highcharts)
|
|
|
export default {
|
name: "index",
|
components: {ElQuarterPicker},
|
|
data() {
|
return {
|
value: '',
|
form: {
|
name: '众泰煤焦化',
|
time: '',
|
category: '生产',
|
level: '一般隐患D',
|
superiorUnit: '新疆能源',
|
inspectionCategory: '日常检查',
|
policeSituation: '轻警',
|
chart: null,
|
},
|
formData: {
|
"echart_type": "line", //line:折线图；column：柱状图；pie :饼状图
|
"model": "0", //0：
|
"beginTime": "", //开始时间
|
"endTime": "", //结束时间
|
"ht_typesub": [], //隐患类别
|
"level": [], //隐患级别
|
"superior": [], //上级单位
|
"checktype": [], //检查类别
|
"curWarningLevel": [] //警情
|
},
|
categoryList: ['生产'],
|
levelList: ['一般隐患D'],
|
superiorUnitList: ['新疆能源'],
|
inspectionCategoryList: ['日常检查'],
|
policeSituationList: ['轻警'],
|
radio: 1,
|
chartType: "line",
|
columnChartData: {},
|
lineChartData: {},
|
time: [],
|
pieChartData: [],
|
JCBMList: [],
|
YHLXList: [],
|
BCList: [],
|
JCLBList: [],
|
YHBMList: [],
|
YHJBList: [],
|
THDB: false,
|
THDBBegin: "",
|
THDBEnd: "",
|
timeDes: "month",
|
YHZTList: [],
|
columnXData: []
|
}
|
},
|
mounted() {
|
this.time.push(this.getCurrentMonthFirst(), this.getCurrentMonthLast());
|
this.initYHLX()
|
this.initYHJB()
|
this.initBC()
|
this.initJCLB()
|
this.initLlr()
|
this.initYHBM()
|
this.initYHZT()
|
this.changeJCDW(1)
|
this.getData()
|
this.initTHDBTime()
|
},
|
watch: {
|
"chartType": function (newVal, oldVal) {
|
this.formData.echart_type = newVal;
|
this.getData();
|
},
|
"formData.model": function (newVal, oldVal) {
|
this.formData.model = newVal;
|
this.getData();
|
|
},
|
// "timeDes": function (newVal, oldVal) {
|
// this.initTHDBTime();
|
// }
|
},
|
methods: {
|
initTHDBTime() {
|
var dayStr = this.getCurrentMonthFirst();
|
if (this.timeDes == "month") {
|
this.THDBBegin = dayStr.split("-")[0] + "年" + (parseInt(dayStr.split("-")[1]) - 1) + "月";
|
this.THDBEnd = dayStr.split("-")[0] + "年" + (dayStr.split("-")[1]) + "月";
|
} else if (this.timeDes == "year") {
|
this.THDBBegin = (parseInt(dayStr.split("-")[0]) - 1) + "年";
|
this.THDBEnd = dayStr.split("-")[0] + "年";
|
} else {
|
this.THDBBegin = dayStr.split("-")[0] + "年第1季度";
|
this.THDBEnd = dayStr.split("-")[0] + "年第2季度";
|
}
|
},
|
initYHLX() {
|
initYHLX().then(res => {
|
if (res.data.ok == 1) {
|
this.YHLXList = res.data.data
|
} else {
|
this.$message({type: 'error', message: res.data.msg, duration: 3000})
|
}
|
})
|
},
|
initYHJB() {
|
initYHJB().then(res => {
|
if (res.data.ok == 1) {
|
this.YHJBList = res.data.data
|
} else {
|
this.$message({type: 'error', message: res.data.msg, duration: 3000})
|
}
|
})
|
},
|
initYHZT() {
|
initReformStatus().then(res => {
|
if (res.data.ok == 1) {
|
this.YHZTList = res.data.data
|
} else {
|
this.$message({type: 'error', message: res.data.msg, duration: 3000})
|
}
|
})
|
},
|
initBC() {
|
initBC().then(res => {
|
if (res.data.ok == 1) {
|
this.BCList = res.data.data
|
} else {
|
this.$message({type: 'error', message: res.data.msg, duration: 3000})
|
}
|
})
|
},
|
initJCLB() {
|
initJCLB().then(res => {
|
if (res.data.ok == 1) {
|
this.JCLBList = res.data.data
|
} else {
|
this.$message({type: 'error', message: res.data.msg, duration: 3000})
|
}
|
})
|
},
|
initLlr() {
|
initLlr().then(res => {
|
if (res.data.ok == 1) {
|
this.llrList = res.data.data
|
} else {
|
this.$message({type: 'error', message: res.data.msg, duration: 3000})
|
}
|
})
|
},
|
initYHBM() {
|
initYHBM().then(res => {
|
if (res.data.ok == 1) {
|
this.YHBMList = res.data.data
|
} else {
|
this.$message({type: 'error', message: res.data.msg, duration: 3000})
|
}
|
})
|
},
|
changeJCDW(val) {
|
initJCBM(val).then(res => {
|
if (res.data.ok == 1) {
|
this.JCBMList = res.data.data
|
} else {
|
this.$message({type: 'error', message: res.data.msg, duration: 3000})
|
}
|
})
|
},
|
// 饼图
|
initEacharts3() {
|
var option = {
|
chart: {
|
type: 'pie',
|
options3d: {
|
enabled: true,
|
alpha: 45,
|
beta: 0
|
}
|
},
|
tooltip: {
|
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
},
|
plotOptions: {
|
pie: {
|
allowPointSelect: true,
|
cursor: 'pointer',
|
depth: 35,
|
dataLabels: {
|
enabled: true,
|
format: '{point.name}:' + ' {point.y}%'
|
}
|
}
|
},
|
exporting: {
|
enabled: false //去掉右上角
|
},
|
credits: {
|
enabled: false //不显示LOGO
|
},
|
series: [{
|
type: 'pie',
|
name: '浏览器占比',
|
data: this.pieChartData
|
}]
|
}
|
Highcharts.chart("heigcharts", option);
|
},
|
getData() {
|
this.formData.beginTime = this.time[0]
|
this.formData.endTime = this.time[1]
|
if(this.THDB) {
|
this.formData.beginTime = this.THDBBegin
|
this.formData.endTime = this.THDBEnd
|
this.formData.compare_type = this.timeDes;
|
}
|
let requestData = JSON.parse(JSON.stringify(this.formData));
|
requestData.ht_typesub = requestData.ht_typesub.join(",")
|
requestData.level = requestData.level.join(",")
|
requestData.superior = requestData.superior.join(",")
|
requestData.checktype = requestData.checktype.join(",")
|
requestData.curWarningLevel = requestData.curWarningLevel.join(",")
|
if(this.THDB){
|
chart_compare(requestData).then(res=>{
|
let data = res.data;
|
if (data.ok) {
|
this.lineChartData = {}
|
let dataList = [];
|
let timeList = [];
|
if (data.data != null && data.data.length > 0) {
|
data.data[0].forEach(n => {
|
if (timeList.indexOf(n.graph) == -1) {
|
timeList.push(n.graph)
|
}
|
let obj = dataList.find(v => v.name == n.xAxes);
|
if (obj == null) {
|
// obj.data.push(n.counts);
|
obj = {
|
name: n.xAxes,
|
data: [],
|
// type: 'line',
|
// areaStyle: {}
|
}
|
dataList.push(obj)
|
}
|
})
|
timeList.forEach(time => {
|
let singileData = data.data[0].filter(n => n.graph == time)
|
dataList.forEach(n => {
|
let searchData = singileData.find(v => v.xAxes == n.name);
|
if (searchData != null) {
|
n.data.push(parseInt(searchData.yAxes))
|
} else {
|
n.data.push(0)
|
}
|
})
|
})
|
}
|
this.lineChartData.timeList = timeList;
|
this.lineChartData.dataList = dataList;
|
this.initLineChart()
|
}
|
})
|
return;
|
}
|
|
|
|
|
chart_analysis(requestData).then(res => {
|
let data = res.data;
|
if (data.ok) {
|
if (this.formData.echart_type == "column") {
|
this.columnChartData = {};
|
let xList = [];
|
let dataList = [];
|
if (data.data != null && data.data.length > 0) {
|
data.data[0].forEach(n => {
|
xList.push(n.graph);
|
let singleData = {
|
"name": n.graph,
|
// "type": 'bar',
|
// "label": "labelOption",
|
// "emphasis": {
|
// focus: 'series'
|
// },
|
"data": [parseInt(n.yAxes)]
|
}
|
dataList.push(parseInt(n.yAxes));
|
})
|
}
|
this.columnChartData.xList = xList;
|
this.columnChartData.dataList = []
|
this.columnChartData.dataList.push(
|
{
|
data: dataList,
|
colorByPoint: true
|
}
|
);
|
this.initCloumnChart()
|
} else if (this.formData.echart_type == "line") {
|
this.lineChartData = {}
|
let dataList = [];
|
let timeList = [];
|
if (data.data != null && data.data.length > 0) {
|
data.data[0].forEach(n => {
|
if (timeList.indexOf(n.days) == -1) {
|
timeList.push(n.days)
|
}
|
let obj = dataList.find(v => v.name == n.catalogy);
|
if (obj == null) {
|
// obj.data.push(n.counts);
|
obj = {
|
name: n.catalogy,
|
data: [],
|
// type: 'line',
|
// areaStyle: {}
|
}
|
dataList.push(obj)
|
}
|
})
|
timeList.forEach(time => {
|
let singileData = data.data[0].filter(n => n.days == time)
|
dataList.forEach(n => {
|
let searchData = singileData.find(v => v.catalogy == n.name);
|
if (searchData != null) {
|
n.data.push(parseInt(searchData.counts))
|
} else {
|
n.data.push(0)
|
}
|
})
|
})
|
}
|
this.lineChartData.timeList = timeList;
|
this.lineChartData.dataList = dataList;
|
this.initLineChart()
|
} else {
|
this.pieChartData = []
|
data.data[0].forEach(n => {
|
var datas = {
|
name: n.chartName,
|
y: parseInt(n.chartValue),
|
sliced: true,
|
selected: false
|
};
|
this.pieChartData.push(datas);
|
})
|
this.initEacharts3();
|
}
|
}
|
|
})
|
},
|
initChart() {
|
// 柱形图
|
var chartDom = document.getElementById('column');
|
// var chartDom = document.getElementById('myChart');
|
var myChart = echarts.init(chartDom);
|
var option = {
|
title: {
|
text: '众泰煤焦化各隐患单位隐患走势分析',
|
left: 'center'
|
},
|
legend: {
|
bottom: 0,
|
// textStyle: {
|
// color: '#ffffff'
|
// },
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '5%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: this.lineChartData.timeList
|
},
|
yAxis: {
|
type: 'value'
|
},
|
color: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'],
|
series: this.lineChartData.dataList
|
}
|
// 使用刚指定的配置项和数据显示图表。
|
myChart.setOption(option)
|
},
|
initLineChart() {
|
// 折线图
|
var chartDom = document.getElementById('line');
|
// var chartDom = document.getElementById('myChart');
|
// var myChart = echarts.init(chartDom);
|
// var option = {
|
// title: {
|
// text: '众泰煤焦化各隐患单位隐患走势分析',
|
// left: 'center'
|
// },
|
// legend: {
|
// bottom: 0,
|
// // textStyle: {
|
// // color: '#ffffff'
|
// // },
|
// },
|
// grid: {
|
// left: '3%',
|
// right: '4%',
|
// bottom: '5%',
|
// containLabel: true
|
// },
|
// xAxis: {
|
// type: 'category',
|
// boundaryGap: false,
|
// data: this.lineChartData.timeList
|
// // data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11']
|
// },
|
// yAxis: {
|
// type: 'value'
|
// },
|
// color: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'],
|
// series: this.lineChartData.dataList
|
// // series: [
|
// // {
|
// // name: '电仪车间',
|
// // data: [50, 35, 63, 64, 79, 95, 104, 50, 35, 63, 64],
|
// // type: 'line',
|
// // areaStyle: {}
|
// // }
|
// // ]
|
// }
|
// // 使用刚指定的配置项和数据显示图表。
|
// myChart.setOption(option)
|
|
var option = {
|
chart: {
|
type: 'area'
|
},
|
title: {
|
text: '众泰煤焦化各隐患单位隐患走势分析'
|
},
|
yAxis: {
|
title: {
|
enabled: false
|
}
|
},
|
colors: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'],
|
legend: {
|
align: "center", //程度标的目标地位
|
verticalAlign: "bottom",//垂直标的目标地位
|
x: 0, //间隔x轴的间隔
|
y: 0 //间隔Y轴的间隔
|
},
|
xAxis: {
|
// type: 'category',
|
// boundaryGap: false,
|
categories: this.lineChartData.timeList,
|
// data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11']
|
},
|
series: this.lineChartData.dataList,
|
exporting: {
|
enabled: false //去掉右上角
|
},
|
credits: {
|
enabled: false //不显示LOGO
|
},
|
}
|
Highcharts.chart("heigcharts", option);
|
},
|
initCloumnChart() {
|
|
var option = {
|
chart: {
|
type: 'column',
|
marginBottom: 70
|
},
|
title: {
|
text: null
|
},
|
yAxis: {
|
title: {
|
enabled: false
|
}
|
},
|
tooltip: {
|
formatter: function () {
|
return this.x + " : " + this.y
|
}
|
},
|
colors: ['#ff6600', '#fcd202', '#b0de09', '#0289cc', '#2001cd', '#cd0d74', '#cc0000', '#00cc00', '#0000cc', '#dddddd', '#999999', '#333333', '#990000', '#92e3d4', '#f09aea'],
|
legend: {
|
enabled: false,
|
},
|
xAxis: {
|
// type: 'category',
|
// boundaryGap: false,
|
categories: this.columnChartData.xList,
|
max: this.columnChartData.xList.length - 1
|
// data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11']
|
},
|
series: this.columnChartData.dataList,
|
exporting: {
|
enabled: false //去掉右上角
|
},
|
credits: {
|
enabled: false //不显示LOGO
|
},
|
}
|
Highcharts.chart("heigcharts", option);
|
},
|
getCurrentMonthFirst() {
|
var date = new Date();
|
date.setDate(1);
|
var month = parseInt(date.getMonth() + 1);
|
var day = date.getDate();
|
if (month < 10) {
|
month = '0' + month
|
}
|
if (day < 10) {
|
day = '0' + day
|
}
|
|
return date.getFullYear() + '-' + month + '-' + day;
|
},
|
getCurrentMonthLast() {
|
var date = new Date();
|
var currentMonth = date.getMonth();
|
var nextMonth = ++currentMonth;
|
var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
|
var oneDay = 1000 * 60 * 60 * 24;
|
var lastTime = new Date(nextMonthFirstDay - oneDay);
|
var month = parseInt(lastTime.getMonth() + 1);
|
var day = lastTime.getDate();
|
if (month < 10) {
|
month = '0' + month
|
}
|
if (day < 10) {
|
day = '0' + day
|
}
|
return date.getFullYear() + '-' + month + '-' + day;
|
},
|
},
|
|
|
}
|
</script>
|
|
<style scoped>
|
.legend {
|
position: absolute;
|
bottom: 10px;
|
z-index: 2;
|
width: 100%;
|
}
|
|
.legend-body {
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
flex-wrap: wrap;
|
font-size: 12px;
|
height: 100%;
|
}
|
|
.legend-item {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
margin-left: 20px;
|
line-height: 1.5;
|
}
|
|
.legend-item div {
|
width: 20px;
|
height: 15px;
|
margin-right: 10px;
|
}
|
|
.legendItemBack0 {
|
background-color: #ff6600;
|
}
|
|
.legendItemBack1 {
|
background-color: #fcd202;
|
}
|
|
.legendItemBack2 {
|
background-color: #b0de09;
|
}
|
|
.legendItemBack3 {
|
background-color: #0289cc;
|
}
|
|
.legendItemBack4 {
|
background-color: #2001cd;
|
}
|
|
.legendItemBack5 {
|
background-color: #cd0d74;
|
}
|
|
.legendItemBack6 {
|
background-color: #cc0000;
|
}
|
|
.legendItemBack7 {
|
background-color: #00cc00;
|
}
|
|
.legendItemBack8 {
|
background-color: #0000cc;
|
}
|
|
.legendItemBack9 {
|
background-color: #dddddd;
|
}
|
|
.legendItemBack10 {
|
background-color: #999999;
|
}
|
|
.legendItemBack11 {
|
background-color: #333333;
|
}
|
|
.legendItemBack12 {
|
background-color: #990000;
|
}
|
|
.legendItemBack13 {
|
background-color: #92e3d4;
|
}
|
|
.legendItemBack14 {
|
background-color: #f09aea;
|
}
|
|
.top {
|
padding: 10px 5px;
|
background: #e4edf4;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.top /deep/ .el-form-item__label {
|
width: 110px;
|
}
|
|
.top /deep/ .el-form-item {
|
margin-bottom: 5px;
|
}
|
|
/*多选框间距*/
|
.checkbox /deep/ .el-checkbox-group {
|
display: flex;
|
flex-direction: row;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
}
|
|
.center {
|
text-align: center;
|
padding: 10px;
|
background: #ffffff;
|
margin: 10px 0;
|
}
|
|
.center /deep/ .el-form-item__label {
|
width: auto;
|
padding-right: 0;
|
}
|
|
.checkbox {
|
display: flex;
|
}
|
|
/deep/ .el-checkbox {
|
margin-right: 7px;
|
}
|
|
.checkbox /deep/ .el-checkbox {
|
margin-right: 0px;
|
}
|
|
/deep/ .el-checkbox__label {
|
padding-left: 3px;
|
}
|
|
.checkbox /deep/ .el-checkbox__label {
|
padding-left: 3px;
|
}
|
|
/deep/ .el-radio {
|
margin-right: 7px;
|
}
|
|
.center {
|
display: flex;
|
align-items: center;
|
justify-content: start;
|
}
|
|
.center /deep/ .el-form-item--medium {
|
margin-bottom: 0px;
|
display: flex;
|
}
|
|
.center /deep/ .el-input__inner {
|
border: transparent;
|
width: 85px;
|
padding: 0 5px;
|
}
|
|
.center .time /deep/ .el-form-item__content {
|
width: 70%;
|
}
|
|
.center .time /deep/ .el-input__inner {
|
width: 218px;
|
}
|
|
.center .time /deep/ .el-range-input {
|
width: 90px;
|
border: 1px solid #DCDFE6;
|
border-radius: 4px;
|
padding: 0 5px;
|
}
|
|
/deep/ .el-icon-date {
|
display: none;
|
}
|
|
/*日期*/
|
/deep/ .el-date-editor .el-range-separator {
|
width: auto;
|
line-height: 36px;
|
}
|
|
.btn {
|
background-color: #034ea2;
|
border: 1px solid #034ea2;
|
}
|
|
>>> .center .time[data-v-21f55eb3] .el-input__inner {
|
width: 100px;
|
}
|
</style>
|
