|
|
|
|
<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>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="itemtop">
|
|
|
|
|
<div class="left left2">
|
|
|
|
|
<div class="box">
|
|
|
|
|
<div class="name name1">当天烘房情况</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cards">
|
|
|
|
|
<div class="card-item">
|
|
|
|
|
<div class="card-header">
|
|
|
|
|
<span class="card-header-left"
|
|
|
|
|
>生产总数:
|
|
|
|
|
<span class="color1">{{ Dailyoutputnumber || "0" }}</span>
|
|
|
|
|
车</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-box">
|
|
|
|
|
<div class="list1">
|
|
|
|
|
<div class="listitem1 header4">烘房</div>
|
|
|
|
|
<div class="listitem1 header5">产量</div>
|
|
|
|
|
<div class="listitem1 header6">标准产能</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-box card-box1">
|
|
|
|
|
<div
|
|
|
|
|
class="list"
|
|
|
|
|
v-for="(card, index) in Dailyoutput"
|
|
|
|
|
:key="index"
|
|
|
|
|
>
|
|
|
|
|
<div class="listitem2"></div>
|
|
|
|
|
<div
|
|
|
|
|
class="listitem1"
|
|
|
|
|
style="min-width: 55px; text-align: center"
|
|
|
|
|
>
|
|
|
|
|
{{ card.equCode }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="listitem1"
|
|
|
|
|
style="min-width: 145px; text-align: center"
|
|
|
|
|
>
|
|
|
|
|
{{ card.totalNum }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="listitem1"
|
|
|
|
|
style="min-width: 120px; text-align: center"
|
|
|
|
|
>
|
|
|
|
|
{{ card.unitPro }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="left left1">
|
|
|
|
|
<div class="cards">
|
|
|
|
|
<div class="card-item card-item1">
|
|
|
|
|
<div class="swiper-container" style="height: 100%">
|
|
|
|
|
<div class="swiper-wrapper">
|
|
|
|
|
<div
|
|
|
|
|
class="lefttop swiper-slide"
|
|
|
|
|
v-for="(card, index) in dataPropdata"
|
|
|
|
|
:key="index"
|
|
|
|
|
>
|
|
|
|
|
<div class="card-header1">
|
|
|
|
|
<span class="card-header-left1">烘房{{ card.i }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="boximage">
|
|
|
|
|
<div class="card-footer">
|
|
|
|
|
<div class="card-footer-item">
|
|
|
|
|
<div class="footer-detail">
|
|
|
|
|
<span
|
|
|
|
|
:style="{
|
|
|
|
|
fontSize: '22px',
|
|
|
|
|
fontWeight: 'bold',
|
|
|
|
|
color: '#FDA45D',
|
|
|
|
|
textAlign: 'right',
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
{{ getTagModel(card.status) }}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="footer-title">烘房模式</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="card-footer-item"
|
|
|
|
|
style="margin-top: 80px"
|
|
|
|
|
>
|
|
|
|
|
<div class="footer-detail">
|
|
|
|
|
<span
|
|
|
|
|
style="
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #fda45d;
|
|
|
|
|
text-align: right;
|
|
|
|
|
"
|
|
|
|
|
>{{ card.temperature }}
|
|
|
|
|
<span
|
|
|
|
|
style="
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
"
|
|
|
|
|
>℃</span
|
|
|
|
|
></span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="footer-title">烘房温度</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="image1">
|
|
|
|
|
<img
|
|
|
|
|
src="../../../assets/images/image1.png"
|
|
|
|
|
alt="暂无图片"
|
|
|
|
|
/>
|
|
|
|
|
</div> -->
|
|
|
|
|
<div class="card-footer">
|
|
|
|
|
<div class="card-footer-item">
|
|
|
|
|
<div class="footer-detail">
|
|
|
|
|
<span
|
|
|
|
|
:style="{
|
|
|
|
|
fontSize: '22px',
|
|
|
|
|
fontWeight: 'bold',
|
|
|
|
|
color: '#93FE66',
|
|
|
|
|
textAlign: 'right',
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
{{ getTagText(card.dollyNumber) }}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="footer-title">门前数量</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="card-footer-item"
|
|
|
|
|
style="margin-top: 80px"
|
|
|
|
|
>
|
|
|
|
|
<div class="footer-detail">
|
|
|
|
|
<span
|
|
|
|
|
style="
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #93fe66;
|
|
|
|
|
text-align: right;
|
|
|
|
|
"
|
|
|
|
|
>{{ card.waitmin }}
|
|
|
|
|
<span
|
|
|
|
|
style="
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
"
|
|
|
|
|
>min</span
|
|
|
|
|
></span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="footer-title">保持时长</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="lefttop swiper-slide">
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="swiper-pagination"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="left left2">
|
|
|
|
|
<div class="box">
|
|
|
|
|
<div class="name name1">当天质量情况</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cards">
|
|
|
|
|
<div class="card-item">
|
|
|
|
|
<div class="card-header">
|
|
|
|
|
<span class="card-header-left"
|
|
|
|
|
>不合格异常数量:
|
|
|
|
|
<span class="color2">{{ Qualityday.length || "0" }}</span>
|
|
|
|
|
车</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-box">
|
|
|
|
|
<div class="list1">
|
|
|
|
|
<div class="listitem1 header1">烘房</div>
|
|
|
|
|
<div class="listitem1 header2">托盘号</div>
|
|
|
|
|
<div class="listitem1 header3">时间</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-box card-box1">
|
|
|
|
|
<div
|
|
|
|
|
class="list"
|
|
|
|
|
v-for="(card, index) in Qualityday"
|
|
|
|
|
:key="index"
|
|
|
|
|
>
|
|
|
|
|
<div class="listitem2"></div>
|
|
|
|
|
<div
|
|
|
|
|
class="listitem1"
|
|
|
|
|
style="min-width: 80px; text-align: center"
|
|
|
|
|
>
|
|
|
|
|
{{ card.equCode }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="listitem1"
|
|
|
|
|
style="min-width: 120px; text-align: center"
|
|
|
|
|
>
|
|
|
|
|
{{ card.rfid }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="listitem1"
|
|
|
|
|
style="min-width: 170px; text-align: center"
|
|
|
|
|
>
|
|
|
|
|
{{ card.createTime || "0" }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="itembottom">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<div class="box">
|
|
|
|
|
<div class="name name1">当天烘房情况</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cards">
|
|
|
|
|
<div class="card-item">
|
|
|
|
|
<div
|
|
|
|
|
id="echart1"
|
|
|
|
|
style="margin: auto; width: 1770px; height: 340px"
|
|
|
|
|
></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="item"></div> -->
|
|
|
|
|
<!-- <div class="item"></div> -->
|
|
|
|
|
</div>
|
|
|
|
|
</v-scale-screen>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import {
|
|
|
|
|
getHFxlInfo,
|
|
|
|
|
getHFQcInfo,
|
|
|
|
|
getHEProInfo,
|
|
|
|
|
} from "@/api/kanban/dryingprocess";
|
|
|
|
|
import { dryRoomDataCarousel } from "@/api/kanban/dryingroom";
|
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
|
import moment from "moment";
|
|
|
|
|
import Swiper from "swiper";
|
|
|
|
|
import { getDeviceRefreshTime } from "@/api/kanban/equipment";
|
|
|
|
|
// 引入css
|
|
|
|
|
import "swiper/css/swiper.min.css";
|
|
|
|
|
// import Echarts3D from "./echarts3d.vue";
|
|
|
|
|
// import Echarts3D2 from "./echarts3d2.vue";
|
|
|
|
|
export default {
|
|
|
|
|
name: "Index",
|
|
|
|
|
components: {},
|
|
|
|
|
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,
|
|
|
|
|
time2: null,
|
|
|
|
|
getlist: [],
|
|
|
|
|
repairlist: [],
|
|
|
|
|
equipmentlist: [],
|
|
|
|
|
equipmentrepairlist: [],
|
|
|
|
|
equipmentstabilizelist: [],
|
|
|
|
|
equipmentinfo: [],
|
|
|
|
|
RefreshTime: null,
|
|
|
|
|
dictlist: [],
|
|
|
|
|
StartArray: [],
|
|
|
|
|
Dailyoutput: [],
|
|
|
|
|
Qualityday: [],
|
|
|
|
|
echartsdata: [],
|
|
|
|
|
cards: {
|
|
|
|
|
data1: [],
|
|
|
|
|
data2: [],
|
|
|
|
|
},
|
|
|
|
|
cardss: [],
|
|
|
|
|
swiper: null,
|
|
|
|
|
swiperList: [],
|
|
|
|
|
Dailyoutputnumber: null,
|
|
|
|
|
Qualitydaynumber: [],
|
|
|
|
|
dataPropdata: [
|
|
|
|
|
{}
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {},
|
|
|
|
|
destroyed() {
|
|
|
|
|
clearInterval(this.time1);
|
|
|
|
|
this.time1 = null;
|
|
|
|
|
clearInterval(this.time2);
|
|
|
|
|
this.time2 = null;
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
// this.datetime = moment().subtract(2, "day").format("yyyy-MM-DD");
|
|
|
|
|
//console.log('zhuanhuahou',this.dateRangeone)
|
|
|
|
|
this.gettime();
|
|
|
|
|
this.getSwiper();
|
|
|
|
|
this.getDeviceRefreshTime()
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
back() {
|
|
|
|
|
this.$router.push({ path: "/index" });
|
|
|
|
|
},
|
|
|
|
|
getTagText(value) {
|
|
|
|
|
// 根据值返回要显示的文字
|
|
|
|
|
if (value === "0") {
|
|
|
|
|
return "无车";
|
|
|
|
|
} else if (value === "1") {
|
|
|
|
|
return "有车";
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
getTextColor(value) {
|
|
|
|
|
if (value === "0") {
|
|
|
|
|
return "#26fcd8";
|
|
|
|
|
} else if (value === "1") {
|
|
|
|
|
return "#ea6027";
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
getTagModel(value) {
|
|
|
|
|
// 根据值返回要显示的文字
|
|
|
|
|
if (value === "0") {
|
|
|
|
|
return "手动";
|
|
|
|
|
} else if (value === "1") {
|
|
|
|
|
return "自动";
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
gettime() {
|
|
|
|
|
this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
|
|
|
|
|
this.time1 = setInterval(() => {
|
|
|
|
|
this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
|
|
|
|
|
}, 1000);
|
|
|
|
|
},
|
|
|
|
|
selectline() {
|
|
|
|
|
const _this = this;
|
|
|
|
|
this.optionDatalist1 = [];
|
|
|
|
|
this.optionDatalist2 = [];
|
|
|
|
|
this.optionDatalist3 = [];
|
|
|
|
|
this.optionDatalist4 = [];
|
|
|
|
|
},
|
|
|
|
|
getSwiper() {
|
|
|
|
|
this.swiper = new Swiper(".swiper-container", {
|
|
|
|
|
loop: true, // 无缝
|
|
|
|
|
autoplay: {
|
|
|
|
|
//自动开始
|
|
|
|
|
delay: 2000, //时间间隔
|
|
|
|
|
disableOnInteraction: false, //*手动操作轮播图后不会暂停*
|
|
|
|
|
},
|
|
|
|
|
// paginationClickable: true,
|
|
|
|
|
// slidesPerView: 1, // 一组三个
|
|
|
|
|
spaceBetween: 90, // 间隔
|
|
|
|
|
// 如果需要前进后退按钮
|
|
|
|
|
// navigation: {
|
|
|
|
|
// nextEl: '.swiper-button-next',
|
|
|
|
|
// prevEl: '.swiper-button-prev',
|
|
|
|
|
// },
|
|
|
|
|
// 窗口变化,重新init,针对F11全屏和放大缩小,必须加
|
|
|
|
|
observer: true,
|
|
|
|
|
observeParents: true,
|
|
|
|
|
// 如果需要分页器
|
|
|
|
|
pagination: {
|
|
|
|
|
el: ".swiper-pagination",
|
|
|
|
|
clickable: true, // 分页器可以点击
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
initChart1() {
|
|
|
|
|
const _this = this;
|
|
|
|
|
var xData = [];
|
|
|
|
|
var data1 = [];
|
|
|
|
|
var data4 = [];
|
|
|
|
|
var data0 = [];
|
|
|
|
|
_this.echartsdata.forEach((item) => {
|
|
|
|
|
xData.push(item.equCode);
|
|
|
|
|
data1.push(item.totalNum0);
|
|
|
|
|
data4.push(item.totalNum);
|
|
|
|
|
data0.push(1);
|
|
|
|
|
});
|
|
|
|
|
var data3 = [];
|
|
|
|
|
var data5 = [];
|
|
|
|
|
for (let i = 0; i < data1.length; i++) {
|
|
|
|
|
data3.push(data1[i] + data4[i]);
|
|
|
|
|
}
|
|
|
|
|
for (let i = 0; i < data1.length; i++) {
|
|
|
|
|
data5.push(data1[i]);
|
|
|
|
|
}
|
|
|
|
|
let max = Math.max(...data3);
|
|
|
|
|
var myChart1 = echarts.init(document.querySelector("#echart1"));
|
|
|
|
|
var option1 = {
|
|
|
|
|
// backgroundColor: "#000E1A", //背景色
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: "axis",
|
|
|
|
|
borderColor: "rgba(255,255,255,.3)",
|
|
|
|
|
backgroundColor: "rgba(13,5,30,.6)",
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "white", //设置文字颜色
|
|
|
|
|
},
|
|
|
|
|
borderWidth: 1,
|
|
|
|
|
padding: 5,
|
|
|
|
|
formatter: function (parms) {
|
|
|
|
|
var str =
|
|
|
|
|
"烘房:" +
|
|
|
|
|
parms[0].axisValue +
|
|
|
|
|
"</br>" +
|
|
|
|
|
parms[0].marker +
|
|
|
|
|
"入:" +
|
|
|
|
|
parms[0].value +
|
|
|
|
|
"</br>" +
|
|
|
|
|
parms[1].marker +
|
|
|
|
|
"出:" +
|
|
|
|
|
parms[1].value +
|
|
|
|
|
"</br>";
|
|
|
|
|
return str;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#C9C9C9",
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// color: ['#fbc292', '#06fbfe', '#f06e91'],
|
|
|
|
|
legend: {
|
|
|
|
|
// type: "scroll",
|
|
|
|
|
// orient: "vertical",
|
|
|
|
|
selectedMode: false, //图例点击失效
|
|
|
|
|
right: "2%",
|
|
|
|
|
top: "1%",
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#ffffff",
|
|
|
|
|
fontSize: 22,
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// data: datas.legendData,
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
containLabel: true,
|
|
|
|
|
left: "1%",
|
|
|
|
|
top: "10%",
|
|
|
|
|
bottom: "1%",
|
|
|
|
|
right: "1%",
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: "category",
|
|
|
|
|
data: xData,
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "#B5B5B5",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
// 使用深浅的间隔色
|
|
|
|
|
color: ["#B5B5B5"],
|
|
|
|
|
type: "dashed",
|
|
|
|
|
opacity: 0.5,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
margin: 20, //刻度标签与轴线之间的距离。
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontFamily: "Microsoft YaHei",
|
|
|
|
|
color: "#7F889B",
|
|
|
|
|
},
|
|
|
|
|
fontSize: 18,
|
|
|
|
|
fontStyle: "bold",
|
|
|
|
|
},
|
|
|
|
|
data: xData,
|
|
|
|
|
},
|
|
|
|
|
yAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: "value",
|
|
|
|
|
min: 0,
|
|
|
|
|
max: max + 10,
|
|
|
|
|
splitNumber: 5,
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "#B5B5B5",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
// 使用深浅的间隔色
|
|
|
|
|
color: ["#B5B5B5"],
|
|
|
|
|
type: "dashed",
|
|
|
|
|
opacity: 0.5,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
show: true,
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontFamily: "Microsoft YaHei",
|
|
|
|
|
color: "#FFF",
|
|
|
|
|
},
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: "bar",
|
|
|
|
|
name: "入",
|
|
|
|
|
data: data1,
|
|
|
|
|
stack: "zs",
|
|
|
|
|
barMaxWidth: "auto",
|
|
|
|
|
showBackground: true,
|
|
|
|
|
zlevel: -1,
|
|
|
|
|
barWidth: 60,
|
|
|
|
|
// color: "#40CB89",
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: {
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
x2: 0,
|
|
|
|
|
y2: 1,
|
|
|
|
|
type: "linear",
|
|
|
|
|
global: false,
|
|
|
|
|
colorStops: [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: "#23B780",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: "#64E490",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
normal: {
|
|
|
|
|
color: "#40CB89",
|
|
|
|
|
barBorderRadius: 0,
|
|
|
|
|
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: "inside",
|
|
|
|
|
color: "white",
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
formatter: function (p) {
|
|
|
|
|
return p.value > 0 ? p.value : "";
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
backgroundStyle: {
|
|
|
|
|
color: "#0E4271", // 设置背景颜色
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "出",
|
|
|
|
|
type: "bar",
|
|
|
|
|
data: data4,
|
|
|
|
|
stack: "zs",
|
|
|
|
|
barMaxWidth: "auto",
|
|
|
|
|
zlevel: -1,
|
|
|
|
|
barWidth: 60,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: {
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
x2: 0,
|
|
|
|
|
y2: 1,
|
|
|
|
|
type: "linear",
|
|
|
|
|
global: false,
|
|
|
|
|
colorStops: [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: "#0C75FF",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: "#01A5FE",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
normal: {
|
|
|
|
|
color: "#0886FE",
|
|
|
|
|
barBorderRadius: 0,
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: "top",
|
|
|
|
|
color: "white",
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
formatter: function (p) {
|
|
|
|
|
return p.value > 0 ? p.value : "";
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data: data0,
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
barMaxWidth: "20",
|
|
|
|
|
symbol: "diamond",
|
|
|
|
|
symbolOffset: [0, "50%"],
|
|
|
|
|
symbolSize: [60, 20],
|
|
|
|
|
zlevel: 2,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: "#23B780",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data: data1,
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
barMaxWidth: "20",
|
|
|
|
|
symbolPosition: "end",
|
|
|
|
|
symbol: "diamond",
|
|
|
|
|
symbolOffset: [0, "-50%"],
|
|
|
|
|
symbolSize: [60, 20],
|
|
|
|
|
zlevel: 2,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data: data1,
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
barMaxWidth: "20",
|
|
|
|
|
symbolPosition: "end",
|
|
|
|
|
symbol: "diamond",
|
|
|
|
|
symbolOffset: [0, "-50%"],
|
|
|
|
|
symbolSize: [60, 20],
|
|
|
|
|
zlevel: 2,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data: data5,
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
barMaxWidth: "20",
|
|
|
|
|
symbolPosition: "end",
|
|
|
|
|
symbol: "diamond",
|
|
|
|
|
symbolOffset: [0, "-50%"],
|
|
|
|
|
symbolSize: [0, 20],
|
|
|
|
|
zlevel: 2,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data: data5,
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
barMaxWidth: "20",
|
|
|
|
|
symbolPosition: "end",
|
|
|
|
|
symbol: "diamond",
|
|
|
|
|
symbolOffset: [0, "-50%"],
|
|
|
|
|
symbolSize: [60, 20],
|
|
|
|
|
zlevel: 2,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: "#64E490",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data: data3,
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
barMaxWidth: "20",
|
|
|
|
|
symbolPosition: "end",
|
|
|
|
|
symbol: "diamond",
|
|
|
|
|
symbolOffset: [0, "-50%"],
|
|
|
|
|
symbolSize: [60, 20],
|
|
|
|
|
zlevel: 2,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: "#54BBF3",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
myChart1.setOption(option1);
|
|
|
|
|
},
|
|
|
|
|
getDatalist() {
|
|
|
|
|
const _this = this;
|
|
|
|
|
this.dataPropdata =[]
|
|
|
|
|
getHEProInfo({
|
|
|
|
|
factoryCode: "ds_999",
|
|
|
|
|
}).then((response) => {
|
|
|
|
|
if (response) {
|
|
|
|
|
if (response.data) {
|
|
|
|
|
_this.Dailyoutputnumber = 0;
|
|
|
|
|
_this.Dailyoutput = response.data;
|
|
|
|
|
_this.Dailyoutput.forEach((item) => {
|
|
|
|
|
if (item.totalNum != null) {
|
|
|
|
|
_this.Dailyoutputnumber =
|
|
|
|
|
parseFloat(item.totalNum) +
|
|
|
|
|
parseFloat(_this.Dailyoutputnumber);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
getHFQcInfo({
|
|
|
|
|
factoryCode: "ds_999",
|
|
|
|
|
}).then((response) => {
|
|
|
|
|
if (response) {
|
|
|
|
|
if (response.data) {
|
|
|
|
|
_this.Qualityday = response.data;
|
|
|
|
|
_this.Qualityday.forEach((item) => {
|
|
|
|
|
if (item.createTime != null) {
|
|
|
|
|
item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
getHFxlInfo({
|
|
|
|
|
factoryCode: "ds_999",
|
|
|
|
|
}).then((response) => {
|
|
|
|
|
if (response) {
|
|
|
|
|
if (response.data) {
|
|
|
|
|
_this.echartsdata = response.data;
|
|
|
|
|
_this.initChart1();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
dryRoomDataCarousel({ factory: 999 }).then((response) => {
|
|
|
|
|
if (response.data) {
|
|
|
|
|
this.dataPropdata = response.data.dryingroomList;
|
|
|
|
|
console.log("wwwwwwww", this.dataPropdata);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
getDeviceRefreshTime() {
|
|
|
|
|
const _this = this;
|
|
|
|
|
getDeviceRefreshTime().then((response) => {
|
|
|
|
|
if (response) {
|
|
|
|
|
this.RefreshTime = response.data;
|
|
|
|
|
_this.getDatalist();
|
|
|
|
|
this.time2 = setInterval(() => {
|
|
|
|
|
_this.getDatalist();
|
|
|
|
|
}, 1000 * 60 * this.RefreshTime);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
//左侧第一个选择类型下拉框 回调函数
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.app-container {
|
|
|
|
|
padding: 0px 24px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.home {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
background: url("../../../assets/images/bg1.jpg") 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 {
|
|
|
|
|
margin-top: 63px;
|
|
|
|
|
|
|
|
|
|
.itemtop {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
.left {
|
|
|
|
|
.box {
|
|
|
|
|
width: 525px;
|
|
|
|
|
height: 46px;
|
|
|
|
|
// background: url("../../../assets/images/bg2.png") no-repeat;
|
|
|
|
|
// background-size: 100% 100%;
|
|
|
|
|
padding: 0px 21px 0px 25px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
// background-color: #1f3668;
|
|
|
|
|
.name {
|
|
|
|
|
min-width: 300px;
|
|
|
|
|
letter-spacing: 4px;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
}
|
|
|
|
|
.number {
|
|
|
|
|
min-width: 120px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
border: 2px solid #274583;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
padding: 1px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
.number1 {
|
|
|
|
|
text-align: center;
|
|
|
|
|
height: 100%;
|
|
|
|
|
line-height: 43px;
|
|
|
|
|
color: #ffa95b;
|
|
|
|
|
border-radius: 7px;
|
|
|
|
|
font-size: 32px;
|
|
|
|
|
letter-spacing: 3px;
|
|
|
|
|
background-color: #294584;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.unit {
|
|
|
|
|
color: #b7b9c1;
|
|
|
|
|
margin-left: 30px;
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.cards {
|
|
|
|
|
width: 525px;
|
|
|
|
|
.card-item {
|
|
|
|
|
width: 525px;
|
|
|
|
|
height: 420px;
|
|
|
|
|
// background: url("../../../assets/images/bg3.png") no-repeat;
|
|
|
|
|
// background-size: 100% 100%;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
// background-color: #192c56;
|
|
|
|
|
// display: flex;
|
|
|
|
|
// flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
.card-item1 {
|
|
|
|
|
width: 750px;
|
|
|
|
|
height: 481px;
|
|
|
|
|
background: url("../../../assets/images/image1.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
// background-color: #0e1d3a;
|
|
|
|
|
// display: flex;
|
|
|
|
|
// flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
.card-header {
|
|
|
|
|
width: 450px;
|
|
|
|
|
height: 13%;
|
|
|
|
|
margin: auto;
|
|
|
|
|
align-items: center;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #f6f3f9;
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
margin-top: 1px;
|
|
|
|
|
.card-header-left {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
min-width: 100px;
|
|
|
|
|
padding: 14px 26px;
|
|
|
|
|
letter-spacing: 8px;
|
|
|
|
|
// background: linear-gradient(to right, #192c56, #11518f, #192c56);
|
|
|
|
|
.color1 {
|
|
|
|
|
color: #0195fd;
|
|
|
|
|
}
|
|
|
|
|
.color2 {
|
|
|
|
|
color: #fb0102;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.card-box {
|
|
|
|
|
margin-top: 18px;
|
|
|
|
|
position: relative;
|
|
|
|
|
.list1 {
|
|
|
|
|
background-color: #0d61aa;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
min-height: 60px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
.header1 {
|
|
|
|
|
min-width: 118px;
|
|
|
|
|
}
|
|
|
|
|
.header2 {
|
|
|
|
|
min-width: 50px;
|
|
|
|
|
}
|
|
|
|
|
.header3 {
|
|
|
|
|
min-width: 180px;
|
|
|
|
|
}
|
|
|
|
|
.header4 {
|
|
|
|
|
min-width: 110px;
|
|
|
|
|
}
|
|
|
|
|
.header5 {
|
|
|
|
|
min-width: 50px;
|
|
|
|
|
}
|
|
|
|
|
.header6 {
|
|
|
|
|
min-width: 125px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.list1::before {
|
|
|
|
|
content: "";
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 40px;
|
|
|
|
|
left: 3%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
border-width: 8px;
|
|
|
|
|
border-style: solid;
|
|
|
|
|
border-color: transparent transparent #0496fd transparent;
|
|
|
|
|
transform: rotate(315deg);
|
|
|
|
|
}
|
|
|
|
|
.list {
|
|
|
|
|
border: 2px solid #0a62ab;
|
|
|
|
|
background-color: #114881;
|
|
|
|
|
color: #50b3fe;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
min-height: 60px;
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.listitem2::before {
|
|
|
|
|
content: "";
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 43px;
|
|
|
|
|
left: 0%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
border-width: 8px;
|
|
|
|
|
border-style: solid;
|
|
|
|
|
border-color: transparent transparent #0496fd transparent;
|
|
|
|
|
transform: rotate(315deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.card-box1 {
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
height: 258px;
|
|
|
|
|
overflow: scroll;
|
|
|
|
|
margin-bottom: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ring-charts {
|
|
|
|
|
height: 55%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.left1 {
|
|
|
|
|
width: 750px;
|
|
|
|
|
|
|
|
|
|
.swiper-container {
|
|
|
|
|
.swiper-wrapper {
|
|
|
|
|
.lefttop {
|
|
|
|
|
.card-header1 {
|
|
|
|
|
width: 450px;
|
|
|
|
|
height: 13%;
|
|
|
|
|
margin: auto;
|
|
|
|
|
align-items: center;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #f6f3f9;
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
margin-top: 1px;
|
|
|
|
|
.card-header-left1 {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
min-width: 100px;
|
|
|
|
|
padding: 14px 26px;
|
|
|
|
|
letter-spacing: 8px;
|
|
|
|
|
// background-color: #114989;
|
|
|
|
|
// box-shadow: 0px 0px 10px 6px #114989;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
// border-bottom: 1px solid #20aae6;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.boximage {
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
.card-footer {
|
|
|
|
|
height: 25%;
|
|
|
|
|
margin-top: 25px;
|
|
|
|
|
width: 140px;
|
|
|
|
|
.card-footer-item {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
.footer-title {
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
color: #0593fd;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.footer-detail {
|
|
|
|
|
min-height: 46px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
color: #192c57;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
padding: 10px 10px 10px 10px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background-color: #192c57;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
.dv-digital-flop {
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.image1 {
|
|
|
|
|
// width: 450px;
|
|
|
|
|
// height: 340px;
|
|
|
|
|
img {
|
|
|
|
|
width: 450px;
|
|
|
|
|
height: 340px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.left2 {
|
|
|
|
|
width: 525px;
|
|
|
|
|
height: 480px;
|
|
|
|
|
background: url("../../../assets/images/bg4.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.itembottom {
|
|
|
|
|
margin-top: 19px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
|
|
|
|
|
.left {
|
|
|
|
|
width: 1872px;
|
|
|
|
|
height: 417px;
|
|
|
|
|
background: url("../../../assets/images/bg5.png");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
.box {
|
|
|
|
|
width: 1872px;
|
|
|
|
|
height: 56px;
|
|
|
|
|
// background: url("../../../assets/images/bg2.png");
|
|
|
|
|
// background-size: 100% 100%;
|
|
|
|
|
padding: 0px 21px 0px 25px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
// background-color: #1f3668;
|
|
|
|
|
.name {
|
|
|
|
|
min-width: 300px;
|
|
|
|
|
letter-spacing: 4px;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
}
|
|
|
|
|
.number {
|
|
|
|
|
min-width: 120px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
border: 2px solid #274583;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
padding: 1px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
.number1 {
|
|
|
|
|
text-align: center;
|
|
|
|
|
height: 100%;
|
|
|
|
|
line-height: 43px;
|
|
|
|
|
color: #ffa95b;
|
|
|
|
|
border-radius: 7px;
|
|
|
|
|
font-size: 32px;
|
|
|
|
|
letter-spacing: 3px;
|
|
|
|
|
background-color: #294584;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.unit {
|
|
|
|
|
color: #b7b9c1;
|
|
|
|
|
margin-left: 30px;
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.cards {
|
|
|
|
|
width: 100%;
|
|
|
|
|
.card-item {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 360px;
|
|
|
|
|
// background: url("../../../assets/images/bg3.png") no-repeat;
|
|
|
|
|
// background-size: 100% 100%;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
// background-color: #192c56;
|
|
|
|
|
// display: flex;
|
|
|
|
|
// flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
.card-item1 {
|
|
|
|
|
width: 750px;
|
|
|
|
|
height: 481px;
|
|
|
|
|
background: url("../../../assets/images/bg3.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
background-color: #0e1d3a;
|
|
|
|
|
// display: flex;
|
|
|
|
|
// flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
.card-header {
|
|
|
|
|
width: 450px;
|
|
|
|
|
height: 13%;
|
|
|
|
|
margin: auto;
|
|
|
|
|
align-items: center;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #f6f3f9;
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
margin-top: 1px;
|
|
|
|
|
.card-header-left {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
min-width: 100px;
|
|
|
|
|
padding: 14px 26px;
|
|
|
|
|
letter-spacing: 8px;
|
|
|
|
|
background: linear-gradient(to right, #192c56, #11518f, #192c56);
|
|
|
|
|
.color1 {
|
|
|
|
|
color: #0195fd;
|
|
|
|
|
}
|
|
|
|
|
.color2 {
|
|
|
|
|
color: #fb0102;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.card-box {
|
|
|
|
|
margin-top: 18px;
|
|
|
|
|
position: relative;
|
|
|
|
|
.list1 {
|
|
|
|
|
background-color: #0d61aa;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
min-height: 60px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
.header1 {
|
|
|
|
|
min-width: 180px;
|
|
|
|
|
}
|
|
|
|
|
.header2 {
|
|
|
|
|
min-width: 100px;
|
|
|
|
|
}
|
|
|
|
|
.header3 {
|
|
|
|
|
min-width: 210px;
|
|
|
|
|
}
|
|
|
|
|
.header4 {
|
|
|
|
|
min-width: 135px;
|
|
|
|
|
}
|
|
|
|
|
.header5 {
|
|
|
|
|
min-width: 90px;
|
|
|
|
|
}
|
|
|
|
|
.header6 {
|
|
|
|
|
min-width: 80px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.list1::before {
|
|
|
|
|
content: "";
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 40px;
|
|
|
|
|
left: 3%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
border-width: 8px;
|
|
|
|
|
border-style: solid;
|
|
|
|
|
border-color: transparent transparent #0496fd transparent;
|
|
|
|
|
transform: rotate(315deg);
|
|
|
|
|
}
|
|
|
|
|
.list {
|
|
|
|
|
border: 2px solid #0a62ab;
|
|
|
|
|
background-color: #114881;
|
|
|
|
|
color: #50b3fe;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
min-height: 60px;
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
position: relative;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.listitem2 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
.listitem2::before {
|
|
|
|
|
content: "";
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 43px;
|
|
|
|
|
left: 0%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
border-width: 8px;
|
|
|
|
|
border-style: solid;
|
|
|
|
|
border-color: transparent transparent #0496fd transparent;
|
|
|
|
|
transform: rotate(315deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.card-box1 {
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
height: 258px;
|
|
|
|
|
overflow: scroll;
|
|
|
|
|
margin-bottom: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ring-charts {
|
|
|
|
|
height: 55%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
align-items: center;
|
|
|
|
|
// 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: 350px;
|
|
|
|
|
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%;
|
|
|
|
|
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%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.active1 {
|
|
|
|
|
background-color: #0d1b2f;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.active2 {
|
|
|
|
|
// background-color: #04060E;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
|
|
|
width: 3px;
|
|
|
|
|
height: 0px;
|
|
|
|
|
background-color: #0c0642;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*定义滚动条轨道 内阴影+圆角*/
|
|
|
|
|
::-webkit-scrollbar-track {
|
|
|
|
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
background-color: #07356a;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*定义滑块 内阴影+圆角*/
|
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
|
|
|
|
background-color: #0091ff;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-date-editor .el-range-input {
|
|
|
|
|
background-color: #142944;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-range-input::placeholder {
|
|
|
|
|
color: #ffffff; /* 设置 placeholder 文本的颜色 */
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-range-separator {
|
|
|
|
|
color: #ffffff; /* 设置 placeholder 文本的颜色 */
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-range-editor--medium .el-range-separator {
|
|
|
|
|
line-height: 35px;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-input__icon .el-range__icon .el-icon-date {
|
|
|
|
|
color: #ffffff; /* 设置 placeholder 文本的颜色 */
|
|
|
|
|
}
|
|
|
|
|
.fleft {
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fright {
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.clearfix::after {
|
|
|
|
|
content: "";
|
|
|
|
|
display: block;
|
|
|
|
|
clear: both;
|
|
|
|
|
}
|
|
|
|
|
#cards .isactive {
|
|
|
|
|
margin-right: 0px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
