|
|
<template>
|
|
|
<v-scale-screen width="1920" height="1080" :fullScreen="false">
|
|
|
<div class="app-container home" style="">
|
|
|
<div class="head">
|
|
|
<div class="head-content">
|
|
|
<div class="title">当 日 设 备 产 量</div>
|
|
|
</div>
|
|
|
<div class="head-logo">
|
|
|
<img src="../../../assets/images/logo.png" alt="" />
|
|
|
</div>
|
|
|
<div class="back">
|
|
|
<el-button
|
|
|
@click="back()"
|
|
|
type="primary"
|
|
|
icon="el-icon-s-home"
|
|
|
></el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="content-top">
|
|
|
<div class="factory">
|
|
|
<div class="selectborder">
|
|
|
<select
|
|
|
v-model="selectxt"
|
|
|
class="select1"
|
|
|
@change="selectline(selectxt)"
|
|
|
>
|
|
|
<option
|
|
|
:key="index"
|
|
|
:value="x.parentName"
|
|
|
v-for="(x, index) in getLineList"
|
|
|
>
|
|
|
{{ x.deptName }}
|
|
|
</option>
|
|
|
<!-- <option :key="index" :value="x.seriesName" v-for="(x, index) in ceshib">{{ x.seriesName }}</option> -->
|
|
|
</select>
|
|
|
</div>
|
|
|
<div class="selectborder selectborder1">
|
|
|
<select
|
|
|
v-model="selectxtclasses"
|
|
|
class="select1"
|
|
|
@change="selectline2(selectxtclasses)"
|
|
|
>
|
|
|
<option
|
|
|
:key="index"
|
|
|
:value="x.shiftId"
|
|
|
v-for="(x, index) in classesList"
|
|
|
>
|
|
|
{{ x.shiftDesc }}
|
|
|
</option>
|
|
|
<!-- <option :key="index" :value="x.seriesName" v-for="(x, index) in ceshib">{{ x.seriesName }}</option> -->
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="timebox">
|
|
|
<div class="time">
|
|
|
{{ gettimedata }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="content">
|
|
|
<div class="item">
|
|
|
<div class="titlebox">
|
|
|
<div class="titlename">下料口接料次数</div>
|
|
|
</div>
|
|
|
<div class="item-num">
|
|
|
<img src="../../../assets/images/bg-zongchaliang.png" alt="" />
|
|
|
<div class="number">{{ number4 }}</div>
|
|
|
</div>
|
|
|
<div class="titlebox">
|
|
|
<div class="titlename">接料次数</div>
|
|
|
</div>
|
|
|
<div class="echartsbox">
|
|
|
<div
|
|
|
id="echart4"
|
|
|
style="margin: auto; width: 395px; height: 316px"
|
|
|
></div>
|
|
|
</div>
|
|
|
<div class="titlebox">
|
|
|
<div class="titlename">下料口放料次数</div>
|
|
|
</div>
|
|
|
<div class="echartsbox echartspie">
|
|
|
<!-- <Echarts3D
|
|
|
:list="optionDatalist4"
|
|
|
:colorlist="colorlist"
|
|
|
style="margin: auto; width: 409.17px; height: 173px"
|
|
|
></Echarts3D> -->
|
|
|
<!-- <div
|
|
|
id="echartbar1"
|
|
|
style="margin: auto; width: 409.17px; height: 173px"
|
|
|
></div> -->
|
|
|
<Echarts3dbar
|
|
|
:xAxis4data="xAxis4data"
|
|
|
:yAxis4seriesMAX1="yAxis4seriesMAX1"
|
|
|
:series4data="series4data"
|
|
|
style="margin: auto; width: 409.17px; height: 173px"
|
|
|
></Echarts3dbar>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<div class="titlebox">
|
|
|
<div class="titlename">成型机总产量</div>
|
|
|
</div>
|
|
|
<div class="item-num">
|
|
|
<img src="../../../assets/images/bg-zongchaliang.png" alt="" />
|
|
|
<div class="number">{{ number1 }}</div>
|
|
|
</div>
|
|
|
<div class="titlebox">
|
|
|
<div class="titlename">成型机产量</div>
|
|
|
</div>
|
|
|
<div class="echartsbox">
|
|
|
<div
|
|
|
id="echart1"
|
|
|
style="margin: auto; width: 395px; height: 316px"
|
|
|
></div>
|
|
|
</div>
|
|
|
<div class="titlebox">
|
|
|
<div class="titlename">成型机计划达成率</div>
|
|
|
</div>
|
|
|
<div class="echartsbox echartspie">
|
|
|
<Echarts3dbar2
|
|
|
:xAxis1data="xAxis1data"
|
|
|
:yAxis1seriesMAX1="yAxis1seriesMAX1"
|
|
|
:yAxis1seriesMAX2="yAxis1seriesMAX2"
|
|
|
:series1data1="series1data1"
|
|
|
:series1data2="series1data2"
|
|
|
:series1data3="series1data3"
|
|
|
style="margin: auto; width: 409.17px; height: 173px"
|
|
|
></Echarts3dbar2>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<div class="titlebox">
|
|
|
<div class="titlename">烘房总产量</div>
|
|
|
</div>
|
|
|
<div class="item-num">
|
|
|
<img src="../../../assets/images/bg-zongchaliang.png" alt="" />
|
|
|
<div class="number">{{ number2 }}</div>
|
|
|
</div>
|
|
|
<div class="titlebox">
|
|
|
<div class="titlename">烘房产量</div>
|
|
|
</div>
|
|
|
<div class="echartsbox">
|
|
|
<div
|
|
|
id="echart2"
|
|
|
style="margin: auto; width: 395px; height: 316px"
|
|
|
></div>
|
|
|
</div>
|
|
|
<div class="titlebox">
|
|
|
<div class="titlename">烘房产量及达成率</div>
|
|
|
</div>
|
|
|
<div class="echartsbox echartspie">
|
|
|
<Echarts3dbar2
|
|
|
:xAxis1data="xAxis2data"
|
|
|
:yAxis1seriesMAX1="yAxis2seriesMAX1"
|
|
|
:yAxis1seriesMAX2="yAxis2seriesMAX2"
|
|
|
:series1data1="series2data1"
|
|
|
:series1data2="series2data2"
|
|
|
:series1data3="series2data3"
|
|
|
style="margin: auto; width: 409.17px; height: 173px"
|
|
|
></Echarts3dbar2>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<div class="titlebox">
|
|
|
<div class="titlename">收坯机总产量</div>
|
|
|
</div>
|
|
|
<div class="item-num">
|
|
|
<img src="../../../assets/images/bg-zongchaliang.png" alt="" />
|
|
|
<div class="number">{{ number3 }}</div>
|
|
|
</div>
|
|
|
<div class="titlebox">
|
|
|
<div class="titlename">收坯机产量</div>
|
|
|
</div>
|
|
|
<div class="echartsbox">
|
|
|
<div
|
|
|
id="echart3"
|
|
|
style="margin: auto; width: 395px; height: 316px"
|
|
|
></div>
|
|
|
</div>
|
|
|
<div class="titlebox">
|
|
|
<div class="titlename">收坯机产量及达成率</div>
|
|
|
</div>
|
|
|
<div class="echartsbox echartspie">
|
|
|
<Echarts3dbar2
|
|
|
:xAxis1data="xAxis3data"
|
|
|
:yAxis1seriesMAX1="yAxis3seriesMAX1"
|
|
|
:yAxis1seriesMAX2="yAxis3seriesMAX2"
|
|
|
:series1data1="series3data1"
|
|
|
:series1data2="series3data2"
|
|
|
:series1data3="series3data3"
|
|
|
style="margin: auto; width: 409.17px; height: 173px"
|
|
|
></Echarts3dbar2>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- <div class="item"></div> -->
|
|
|
<!-- <div class="item"></div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</v-scale-screen>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
getBoardFactory,
|
|
|
getMesBoardEquProductionToday,
|
|
|
getWhiteBoardEquPro7Days,
|
|
|
getBoardShifts,
|
|
|
} from "@/api/kanban/dailyoutput";
|
|
|
import { getDeviceRefreshTime } from "@/api/kanban/equipment";
|
|
|
import * as echarts from "echarts";
|
|
|
import moment from "moment";
|
|
|
import Echarts3D from "./echarts3d.vue";
|
|
|
import Echarts3D2 from "./echarts3d2.vue";
|
|
|
import Echarts3dbar from "./echarts3dbar.vue";
|
|
|
import Echarts3dbar2 from "./echarts3dbar2.vue";
|
|
|
export default {
|
|
|
name: "Index",
|
|
|
components: {
|
|
|
Echarts3D,
|
|
|
Echarts3D2,
|
|
|
Echarts3dbar,
|
|
|
Echarts3dbar2,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
gettimedata: "",
|
|
|
selectxt: null,
|
|
|
selectxtclasses: null,
|
|
|
getLineList: [],
|
|
|
classesList: [],
|
|
|
number1: 0,
|
|
|
number2: 0,
|
|
|
number3: 0,
|
|
|
number4: 0,
|
|
|
nameList: [
|
|
|
"成型机一",
|
|
|
"成型机二",
|
|
|
"成型机三",
|
|
|
"成型机四",
|
|
|
"成型机五",
|
|
|
"成型机六",
|
|
|
"成型机五",
|
|
|
"成型机六",
|
|
|
],
|
|
|
valueList: [1639, 1422, 1306, 1131, 1040, 732, 1040, 732],
|
|
|
optionDatalist1: [],
|
|
|
optionDatalist2: [],
|
|
|
optionDatalist3: [],
|
|
|
optionDatalist4: [],
|
|
|
colorlist: ["#005aff", "#f8b551"],
|
|
|
datetime: null,
|
|
|
time1: null,
|
|
|
RefreshTime: null,
|
|
|
Chart2yAxisMAX1: "",
|
|
|
Chart2yAxisMAX2: 100,
|
|
|
Chart2seriesdata: [],
|
|
|
Chart2seriesMAX: [],
|
|
|
Chart2xAxisname: [],
|
|
|
xAxis1data: [],
|
|
|
yAxis1seriesMAX1: 0,
|
|
|
yAxis1seriesMAX2: 0,
|
|
|
series1data1: [],
|
|
|
series1data2: [],
|
|
|
series1data3: [],
|
|
|
xAxis2data: [],
|
|
|
yAxis2seriesMAX1: 0,
|
|
|
yAxis2seriesMAX2: 0,
|
|
|
series2data1: [],
|
|
|
series2data2: [],
|
|
|
series2data3: [],
|
|
|
xAxis3data: [],
|
|
|
yAxis3seriesMAX1: 0,
|
|
|
yAxis3seriesMAX2: 0,
|
|
|
series3data1: [],
|
|
|
series3data2: [],
|
|
|
series3data3: [],
|
|
|
xAxis4data: [],
|
|
|
yAxis4seriesMAX1: 0,
|
|
|
series4data: [],
|
|
|
};
|
|
|
},
|
|
|
created() {},
|
|
|
|
|
|
destroyed() {
|
|
|
clearInterval(this.time1);
|
|
|
this.time1 = null;
|
|
|
},
|
|
|
mounted() {
|
|
|
// this.datetime = moment().subtract(2, "day").format("yyyy-MM-DD");
|
|
|
//console.log('zhuanhuahou',this.dateRangeone)
|
|
|
this.selectFactorylist();
|
|
|
this.gettime();
|
|
|
},
|
|
|
methods: {
|
|
|
back() {
|
|
|
this.$router.push({ path: "/index" });
|
|
|
},
|
|
|
gettime() {
|
|
|
this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
|
|
|
setInterval(() => {
|
|
|
this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
|
|
|
}, 1000);
|
|
|
},
|
|
|
selectFactorylist() {
|
|
|
const _this = this;
|
|
|
|
|
|
getBoardFactory({
|
|
|
factory: null,
|
|
|
}).then((response) => {
|
|
|
if (response.data) {
|
|
|
_this.getLineList = response.data;
|
|
|
_this.selectxt = _this.getLineList[0].parentName;
|
|
|
getBoardShifts({
|
|
|
factory: _this.selectxt,
|
|
|
}).then((response) => {
|
|
|
if (response.data) {
|
|
|
console.log(response.data);
|
|
|
_this.classesList = response.data;
|
|
|
_this.selectxtclasses = _this.classesList[0].shiftId;
|
|
|
_this.initChart1();
|
|
|
_this.getDeviceRefreshTime();
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
getDeviceRefreshTime() {
|
|
|
const _this = this;
|
|
|
getDeviceRefreshTime().then((response) => {
|
|
|
if (response.data) {
|
|
|
console.log(response.data);
|
|
|
this.RefreshTime = response.data;
|
|
|
this.time1 = setInterval(() => {
|
|
|
_this.initChart1();
|
|
|
}, 1000 * 60 * this.RefreshTime);
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
initChart1() {
|
|
|
const _this = this;
|
|
|
var myChart1 = echarts.init(document.querySelector("#echart1"));
|
|
|
var option1 = {
|
|
|
grid: {
|
|
|
left: "80",
|
|
|
right: "7%",
|
|
|
top: "5%",
|
|
|
bottom: "1%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
show: true,
|
|
|
axisPointer: {
|
|
|
type: "none",
|
|
|
},
|
|
|
formatter: function (e) {
|
|
|
return `${e[0].data.name}\n${e[0].marker}${e[0].data.value}`;
|
|
|
},
|
|
|
},
|
|
|
xAxis: {
|
|
|
name: "辆",
|
|
|
max: "100",
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
inverse: false,
|
|
|
data: [],
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
|
|
|
series: [
|
|
|
{
|
|
|
type: "pictorialBar",
|
|
|
symbol: "rect",
|
|
|
// symbolRepeat: "fixed",
|
|
|
// symbolMargin: "2",
|
|
|
// symbolClip: true,
|
|
|
// symbolSize: [5, 20],
|
|
|
// barWidth: 20,
|
|
|
data: [],
|
|
|
label: {
|
|
|
normal: {
|
|
|
formatter: "{b}",
|
|
|
textStyle: {
|
|
|
color: "#D0DEEE",
|
|
|
fontSize: 12,
|
|
|
},
|
|
|
position: "left",
|
|
|
distance: 10, //
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
z: 10,
|
|
|
},
|
|
|
{
|
|
|
type: "bar",
|
|
|
itemStyle: {
|
|
|
color: "#141A27",
|
|
|
},
|
|
|
label: {
|
|
|
normal: {
|
|
|
formatter: "{b}",
|
|
|
textStyle: {
|
|
|
color: "#D0DEEE",
|
|
|
fontSize: 12,
|
|
|
},
|
|
|
position: "right",
|
|
|
distance: 10, //
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
data: [], // value鍊<65>
|
|
|
tooltip: {
|
|
|
show: false,
|
|
|
},
|
|
|
// barWidth: 30,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChart1.setOption(option1);
|
|
|
getWhiteBoardEquPro7Days({
|
|
|
factory: _this.selectxt,
|
|
|
shiftId: _this.selectxtclasses,
|
|
|
ymd: _this.datetime,
|
|
|
equTypeCode: "equ_type_cxj",
|
|
|
}).then((response) => {
|
|
|
if (response) {
|
|
|
if (response.data) {
|
|
|
_this.xAxis1data = response.data.dayNames;
|
|
|
_this.series1data1 = response.data.plans;
|
|
|
_this.series1data2 = response.data.acts;
|
|
|
_this.series1data3 = response.data.finishRatio;
|
|
|
let MAX1 = 0;
|
|
|
let MAX2 = 0;
|
|
|
MAX1 = Math.max(..._this.series1data1);
|
|
|
MAX2 = Math.max(..._this.series1data2);
|
|
|
if (MAX1 > MAX2) {
|
|
|
_this.yAxis1seriesMAX1 = MAX1;
|
|
|
} else {
|
|
|
_this.yAxis1seriesMAX1 = MAX2;
|
|
|
}
|
|
|
_this.yAxis1seriesMAX2 = Math.max(..._this.series1data3);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
getMesBoardEquProductionToday({
|
|
|
factory: _this.selectxt,
|
|
|
shiftId: _this.selectxtclasses,
|
|
|
ymd: _this.datetime,
|
|
|
equTypeCode: "equ_type_cxj",
|
|
|
}).then((response) => {
|
|
|
if (response) {
|
|
|
if (response.data) {
|
|
|
let numberlist = [];
|
|
|
let dataoption = [];
|
|
|
let totalArr = [];
|
|
|
let barWidth1 = 20;
|
|
|
let barWidth2 = 30;
|
|
|
_this.optionDatalist1 = [];
|
|
|
if (response.data.totalNum.length > 0) {
|
|
|
_this.number1 = response.data.totalNum[0].totalNum;
|
|
|
}
|
|
|
if (response.data.everyNum.length > 0) {
|
|
|
response.data.everyNum.forEach((item) => {
|
|
|
let a = {};
|
|
|
a.name = item.equName;
|
|
|
a.value = item.totalNum;
|
|
|
a.code = item.equCode;
|
|
|
_this.optionDatalist1.push(a);
|
|
|
dataoption.push(a);
|
|
|
numberlist.push(item.totalNum);
|
|
|
});
|
|
|
|
|
|
// dataoption.sort((a, b) => {
|
|
|
// return a.value - b.value;
|
|
|
// });
|
|
|
let max = Math.max(...numberlist);
|
|
|
max = max + 100;
|
|
|
dataoption.forEach((item) => {
|
|
|
totalArr.push(max);
|
|
|
});
|
|
|
if (dataoption.length > 10) {
|
|
|
barWidth1 = "";
|
|
|
barWidth2 = "";
|
|
|
}
|
|
|
option1 = {
|
|
|
yAxis: [
|
|
|
{
|
|
|
data: dataoption,
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
data: dataoption,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: function (params) {
|
|
|
var index_num = params.value;
|
|
|
|
|
|
for (var i = 0; i < dataoption.length; i++) {
|
|
|
//判断数据是否大于1
|
|
|
if (index_num > 1131) {
|
|
|
//var colorList = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'];
|
|
|
//return colorList[params.dataIndex];
|
|
|
return new echarts.graphic.LinearGradient(
|
|
|
0,
|
|
|
0,
|
|
|
1,
|
|
|
0,
|
|
|
[
|
|
|
{ offset: 0, color: "#FFB742" },
|
|
|
{ offset: 1, color: "#FFB742" },
|
|
|
]
|
|
|
);
|
|
|
} else {
|
|
|
//var colorList = ['blue'];
|
|
|
//return colorList[params.dataIndex];
|
|
|
return new echarts.graphic.LinearGradient(
|
|
|
0,
|
|
|
0,
|
|
|
1,
|
|
|
0,
|
|
|
[
|
|
|
{ offset: 0, color: "#005954" },
|
|
|
{ offset: 1, color: "#66E1DF" },
|
|
|
]
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
barWidth: barWidth1,
|
|
|
},
|
|
|
{
|
|
|
data: totalArr,
|
|
|
barWidth: barWidth2,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChart1.setOption(option1);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
var myChart2 = echarts.init(document.querySelector("#echart2"));
|
|
|
var option2 = {
|
|
|
grid: {
|
|
|
left: "70",
|
|
|
right: "7%",
|
|
|
top: "5%",
|
|
|
bottom: "1%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
show: true,
|
|
|
axisPointer: {
|
|
|
type: "none",
|
|
|
},
|
|
|
formatter: function (e) {
|
|
|
return `${e[0].data.name}\n${e[0].marker}${e[0].data.value}`;
|
|
|
},
|
|
|
},
|
|
|
xAxis: {
|
|
|
name: "辆",
|
|
|
max: 50,
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
inverse: false,
|
|
|
data: [],
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
|
|
|
series: [
|
|
|
{
|
|
|
type: "pictorialBar",
|
|
|
symbol: "rect",
|
|
|
// symbolRepeat: "fixed",
|
|
|
// symbolMargin: "2",
|
|
|
// symbolClip: true,
|
|
|
// symbolSize: [5, 20],
|
|
|
barWidth: 20,
|
|
|
data: [],
|
|
|
label: {
|
|
|
normal: {
|
|
|
formatter: "{b}",
|
|
|
textStyle: {
|
|
|
color: "#D0DEEE",
|
|
|
fontSize: 14,
|
|
|
},
|
|
|
position: "left",
|
|
|
distance: 10, //
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
z: 10,
|
|
|
},
|
|
|
{
|
|
|
type: "bar",
|
|
|
itemStyle: {
|
|
|
color: "#141A27",
|
|
|
},
|
|
|
label: {
|
|
|
normal: {
|
|
|
formatter: "{b}",
|
|
|
textStyle: {
|
|
|
color: "#D0DEEE",
|
|
|
fontSize: 14,
|
|
|
},
|
|
|
position: "right",
|
|
|
distance: 10, //
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
data: [], // value鍊<65>
|
|
|
tooltip: {
|
|
|
show: false,
|
|
|
},
|
|
|
barWidth: 30,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChart2.setOption(option2);
|
|
|
getWhiteBoardEquPro7Days({
|
|
|
factory: _this.selectxt,
|
|
|
shiftId: _this.selectxtclasses,
|
|
|
ymd: _this.datetime,
|
|
|
equTypeCode: "equ_type_hf",
|
|
|
}).then((response) => {
|
|
|
if (response) {
|
|
|
if (response.data) {
|
|
|
_this.xAxis2data = response.data.dayNames;
|
|
|
_this.series2data1 = response.data.plans;
|
|
|
_this.series2data2 = response.data.acts;
|
|
|
_this.series2data3 = response.data.finishRatio;
|
|
|
let MAX1 = 0;
|
|
|
let MAX2 = 0;
|
|
|
MAX1 = Math.max(..._this.series2data1);
|
|
|
MAX2 = Math.max(..._this.series2data2);
|
|
|
if (MAX1 > MAX2) {
|
|
|
_this.yAxis2seriesMAX1 = MAX1;
|
|
|
} else {
|
|
|
_this.yAxis2seriesMAX1 = MAX2;
|
|
|
}
|
|
|
_this.yAxis2seriesMAX2 = Math.max(..._this.series2data3);
|
|
|
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
getMesBoardEquProductionToday({
|
|
|
factory: _this.selectxt,
|
|
|
shiftId: _this.selectxtclasses,
|
|
|
ymd: _this.datetime,
|
|
|
equTypeCode: "equ_type_hf",
|
|
|
}).then((response) => {
|
|
|
if (response) {
|
|
|
if (response.data) {
|
|
|
let numberlist = [];
|
|
|
let dataoption = [];
|
|
|
let totalArr = [];
|
|
|
_this.optionDatalist2 = [];
|
|
|
if (response.data.totalNum.length > 0) {
|
|
|
_this.number2 = response.data.totalNum[0].totalNum;
|
|
|
}
|
|
|
if (response.data.everyNum.length > 0) {
|
|
|
response.data.everyNum.forEach((item) => {
|
|
|
let a = {};
|
|
|
a.name = item.equName;
|
|
|
a.value = item.totalNum;
|
|
|
a.code = item.equCode;
|
|
|
_this.optionDatalist2.push(a);
|
|
|
dataoption.push(a);
|
|
|
numberlist.push(item.totalNum);
|
|
|
});
|
|
|
// dataoption.sort((a, b) => {
|
|
|
// return a.value - b.value;
|
|
|
// });
|
|
|
let max = Math.max(...numberlist);
|
|
|
max = max + 100;
|
|
|
dataoption.forEach((item) => {
|
|
|
totalArr.push(max);
|
|
|
});
|
|
|
option2 = {
|
|
|
yAxis: [
|
|
|
{
|
|
|
data: dataoption,
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
data: dataoption,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: function (params) {
|
|
|
var index_num = params.value;
|
|
|
|
|
|
for (var i = 0; i < dataoption.length; i++) {
|
|
|
//判断数据是否大于1
|
|
|
if (index_num > 1131) {
|
|
|
//var colorList = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'];
|
|
|
//return colorList[params.dataIndex];
|
|
|
return new echarts.graphic.LinearGradient(
|
|
|
0,
|
|
|
0,
|
|
|
1,
|
|
|
0,
|
|
|
[
|
|
|
{ offset: 0, color: "#FFB742" },
|
|
|
{ offset: 1, color: "#FFB742" },
|
|
|
]
|
|
|
);
|
|
|
} else {
|
|
|
//var colorList = ['blue'];
|
|
|
//return colorList[params.dataIndex];
|
|
|
return new echarts.graphic.LinearGradient(
|
|
|
0,
|
|
|
0,
|
|
|
1,
|
|
|
0,
|
|
|
[
|
|
|
{ offset: 0, color: "#005954" },
|
|
|
{ offset: 1, color: "#66E1DF" },
|
|
|
]
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
data: totalArr,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChart2.setOption(option2);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
var myChart3 = echarts.init(document.querySelector("#echart3"));
|
|
|
var option3 = {
|
|
|
grid: {
|
|
|
left: "70",
|
|
|
right: "7%",
|
|
|
top: "5%",
|
|
|
bottom: "1%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
show: true,
|
|
|
axisPointer: {
|
|
|
type: "none",
|
|
|
},
|
|
|
formatter: function (e) {
|
|
|
return `${e[0].data.name}\n${e[0].marker}${e[0].data.value}`;
|
|
|
},
|
|
|
},
|
|
|
xAxis: {
|
|
|
name: "辆",
|
|
|
max: 150,
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
inverse: false,
|
|
|
data: [],
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
|
|
|
series: [
|
|
|
{
|
|
|
type: "pictorialBar",
|
|
|
symbol: "rect",
|
|
|
// symbolRepeat: "fixed",
|
|
|
// symbolMargin: "2",
|
|
|
// symbolClip: true,
|
|
|
// symbolSize: [5, 20],
|
|
|
barWidth: 20,
|
|
|
data: [],
|
|
|
label: {
|
|
|
normal: {
|
|
|
formatter: "{b}",
|
|
|
textStyle: {
|
|
|
color: "#D0DEEE",
|
|
|
fontSize: 14,
|
|
|
},
|
|
|
position: "left",
|
|
|
distance: 10, //
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
z: 10,
|
|
|
},
|
|
|
{
|
|
|
type: "bar",
|
|
|
itemStyle: {
|
|
|
color: "#141A27",
|
|
|
},
|
|
|
label: {
|
|
|
normal: {
|
|
|
formatter: "{b}",
|
|
|
textStyle: {
|
|
|
color: "#D0DEEE",
|
|
|
fontSize: 14,
|
|
|
},
|
|
|
position: "right",
|
|
|
distance: 10, //
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
data: [], // value鍊<65>
|
|
|
tooltip: {
|
|
|
show: false,
|
|
|
},
|
|
|
barWidth: 30,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChart3.setOption(option3);
|
|
|
getWhiteBoardEquPro7Days({
|
|
|
factory: _this.selectxt,
|
|
|
shiftId: _this.selectxtclasses,
|
|
|
ymd: _this.datetime,
|
|
|
equTypeCode: "equ_type_spj",
|
|
|
}).then((response) => {
|
|
|
if (response) {
|
|
|
if (response.data) {
|
|
|
_this.xAxis3data = response.data.dayNames;
|
|
|
_this.series3data1 = response.data.plans;
|
|
|
_this.series3data2 = response.data.acts;
|
|
|
_this.series3data3 = response.data.finishRatio;
|
|
|
let MAX1 = 0;
|
|
|
let MAX2 = 0;
|
|
|
MAX1 = Math.max(..._this.series3data1);
|
|
|
MAX2 = Math.max(..._this.series3data2);
|
|
|
if (MAX1 > MAX2) {
|
|
|
_this.yAxis3seriesMAX1 = MAX1;
|
|
|
} else {
|
|
|
_this.yAxis3seriesMAX1 = MAX2;
|
|
|
}
|
|
|
_this.yAxis3seriesMAX2 = Math.max(..._this.series3data3);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
getMesBoardEquProductionToday({
|
|
|
factory: _this.selectxt,
|
|
|
shiftId: _this.selectxtclasses,
|
|
|
ymd: _this.datetime,
|
|
|
equTypeCode: "equ_type_spj",
|
|
|
}).then((response) => {
|
|
|
if (response) {
|
|
|
if (response.data) {
|
|
|
let numberlist = [];
|
|
|
let dataoption = [];
|
|
|
let totalArr = [];
|
|
|
_this.optionDatalist3 = [];
|
|
|
|
|
|
if (response.data.totalNum.length > 0) {
|
|
|
_this.number3 = response.data.totalNum[0].totalNum;
|
|
|
}
|
|
|
if (response.data.everyNum.length > 0) {
|
|
|
response.data.everyNum.forEach((item) => {
|
|
|
let a = {};
|
|
|
a.name = item.equName;
|
|
|
a.value = item.totalNum;
|
|
|
a.code = item.equCode;
|
|
|
_this.optionDatalist3.push(a);
|
|
|
dataoption.push(a);
|
|
|
numberlist.push(item.totalNum);
|
|
|
});
|
|
|
// dataoption.sort((a, b) => {
|
|
|
// return a.value - b.value;
|
|
|
// });
|
|
|
let max = Math.max(...numberlist);
|
|
|
max = max + 100;
|
|
|
dataoption.forEach((item) => {
|
|
|
totalArr.push(max);
|
|
|
});
|
|
|
option3 = {
|
|
|
yAxis: [
|
|
|
{
|
|
|
data: dataoption,
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
data: dataoption,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: function (params) {
|
|
|
var index_num = params.value;
|
|
|
|
|
|
for (var i = 0; i < dataoption.length; i++) {
|
|
|
//判断数据是否大于1
|
|
|
if (index_num > 1131) {
|
|
|
//var colorList = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'];
|
|
|
//return colorList[params.dataIndex];
|
|
|
return new echarts.graphic.LinearGradient(
|
|
|
0,
|
|
|
0,
|
|
|
1,
|
|
|
0,
|
|
|
[
|
|
|
{ offset: 0, color: "#FFB742" },
|
|
|
{ offset: 1, color: "#FFB742" },
|
|
|
]
|
|
|
);
|
|
|
} else {
|
|
|
//var colorList = ['blue'];
|
|
|
//return colorList[params.dataIndex];
|
|
|
return new echarts.graphic.LinearGradient(
|
|
|
0,
|
|
|
0,
|
|
|
1,
|
|
|
0,
|
|
|
[
|
|
|
{ offset: 0, color: "#005954" },
|
|
|
{ offset: 1, color: "#66E1DF" },
|
|
|
]
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
data: totalArr,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChart3.setOption(option3);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
var myChart4 = echarts.init(document.querySelector("#echart4"));
|
|
|
var option4 = {
|
|
|
grid: {
|
|
|
left: "70",
|
|
|
right: "7%",
|
|
|
top: "5%",
|
|
|
bottom: "1%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
show: true,
|
|
|
axisPointer: {
|
|
|
type: "none",
|
|
|
},
|
|
|
formatter: function (e) {
|
|
|
return `${e[0].data.name}\n${e[0].marker}${e[0].data.value}`;
|
|
|
},
|
|
|
},
|
|
|
xAxis: {
|
|
|
name: "次数",
|
|
|
max: 100,
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
inverse: false,
|
|
|
data: [],
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
|
|
|
series: [
|
|
|
{
|
|
|
type: "pictorialBar",
|
|
|
symbol: "rect",
|
|
|
// symbolRepeat: "fixed",
|
|
|
// symbolMargin: "2",
|
|
|
// symbolClip: true,
|
|
|
// symbolSize: [5, 20],
|
|
|
barWidth: 20,
|
|
|
data: [],
|
|
|
label: {
|
|
|
normal: {
|
|
|
formatter: "{b}",
|
|
|
textStyle: {
|
|
|
color: "#D0DEEE",
|
|
|
fontSize: 14,
|
|
|
},
|
|
|
position: "left",
|
|
|
distance: 10, //
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
z: 10,
|
|
|
},
|
|
|
{
|
|
|
type: "bar",
|
|
|
itemStyle: {
|
|
|
color: "#141A27",
|
|
|
},
|
|
|
label: {
|
|
|
normal: {
|
|
|
formatter: "{b}",
|
|
|
textStyle: {
|
|
|
color: "#D0DEEE",
|
|
|
fontSize: 14,
|
|
|
},
|
|
|
position: "right",
|
|
|
distance: 10, //
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
data: [], // value鍊<65>
|
|
|
tooltip: {
|
|
|
show: false,
|
|
|
},
|
|
|
barWidth: 30,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChart4.setOption(option4);
|
|
|
getMesBoardEquProductionToday({
|
|
|
factory: _this.selectxt,
|
|
|
shiftId: _this.selectxtclasses,
|
|
|
ymd: _this.datetime,
|
|
|
equTypeCode: "equ_type_lg",
|
|
|
}).then((response) => {
|
|
|
if (response) {
|
|
|
if (response.data) {
|
|
|
let numberlist = [];
|
|
|
let dataoption = [];
|
|
|
let totalArr = [];
|
|
|
_this.optionDatalist4 = [];
|
|
|
_this.series4data = [];
|
|
|
_this.xAxis4data = [];
|
|
|
if (response.data.totalNum.length > 0) {
|
|
|
_this.number4 = response.data.totalNum[0].totalNum;
|
|
|
}
|
|
|
if (response.data.everyNum.length > 0) {
|
|
|
response.data.everyNum.forEach((item) => {
|
|
|
this.series4data.push(item.totalNum);
|
|
|
this.xAxis4data.push(item.equName);
|
|
|
let a = {};
|
|
|
a.name = item.equName;
|
|
|
a.value = item.totalNum;
|
|
|
a.code = item.equCode;
|
|
|
_this.optionDatalist4.push(a);
|
|
|
dataoption.push(a);
|
|
|
numberlist.push(item.totalNum);
|
|
|
});
|
|
|
this.yAxis4seriesMAX1 = Math.max(...this.series4data);
|
|
|
// dataoption.sort((a, b) => {
|
|
|
// return a.value - b.value;
|
|
|
// });
|
|
|
let max = Math.max(...numberlist);
|
|
|
max = max + 100;
|
|
|
dataoption.forEach((item) => {
|
|
|
totalArr.push(max);
|
|
|
});
|
|
|
option4 = {
|
|
|
yAxis: [
|
|
|
{
|
|
|
data: dataoption,
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
data: dataoption,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: function (params) {
|
|
|
var index_num = params.value;
|
|
|
|
|
|
for (var i = 0; i < dataoption.length; i++) {
|
|
|
//判断数据是否大于1
|
|
|
if (index_num > 1131) {
|
|
|
//var colorList = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'];
|
|
|
//return colorList[params.dataIndex];
|
|
|
return new echarts.graphic.LinearGradient(
|
|
|
0,
|
|
|
0,
|
|
|
1,
|
|
|
0,
|
|
|
[
|
|
|
{ offset: 0, color: "#FFB742" },
|
|
|
{ offset: 1, color: "#FFB742" },
|
|
|
]
|
|
|
);
|
|
|
} else {
|
|
|
//var colorList = ['blue'];
|
|
|
//return colorList[params.dataIndex];
|
|
|
return new echarts.graphic.LinearGradient(
|
|
|
0,
|
|
|
0,
|
|
|
1,
|
|
|
0,
|
|
|
[
|
|
|
{ offset: 0, color: "#005954" },
|
|
|
{ offset: 1, color: "#66E1DF" },
|
|
|
]
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
data: totalArr,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChart4.setOption(option4);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
selectline() {
|
|
|
const _this = this;
|
|
|
this.optionDatalist1 = [];
|
|
|
this.optionDatalist2 = [];
|
|
|
this.optionDatalist3 = [];
|
|
|
this.optionDatalist4 = [];
|
|
|
getBoardShifts({
|
|
|
factory: _this.selectxt,
|
|
|
}).then((response) => {
|
|
|
if (response.data) {
|
|
|
console.log(response.data);
|
|
|
_this.classesList = response.data;
|
|
|
_this.selectxtclasses = _this.classesList[0].shiftId;
|
|
|
_this.initChart1();
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
selectline2() {
|
|
|
this.initChart1();
|
|
|
},
|
|
|
//左侧第一个选择类型下拉框 回调函数
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.app-container {
|
|
|
padding: 0px 24px;
|
|
|
}
|
|
|
.home {
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
background: url("../../../assets/images/bg-body.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
background-color: #050711;
|
|
|
.head {
|
|
|
width: 100%;
|
|
|
height: 74px;
|
|
|
position: relative;
|
|
|
.head-content {
|
|
|
height: 74px;
|
|
|
background-image: url("../../../assets/images/bg-head.png");
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
text-align: center;
|
|
|
.title {
|
|
|
font-size: 42px;
|
|
|
font-weight: 400;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
.head-logo {
|
|
|
position: absolute;
|
|
|
left: 0px;
|
|
|
top: 1px;
|
|
|
img {
|
|
|
height: 38px;
|
|
|
// width: ;
|
|
|
}
|
|
|
}
|
|
|
.back {
|
|
|
position: absolute;
|
|
|
right: 0px;
|
|
|
top: 5px;
|
|
|
}
|
|
|
}
|
|
|
.content-top {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
position: relative;
|
|
|
.factory {
|
|
|
width: 540px;
|
|
|
height: 60px;
|
|
|
background: url("../../../assets/images/bg- border1.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
text-align: center;
|
|
|
position: absolute;
|
|
|
top: -17px;
|
|
|
left: 0px;
|
|
|
}
|
|
|
.timebox {
|
|
|
width: 480px;
|
|
|
height: 60px;
|
|
|
background: url("../../../assets/images/bg-border2.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
text-align: center;
|
|
|
position: absolute;
|
|
|
top: -17px;
|
|
|
right: 0px;
|
|
|
.time {
|
|
|
font-size: 30px;
|
|
|
font-weight: 400;
|
|
|
color: #ffffff;
|
|
|
line-height: 71px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.content {
|
|
|
margin-top: 63px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
.item {
|
|
|
width: 455px;
|
|
|
height: 912px;
|
|
|
background: url("../../../assets/images/bg-border3.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
padding: 14px 0px 0px 33px;
|
|
|
box-sizing: border-box;
|
|
|
.item-num {
|
|
|
margin-top: 30px;
|
|
|
margin-bottom: 26px;
|
|
|
text-align: center;
|
|
|
position: relative;
|
|
|
.number {
|
|
|
position: absolute;
|
|
|
top: 0px;
|
|
|
left: 0px;
|
|
|
right: 0px;
|
|
|
bottom: 0px;
|
|
|
font-size: 66px;
|
|
|
font-weight: bold;
|
|
|
color: #1afcff;
|
|
|
line-height: 99px;
|
|
|
text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
|
|
|
}
|
|
|
}
|
|
|
.echartsbox {
|
|
|
margin-bottom: 27px;
|
|
|
}
|
|
|
.echartspie {
|
|
|
margin-top: 24px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.titlebox {
|
|
|
width: 431px;
|
|
|
height: 38px;
|
|
|
background: url("../../../assets/images/bg-title.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
// text-align: center;
|
|
|
font-size: 20px;
|
|
|
font-weight: bold;
|
|
|
color: #ffffff;
|
|
|
line-height: 38px;
|
|
|
letter-spacing: 2px;
|
|
|
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
|
|
|
padding-left: 60px;
|
|
|
// .titlename{
|
|
|
// position: relative;
|
|
|
// left: 24px;
|
|
|
// }
|
|
|
}
|
|
|
.factory {
|
|
|
display: flex;
|
|
|
// justify-content: space-around;
|
|
|
}
|
|
|
.selectborder {
|
|
|
background-color: transparent;
|
|
|
border-radius: 4px;
|
|
|
// border: 2px solid #27408c;
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-around;
|
|
|
width: 310px;
|
|
|
margin-left: 50px;
|
|
|
}
|
|
|
.selectborder1 {
|
|
|
background-color: transparent;
|
|
|
border-radius: 4px;
|
|
|
// border: 2px solid #27408c;
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-around;
|
|
|
width: 88px;
|
|
|
margin-left: 25px;
|
|
|
}
|
|
|
.selectborder select {
|
|
|
/*清除select的边框样式*/
|
|
|
border: none;
|
|
|
/*清除select聚焦时候的边框颜色*/
|
|
|
outline: none;
|
|
|
background-color: transparent;
|
|
|
/*将select的宽高等于div的宽高*/
|
|
|
width: 100%;
|
|
|
height: 50px;
|
|
|
/*隐藏select的下拉图标*/
|
|
|
-webkit-appearance: none;
|
|
|
-moz-appearance: none;
|
|
|
appearance: none;
|
|
|
font-size: 25px;
|
|
|
font-weight: 400;
|
|
|
color: #ffffff;
|
|
|
line-height: 42px;
|
|
|
}
|
|
|
.selectborder option {
|
|
|
/*清除select的边框样式*/
|
|
|
border: none;
|
|
|
/*清除select聚焦时候的边框颜色*/
|
|
|
outline: none;
|
|
|
background-color: transparent;
|
|
|
/*将select的宽高等于div的宽高*/
|
|
|
width: 100%;
|
|
|
|
|
|
/*隐藏select的下拉图标*/
|
|
|
-webkit-appearance: none;
|
|
|
-moz-appearance: none;
|
|
|
appearance: none;
|
|
|
padding-left: 20px;
|
|
|
font-size: 25px;
|
|
|
font-weight: 500;
|
|
|
color: #3fa2ff;
|
|
|
border-radius: 0%;
|
|
|
}
|
|
|
.selectborder1 option {
|
|
|
/*清除select的边框样式*/
|
|
|
border: none;
|
|
|
/*清除select聚焦时候的边框颜色*/
|
|
|
outline: none;
|
|
|
background-color: transparent;
|
|
|
/*将select的宽高等于div的宽高*/
|
|
|
width: 200px;
|
|
|
height: 50px;
|
|
|
/*隐藏select的下拉图标*/
|
|
|
-webkit-appearance: none;
|
|
|
-moz-appearance: none;
|
|
|
appearance: none;
|
|
|
padding-left: 20px;
|
|
|
font-size: 25px;
|
|
|
font-weight: 500;
|
|
|
color: #3fa2ff;
|
|
|
border-radius: 0%;
|
|
|
}
|
|
|
.selectborder:after {
|
|
|
content: "";
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
background: url(../../../assets/images/xiala.png) no-repeat center;
|
|
|
/*通过定位将图标放在合适的位置*/
|
|
|
position: absolute;
|
|
|
right: 0px;
|
|
|
top: 25%;
|
|
|
/*给自定义的图标实现点击下来功能*/
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
.selectborder1:after {
|
|
|
content: "";
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
background: url(../../../assets/images/xiala.png) no-repeat center;
|
|
|
/*通过定位将图标放在合适的位置*/
|
|
|
position: absolute;
|
|
|
right: 0px;
|
|
|
top: 25%;
|
|
|
/*给自定义的图标实现点击下来功能*/
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
::v-deep .el-button--primary {
|
|
|
color: #ffffff;
|
|
|
background-color: #325e82;
|
|
|
border-color: #0a0f19;
|
|
|
}
|
|
|
</style>
|