|
@@ -6,26 +6,32 @@
|
|
|
<TitleHeaderB title="工位状态" />
|
|
|
<div class="totalInfo">
|
|
|
<div class="left">
|
|
|
- <div class="text">100</div>
|
|
|
+ <div class="text">{{ countData.dayRate }}</div>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
<div class="big">
|
|
|
<div class="leftBox">
|
|
|
- <div class="num">56000</div>
|
|
|
+ <div class="num">{{ countData.dayPlan }}</div>
|
|
|
<div class="title">今日计划</div>
|
|
|
</div>
|
|
|
<div class="rightBox">
|
|
|
- <div class="num">56000</div>
|
|
|
+ <div class="num">{{ countData.dayFinish }}</div>
|
|
|
<div class="title">今日完成</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="small">
|
|
|
<div class="title">本周进度</div>
|
|
|
- <div class="title">400/ <span class="num">2000</span></div>
|
|
|
+ <div class="title">
|
|
|
+ {{ countData.weekFinish }} /
|
|
|
+ <span class="num">{{ countData.weekPlan }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="small">
|
|
|
<div class="title">本月进度</div>
|
|
|
- <div class="title">400/ <span class="num">2000</span></div>
|
|
|
+ <div class="title">
|
|
|
+ {{ countData.monthFinish }} /
|
|
|
+ <span class="num">{{ countData.monthPlan }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -35,12 +41,26 @@
|
|
|
<div class="rightItem">完成率</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <el-scrollbar class="scrollbar">
|
|
|
- <div class="infoItem" v-for="(item, index) in 40" :key="index">
|
|
|
- <div class="leftItem textComent itembg">dadwadwa</div>
|
|
|
- <div class="rightItem itembg">123</div>
|
|
|
- </div>
|
|
|
- </el-scrollbar>
|
|
|
+ <ShowScroll
|
|
|
+ :ref="(el) => ShowScrollRef.push(el)"
|
|
|
+ :scrollRef="scrollbarRef"
|
|
|
+ :innerRef="innerRef"
|
|
|
+ >
|
|
|
+ <el-scrollbar ref="scrollbarRef" class="scrollbar">
|
|
|
+ <div ref="innerRef">
|
|
|
+ <div
|
|
|
+ class="infoItem"
|
|
|
+ v-for="(item, index) in taskRateArray"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="leftItem textComent itembg">
|
|
|
+ {{ item.stationName }}
|
|
|
+ </div>
|
|
|
+ <div class="rightItem itembg">{{ item.dayRate }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </ShowScroll>
|
|
|
</div>
|
|
|
<div class="middle">
|
|
|
<Middle3D class="item" />
|
|
@@ -48,24 +68,50 @@
|
|
|
<TitleHeaderB title="自动化设备状态" />
|
|
|
<el-scrollbar class="scrollbar">
|
|
|
<div class="infoContent">
|
|
|
- <div class="deviceInfo">
|
|
|
- <div class="img"></div>
|
|
|
+ <div
|
|
|
+ class="deviceInfo"
|
|
|
+ v-for="(item, index) in deviceArray"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="img">
|
|
|
+ <el-image
|
|
|
+ :src="`/images/${getRandomLetter()}.png`"
|
|
|
+ class="img"
|
|
|
+ />
|
|
|
+ <div
|
|
|
+ class="imgbg"
|
|
|
+ :class="{
|
|
|
+ outlinebg: item.state == '离线',
|
|
|
+ errorbg: item.state == '故障',
|
|
|
+ }"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
<div class="info">
|
|
|
- <div class="info1">多媒体</div>
|
|
|
+ <div class="info1">{{ item.deviceName }}</div>
|
|
|
<div class="info2">
|
|
|
<div class="text2">
|
|
|
今日稼动
|
|
|
- <span class="nums">70%</span>
|
|
|
+ <span class="nums">{{ item.utilizationRate }}</span>
|
|
|
</div>
|
|
|
|
|
|
|
<div class="text2">
|
|
|
总稼动
|
|
|
- <span class="nums" style="color: white">80%</span>
|
|
|
+ <span class="nums" style="color: white">{{
|
|
|
+ item.totalRate
|
|
|
+ }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="info3">
|
|
|
- <div class="ip">IP:123.123.123.1</div>
|
|
|
- <div class="infoState">在线</div>
|
|
|
+ <div class="ip">IP:{{ item.ip }}</div>
|
|
|
+ <div
|
|
|
+ class="infoState"
|
|
|
+ :class="{
|
|
|
+ red: item.state == '故障',
|
|
|
+ white: item.state == '离线',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{ item.state }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -90,12 +136,16 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-scrollbar class="scrollbar" style="height: 53vh">
|
|
|
- <div class="infoItem" v-for="(item, index) in 40" :key="index">
|
|
|
+ <div
|
|
|
+ class="infoItem"
|
|
|
+ v-for="(item, index) in materialArray"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
<div class="leftItem1 textComent itembg">
|
|
|
- dadw味哒哒带娃打完阿达的啊我adwa
|
|
|
+ {{ item.materialName }}
|
|
|
</div>
|
|
|
- <div class="midItem1 itembg">今日排产</div>
|
|
|
- <div class="rightItem1 itembg">123</div>
|
|
|
+ <div class="midItem1 itembg">{{ item.planNum }}</div>
|
|
|
+ <div class="rightItem1 itembg">{{ item.dayRate }}</div>
|
|
|
</div>
|
|
|
</el-scrollbar>
|
|
|
</div>
|
|
@@ -104,13 +154,21 @@
|
|
|
<div class="titleInfo">
|
|
|
<div class="infoItem">
|
|
|
<div class="leftItem">工位名称</div>
|
|
|
- <div class="rightItem">完成率</div>
|
|
|
+ <div class="rightItem">报故数量</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-scrollbar class="scrollbar" style="height: 20vh">
|
|
|
- <div class="infoItem" v-for="(item, index) in 40" :key="index">
|
|
|
- <div class="leftItem textComent itembg">dadwadwa</div>
|
|
|
- <div class="rightItem itembg">123</div>
|
|
|
+ <div
|
|
|
+ class="infoItem"
|
|
|
+ v-for="(item, index) in todayErrorArray"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="leftItem textComent itembg">
|
|
|
+ {{ item.materialName }}
|
|
|
+ </div>
|
|
|
+ <div class="rightItem itembg" style="color: #db4848">
|
|
|
+ {{ item.unqualifiedNum }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-scrollbar>
|
|
|
</div>
|
|
@@ -122,49 +180,66 @@
|
|
|
<script setup>
|
|
|
import CommonHeaderB from "@/views/report/statistics/screens/common-headerB.vue";
|
|
|
import TitleHeaderB from "../titleHeaderB.vue";
|
|
|
+import ShowScroll from "@/components/ShowScroll/index.vue";
|
|
|
import * as echarts from "echarts";
|
|
|
-import { getCensusNonconforming } from "@/api/bigScreen";
|
|
|
+import {
|
|
|
+ getFaultCount,
|
|
|
+ getTaskCount,
|
|
|
+ getTaskRate,
|
|
|
+ getDeviceList,
|
|
|
+ getMaterialRate,
|
|
|
+ getTodayError,
|
|
|
+} from "@/api/bigScreen";
|
|
|
import Middle3D from "./middle3D.vue";
|
|
|
import moment from "moment";
|
|
|
const fontSize = ref(0);
|
|
|
+const scrollbarRef = ref(null);
|
|
|
+const ShowScrollRef = ref([]);
|
|
|
+const innerRef = ref(null);
|
|
|
const setFontSize = () => {
|
|
|
fontSize.value = (window.innerHeight / 100) * 1.55;
|
|
|
};
|
|
|
const charts2 = shallowRef(null);
|
|
|
const chartsData2 = ref([]);
|
|
|
+const getRandomLetter = () => {
|
|
|
+ const letters = ["a", "b", "c", "d"];
|
|
|
+ const randomIndex = Math.floor(Math.random() * letters.length);
|
|
|
+ return letters[randomIndex];
|
|
|
+};
|
|
|
const getData4 = async () => {
|
|
|
//不合格品统计
|
|
|
- const { data } = await getCensusNonconforming();
|
|
|
+ const { data } = await getFaultCount();
|
|
|
chartsData2.value = data;
|
|
|
- chartsData2.value.list = [
|
|
|
- [
|
|
|
- { name: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa", num: "00" },
|
|
|
- { name: "aaaa", num: "01" },
|
|
|
- { name: "aaaa", num: "02" },
|
|
|
- ],
|
|
|
- [
|
|
|
- { name: "bb", num: "20" },
|
|
|
- { name: "bb", num: "20" },
|
|
|
- { name: "bb", num: "20" },
|
|
|
- ],
|
|
|
- [
|
|
|
- ({ name: "cc", num: "20" },
|
|
|
- { name: "cc", num: "20" },
|
|
|
- { name: "cc", num: "20" }),
|
|
|
- ],
|
|
|
- [
|
|
|
- ({ name: "dd", num: "20" },
|
|
|
- { name: "ff", num: "20" },
|
|
|
- { name: "cc", num: "20" }),
|
|
|
- ],
|
|
|
- [
|
|
|
- ({ name: "ff", num: "20" },
|
|
|
- { name: "ff", num: "20" },
|
|
|
- { name: "ff", num: "20" }),
|
|
|
- ],
|
|
|
- ];
|
|
|
};
|
|
|
-
|
|
|
+const countData = ref({});
|
|
|
+//获取今日任务完成相关统计
|
|
|
+const getTodayData = async () => {
|
|
|
+ const { data } = await getTaskCount();
|
|
|
+ countData.value = data;
|
|
|
+};
|
|
|
+const taskRateArray = ref([]);
|
|
|
+//获取工位任务完成率
|
|
|
+const getRateArray = async () => {
|
|
|
+ const { data } = await getTaskRate();
|
|
|
+ taskRateArray.value = data;
|
|
|
+};
|
|
|
+const deviceArray = ref([]);
|
|
|
+//获取设备列表
|
|
|
+const getDevice = async () => {
|
|
|
+ const { data } = await getDeviceList();
|
|
|
+ deviceArray.value = data;
|
|
|
+};
|
|
|
+const materialArray = ref([]);
|
|
|
+const getMaterialArray = async () => {
|
|
|
+ const { data } = await getMaterialRate();
|
|
|
+ materialArray.value = data;
|
|
|
+};
|
|
|
+//今日报故
|
|
|
+const todayErrorArray = ref([]);
|
|
|
+const getTodayErrorArray = async () => {
|
|
|
+ const { data } = await getTodayError();
|
|
|
+ todayErrorArray.value = data;
|
|
|
+};
|
|
|
const option1 = {
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
@@ -180,14 +255,21 @@ const option1 = {
|
|
|
color: "#fff",
|
|
|
},
|
|
|
formatter: function (param) {
|
|
|
- const array = [moment().year() + "年" + param[0].name + "<br/>"];
|
|
|
+ const array = [
|
|
|
+ moment().year() +
|
|
|
+ "年" +
|
|
|
+ param[0].name +
|
|
|
+ " " +
|
|
|
+ param[0].value +
|
|
|
+ "<br/>",
|
|
|
+ ];
|
|
|
for (
|
|
|
let i = 0;
|
|
|
- i < chartsData2.value.list[param[0].dataIndex].length;
|
|
|
+ i < chartsData2.value.faultList[param[0].dataIndex].length;
|
|
|
i++
|
|
|
) {
|
|
|
array.push(
|
|
|
- ` <span style='width: 10vw'>${chartsData2.value.list[param[0].dataIndex][i].name}</span><span style='color:#D75656;'> ${chartsData2.value.list[param[0].dataIndex][i].num}</span>` +
|
|
|
+ ` <span style='width: 10vw'>${chartsData2.value.faultList[param[0].dataIndex][i].materialName}</span><span style='color:#D75656;'> ${chartsData2.value.faultList[param[0].dataIndex][i].unqualifiedNum}</span>` +
|
|
|
"<br/>"
|
|
|
);
|
|
|
}
|
|
@@ -197,7 +279,7 @@ const option1 = {
|
|
|
grid: {
|
|
|
left: "3%",
|
|
|
right: "3%",
|
|
|
- top: "10%",
|
|
|
+ top: "12%",
|
|
|
bottom: "15%",
|
|
|
},
|
|
|
yAxis: {
|
|
@@ -253,12 +335,31 @@ const setChart1Option = () => {
|
|
|
onMounted(async () => {
|
|
|
setFontSize();
|
|
|
await getData4();
|
|
|
+ getTodayData();
|
|
|
+ getRateArray();
|
|
|
+ getDevice();
|
|
|
+ getMaterialArray();
|
|
|
+ getTodayErrorArray();
|
|
|
charts2.value = echarts.init(document.getElementById("charts2"));
|
|
|
setChart1Option();
|
|
|
+ window.addEventListener("resize", function () {
|
|
|
+ charts2.value.resize();
|
|
|
+ });
|
|
|
+});
|
|
|
+nextTick(() => {
|
|
|
+ ShowScrollRef.value.forEach((el) => {
|
|
|
+ el.setActive();
|
|
|
+ });
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.red {
|
|
|
+ color: red !important;
|
|
|
+}
|
|
|
+.white {
|
|
|
+ color: white !important;
|
|
|
+}
|
|
|
.titleInfo {
|
|
|
height: 3vh;
|
|
|
}
|
|
@@ -382,11 +483,30 @@ onMounted(async () => {
|
|
|
width: 19vw;
|
|
|
height: 10vh;
|
|
|
display: flex;
|
|
|
- background-color: rgba(255, 255, 255, 0.06);
|
|
|
+ background-color: rgba(255, 255, 255, 0.1);
|
|
|
clip-path: polygon(0% 0%, 85% 0%, 100% 25%, 100% 100%, 0% 100%);
|
|
|
.img {
|
|
|
height: 10vh;
|
|
|
width: 7vw;
|
|
|
+ position: relative;
|
|
|
+ .imgbg {
|
|
|
+ position: absolute;
|
|
|
+ height: 10vh;
|
|
|
+ width: 7vw;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 2;
|
|
|
+ background-color: #06ffa520;
|
|
|
+ border: 0.4vh solid #06ffa5;
|
|
|
+ }
|
|
|
+ .outlinebg {
|
|
|
+ background-color: #ffffff20 !important;
|
|
|
+ border: 0.4vh solid #fff !important;
|
|
|
+ }
|
|
|
+ .errorbg {
|
|
|
+ background-color: #db484820 !important;
|
|
|
+ border: 0.4vh solid #db4848 !important;
|
|
|
+ }
|
|
|
}
|
|
|
.info {
|
|
|
height: 10vh;
|