|
|
|
|
|
<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>
|
|
|
|
|
|
</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">
|
|
|
|
|
|
<Echarts3D
|
|
|
|
|
|
:list="optionDatalist1"
|
|
|
|
|
|
:colorlist="colorlist"
|
|
|
|
|
|
style="margin: auto; width: 439.17px; height: 183px"
|
|
|
|
|
|
></Echarts3D>
|
|
|
|
|
|
</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">
|
|
|
|
|
|
<Echarts3D
|
|
|
|
|
|
:list="optionDatalist2"
|
|
|
|
|
|
:colorlist="colorlist"
|
|
|
|
|
|
style="margin: auto; width: 409.17px; height: 173px"
|
|
|
|
|
|
></Echarts3D>
|
|
|
|
|
|
</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">
|
|
|
|
|
|
<Echarts3D
|
|
|
|
|
|
:list="optionDatalist3"
|
|
|
|
|
|
:colorlist="colorlist"
|
|
|
|
|
|
style="margin: auto; width: 409.17px; height: 173px"
|
|
|
|
|
|
></Echarts3D>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <div class="item"></div> -->
|
|
|
|
|
|
<!-- <div class="item"></div> -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</v-scale-screen>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import {
|
|
|
|
|
|
getBoardFactory,
|
|
|
|
|
|
getMesBoardEquProductionToday,
|
|
|
|
|
|
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";
|
|
|
|
|
|
export default {
|
|
|
|
|
|
name: "Index",
|
|
|
|
|
|
components: {
|
|
|
|
|
|
Echarts3D,
|
|
|
|
|
|
Echarts3D2,
|
|
|
|
|
|
},
|
|
|
|
|
|
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,
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
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);
|
|
|
|
|
|
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);
|
|
|
|
|
|
});
|
|
|
|
|
|
// response.data.everyNum.forEach((item) => {
|
|
|
|
|
|
// let a = {};
|
|
|
|
|
|
// a.name = item.equName;
|
|
|
|
|
|
// a.value = item.totalNum;
|
|
|
|
|
|
// a.code = item.equCode;
|
|
|
|
|
|
// dataoption.push(a);
|
|
|
|
|
|
// _this.optionDatalist1.push(a);
|
|
|
|
|
|
// });
|
|
|
|
|
|
// response.data.everyNum.forEach((item) => {
|
|
|
|
|
|
// let a = {};
|
|
|
|
|
|
// a.name = item.equName;
|
|
|
|
|
|
// a.value = item.totalNum;
|
|
|
|
|
|
// a.code = item.equCode;
|
|
|
|
|
|
// dataoption.push(a);
|
|
|
|
|
|
// _this.optionDatalist1.push(a);
|
|
|
|
|
|
// });
|
|
|
|
|
|
// response.data.everyNum.forEach((item) => {
|
|
|
|
|
|
// let a = {};
|
|
|
|
|
|
// a.name = item.equName;
|
|
|
|
|
|
// a.value = item.totalNum;
|
|
|
|
|
|
// a.code = item.equCode;
|
|
|
|
|
|
// dataoption.push(a);
|
|
|
|
|
|
// _this.optionDatalist1.push(a);
|
|
|
|
|
|
// });
|
|
|
|
|
|
// response.data.everyNum.forEach((item) => {
|
|
|
|
|
|
// let a = {};
|
|
|
|
|
|
// a.name = item.equName;
|
|
|
|
|
|
// a.value = item.totalNum;
|
|
|
|
|
|
// a.code = item.equCode;
|
|
|
|
|
|
// dataoption.push(a);
|
|
|
|
|
|
// _this.optionDatalist1.push(a);
|
|
|
|
|
|
// });
|
|
|
|
|
|
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);
|
|
|
|
|
|
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);
|
|
|
|
|
|
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: 30,
|
|
|
|
|
|
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 = [];
|
|
|
|
|
|
if (response.data.totalNum.length > 0) {
|
|
|
|
|
|
_this.number4 = 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.optionDatalist4.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);
|
|
|
|
|
|
});
|
|
|
|
|
|
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>
|
