Compare commits
4 Commits
fb4c1500e7
...
52a9111a19
| Author | SHA1 | Date | |
|---|---|---|---|
|
52a9111a19 | ||
|
|
8ff6fd02df | ||
|
|
1b33520b61 | ||
|
|
335f61c0a1 |
@ -6,6 +6,7 @@ import Container from "./components/Base/Container.vue";
|
||||
import DatetimeTool from "./components/HeadTime.vue";
|
||||
import AppHeader from "./components/Base/Header.vue";
|
||||
import Tools from "./components/Tools.vue";
|
||||
import FullEqList from "./FullEqList.vue";
|
||||
|
||||
const mainContainer = ref(null);
|
||||
const props = defineProps({
|
||||
@ -47,24 +48,14 @@ function handleResolutionChange(width, height) {
|
||||
|
||||
<template>
|
||||
<div id="main-container" ref="mainContainer" class="main-container">
|
||||
<div id="main-container__fulleq"></div>
|
||||
<div id="main-container__fulleq">
|
||||
<FullEqList />
|
||||
</div>
|
||||
<DatetimeTool />
|
||||
<Tools @change-resolution="handleResolutionChange" />
|
||||
<AppHeader />
|
||||
|
||||
<div class="alert-list-page">
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -279px;
|
||||
width: calc(100% + 279px);
|
||||
height: 100%;
|
||||
background: #ccc3;
|
||||
"
|
||||
>
|
||||
<!-- <ThreeD :line="line ?? '1'" /> -->
|
||||
</div>
|
||||
<Container class="alert-list" title="报警列表" icon="cube">
|
||||
<div class="alert-list__table" style="">
|
||||
<el-table
|
||||
|
||||
119
src/FullEqList.vue
Normal file
119
src/FullEqList.vue
Normal file
@ -0,0 +1,119 @@
|
||||
<!--
|
||||
filename: FullEqList.vue
|
||||
author: liubin
|
||||
date: 2024-03-05 14:13:06
|
||||
description:
|
||||
-->
|
||||
<script setup>
|
||||
import "./full-eq-list.css";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="absolute v-1 tag-container">
|
||||
<span class="name-tag">M7上片</span>
|
||||
<span class="name-tag">M6上片</span>
|
||||
<span class="name-tag">M5上片</span>
|
||||
<span class="name-tag">M4上片</span>
|
||||
<span class="name-tag">M3上片</span>
|
||||
<span class="name-tag">M2上片</span>
|
||||
<span class="name-tag">M1上片</span>
|
||||
</div>
|
||||
<div class="absolute v-2 tag-container">
|
||||
<span class="name-tag">M7磨边机</span>
|
||||
<span class="name-tag">M6磨边机</span>
|
||||
<span class="name-tag">M5磨边机</span>
|
||||
<span class="name-tag">M4磨边机</span>
|
||||
<span class="name-tag">M3磨边机</span>
|
||||
<span class="name-tag">M2磨边机</span>
|
||||
<span class="name-tag">M1磨边机</span>
|
||||
</div>
|
||||
<div class="absolute v-3 tag-container">
|
||||
<span class="name-tag">M7清洗机</span>
|
||||
<span class="name-tag">M6清洗机</span>
|
||||
<span class="name-tag">M5清洗机</span>
|
||||
<span class="name-tag">M4清洗机</span>
|
||||
<span class="name-tag">M3清洗机</span>
|
||||
<span class="name-tag">M2清洗机</span>
|
||||
<span class="name-tag">M1清洗机</span>
|
||||
</div>
|
||||
<div class="absolute z-1 v-4 tag-container">
|
||||
<span class="name-tag">Z7钻孔机</span>
|
||||
<span class="name-tag">Z6钻孔机</span>
|
||||
<span class="name-tag">Z5钻孔机</span>
|
||||
<span class="name-tag">Z4钻孔机</span>
|
||||
<span class="name-tag">Z3钻孔机</span>
|
||||
<span class="name-tag">Z2钻孔机</span>
|
||||
<span class="name-tag">Z1钻孔机</span>
|
||||
</div>
|
||||
<div class="absolute z-1 v-5 tag-container">
|
||||
<span class="name-tag">S7清洗机</span>
|
||||
<span class="name-tag">S6清洗机</span>
|
||||
<span class="name-tag">S5清洗机</span>
|
||||
<span class="name-tag">S4清洗机</span>
|
||||
<span class="name-tag">S3清洗机</span>
|
||||
<span class="name-tag">S2清洗机</span>
|
||||
<span class="name-tag">S1清洗机</span>
|
||||
</div>
|
||||
<div class="absolute z-1 v-6 tag-container">
|
||||
<span class="name-tag">S7前储片台</span>
|
||||
<span class="name-tag">S6前储片台</span>
|
||||
<span class="name-tag">S5前储片台</span>
|
||||
<span class="name-tag">S4前储片台</span>
|
||||
<span class="name-tag">S3前储片台</span>
|
||||
<span class="name-tag">S2前储片台</span>
|
||||
<span class="name-tag">S1前储片台</span>
|
||||
</div>
|
||||
<div class="absolute z-2 v-7 tag-container">
|
||||
<span class="name-tag">S7丝印机</span>
|
||||
<span class="name-tag">S6丝印机</span>
|
||||
<span class="name-tag">S5丝印机</span>
|
||||
<span class="name-tag">S4丝印机</span>
|
||||
<span class="name-tag">S3丝印机</span>
|
||||
<span class="name-tag">S2丝印机</span>
|
||||
<span class="name-tag">S1丝印机</span>
|
||||
</div>
|
||||
<div class="absolute z-2 v-8 tag-container">
|
||||
<span class="name-tag">S7固化炉</span>
|
||||
<span class="name-tag">S6固化炉</span>
|
||||
<span class="name-tag">S5固化炉</span>
|
||||
<span class="name-tag">S4固化炉</span>
|
||||
<span class="name-tag">S3固化炉</span>
|
||||
<span class="name-tag">S2固化炉</span>
|
||||
<span class="name-tag">S1固化炉</span>
|
||||
</div>
|
||||
<div class="absolute z-1 v-10 tag-container">
|
||||
<span class="name-tag">D2镀膜机</span>
|
||||
<span class="name-tag">D1镀膜机</span>
|
||||
</div>
|
||||
<div class="absolute z-1 v-9 tag-container">
|
||||
<span class="name-tag">S7后储片台</span>
|
||||
<span class="name-tag">S6后储片台</span>
|
||||
<span class="name-tag">S5后储片台</span>
|
||||
<span class="name-tag">S4后储片台</span>
|
||||
<span class="name-tag">S3后储片台</span>
|
||||
<span class="name-tag">S2后储片台</span>
|
||||
<span class="name-tag">S1后储片台</span>
|
||||
</div>
|
||||
<div class="absolute z-3 tag-container">
|
||||
<span class="name-tag">B3前储片台</span>
|
||||
<span class="name-tag">B2前储片台</span>
|
||||
<span class="name-tag">B1前储片台</span>
|
||||
</div>
|
||||
<div class="absolute z-3 b-1 tag-container">
|
||||
<span class="name-tag">B3清洗机</span>
|
||||
<span class="name-tag">B2清洗机</span>
|
||||
<span class="name-tag">B1清洗机</span>
|
||||
</div>
|
||||
<div class="absolute z-3 b-2 tag-container">
|
||||
<span class="name-tag">B3下片</span>
|
||||
<span class="name-tag">B2下片</span>
|
||||
<span class="name-tag">B1下片</span>
|
||||
</div>
|
||||
<div class="absolute z-3 b-3 tag-container">
|
||||
<span class="name-tag">B3后储片台</span>
|
||||
<span class="name-tag">B2后储片台</span>
|
||||
<span class="name-tag">B1后储片台</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -9,6 +9,8 @@ import TodayYield from "./components/mainscreen/TodayYield.vue";
|
||||
import SumYield from "./components/mainscreen/SumYield.vue";
|
||||
import TodayRate from "./components/mainscreen/TodayRate.vue";
|
||||
import SumRate from "./components/mainscreen/SumRate.vue";
|
||||
import FullEqList from "./FullEqList.vue";
|
||||
import { connect0 } from "./utils/useWebsocket";
|
||||
|
||||
const mainContainer = ref(null);
|
||||
const props = defineProps({
|
||||
@ -18,6 +20,9 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
const store = useWsStore();
|
||||
|
||||
connect0(store);
|
||||
|
||||
const alarmList = ref(
|
||||
(store.data1.alarmArrList || []).map((item, index) => ({
|
||||
id: item.id,
|
||||
@ -50,7 +55,9 @@ function handleResolutionChange(width, height) {
|
||||
|
||||
<template>
|
||||
<div id="main-container" ref="mainContainer" class="main-container">
|
||||
<div id="main-container__fulleq"></div>
|
||||
<div id="main-container__fulleq">
|
||||
<FullEqList />
|
||||
</div>
|
||||
<DatetimeTool />
|
||||
<Tools @change-resolution="handleResolutionChange" />
|
||||
<AppHeader />
|
||||
@ -166,15 +173,6 @@ function handleResolutionChange(width, height) {
|
||||
background: url(./assets/bg.png) 100% / cover no-repeat;
|
||||
}
|
||||
|
||||
#main-container__fulleq {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(./assets/full-lines.png) 100% / cover no-repeat;
|
||||
}
|
||||
|
||||
.pages-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
@ -1,10 +1,152 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, nextTick } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Container from "../Base/Container.vue";
|
||||
import { useWsStore } from "../../store";
|
||||
|
||||
const setupFn = (chart, datalist = [0.0, 0.0, 0.0]) => {
|
||||
const option = {
|
||||
color: ["#F3908B"],
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "5%",
|
||||
bottom: "5%",
|
||||
left: "3%",
|
||||
right: "5%",
|
||||
containLabel: true,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
fontSize: 14,
|
||||
color: "#fff",
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#ccc6",
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["钢1线", "钢2线", "钢3线"],
|
||||
axisLabel: {
|
||||
fontSize: 14,
|
||||
color: "#fff",
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#ccc6",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "line",
|
||||
data: datalist,
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
// formatter: (params) => {
|
||||
// console.log("params", datalist[params.dataIndex]);
|
||||
// },
|
||||
formatter: "{c}%",
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
};
|
||||
|
||||
const store = useWsStore();
|
||||
const chartChart = ref(null);
|
||||
const chart = ref(null);
|
||||
const showChartDom = ref(false);
|
||||
|
||||
/** 无状态，处理数据 */
|
||||
function loadData(yieldArray) {
|
||||
// lineSumProductYield
|
||||
const result = [];
|
||||
if (yieldArray == undefined || yieldArray?.length == 0) return null;
|
||||
for (let i = 0; i < yieldArray.length; ++i) {
|
||||
if (yieldArray[i].name == "钢1线") {
|
||||
result[0] = parseFloat(yieldArray[i].data);
|
||||
} else if (yieldArray[i].name == "钢2线") {
|
||||
result[1] = parseFloat(yieldArray[i].data);
|
||||
} else if (yieldArray[i].name == "钢3线") {
|
||||
result[2] = parseFloat(yieldArray[i].data);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function setupChart(chart, dom, data) {
|
||||
if (chart.value) chart.value.dispose();
|
||||
nextTick(() => {
|
||||
chart.value = echarts.init(dom);
|
||||
setupFn(chart.value, data);
|
||||
});
|
||||
}
|
||||
|
||||
/** 有状态，处理数据 */
|
||||
function __apply(yieldArray) {
|
||||
const d = loadData(yieldArray);
|
||||
if (!d) {
|
||||
showChartDom.value = false;
|
||||
if (chart.value) chart.value.dispose();
|
||||
return;
|
||||
}
|
||||
showChartDom.value = true;
|
||||
setupChart(chart, chartChart.value, d);
|
||||
}
|
||||
|
||||
// 订阅
|
||||
store.$subscribe((mutation, state) => {
|
||||
__apply(state.mainDataChart.lineSumProductYield);
|
||||
// __apply([
|
||||
// { name: "钢1线", data: 0.32 },
|
||||
// { name: "钢2线", data: 0.91 },
|
||||
// { name: "钢3线", data: 0.54 },
|
||||
// ]);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
chartChart.value.classList.add("h-full");
|
||||
__apply([
|
||||
{ name: "钢1线", data: "0%" },
|
||||
{ name: "钢2线", data: "0%" },
|
||||
{ name: "钢3线", data: "0%" },
|
||||
]);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Container class="chart" title="累计生产线成品率" icon="cube">
|
||||
<p class="empty-data-hint">暂无数据</p>
|
||||
<div
|
||||
ref="chartChart"
|
||||
class="chart-chart"
|
||||
:style="{ opacity: showChartDom ? 1 : 0 }"
|
||||
></div>
|
||||
<p v-show="!chart" class="empty-data-hint">暂无数据</p>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.chart {
|
||||
/* height: 300px; */
|
||||
}
|
||||
|
||||
.chart-chart {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,7 +3,70 @@ import { ref, onMounted, nextTick } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Container from "../Base/Container.vue";
|
||||
import { useWsStore } from "../../store";
|
||||
import setupFn from "./TeamChartDayOptions";
|
||||
|
||||
|
||||
const setupFn = (chart, datalist = [0.0, 0.0, 0.0, 0.0]) => {
|
||||
console.log("datalist", datalist);
|
||||
const option = {
|
||||
color: ["#3398FB"],
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "5%",
|
||||
bottom: "5%",
|
||||
left: "3%",
|
||||
right: "5%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "value",
|
||||
boundaryGap: [0, 0.01],
|
||||
axisLabel: {
|
||||
fontSize: 14,
|
||||
color: "#fff",
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#ccc6",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "category",
|
||||
data: ["钢1线", "钢2线", "钢3线", "合计"],
|
||||
axisLabel: {
|
||||
fontSize: 14,
|
||||
color: "#fff",
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#ccc6",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
data: datalist,
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
formatter: "{c}",
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
};
|
||||
|
||||
const store = useWsStore();
|
||||
const chartChart = ref(null);
|
||||
@ -15,12 +78,15 @@ function loadData(yieldArray) {
|
||||
const result = [];
|
||||
if (yieldArray == undefined || yieldArray?.length == 0) return null;
|
||||
for (let i = 0; i < yieldArray.length; ++i) {
|
||||
if (yieldArray[i].teamName == "A组") {
|
||||
result[0] = parseInt(yieldArray[i].yield);
|
||||
} else if (yieldArray[i].teamName == "B组") {
|
||||
result[1] = parseInt(yieldArray[i].yield);
|
||||
} else if (yieldArray[i].teamName == "C组") {
|
||||
result[2] = parseInt(yieldArray[i].yield);
|
||||
if (yieldArray[i].name == "钢1线") {
|
||||
result[0] = parseInt(yieldArray[i].data);
|
||||
} else if (yieldArray[i].name == "钢2线") {
|
||||
result[1] = parseInt(yieldArray[i].data);
|
||||
} else if (yieldArray[i].name == "钢3线") {
|
||||
result[2] = parseInt(yieldArray[i].data);
|
||||
} else {
|
||||
// 合计
|
||||
result[3] = parseInt(yieldArray[i].data);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
@ -37,11 +103,6 @@ function setupChart(chart, dom, data) {
|
||||
/** 有状态，处理数据 */
|
||||
function __apply(yieldArray) {
|
||||
const d = loadData(yieldArray);
|
||||
// const d = loadData([
|
||||
// { teamName: "A组", yield: 11 },
|
||||
// { teamName: "B组", yield: 23 },
|
||||
// { teamName: "C组", yield: 14 },
|
||||
// ]);
|
||||
if (!d) {
|
||||
showChartDom.value = false;
|
||||
if (chart.value) chart.value.dispose();
|
||||
@ -53,12 +114,23 @@ function __apply(yieldArray) {
|
||||
|
||||
// 订阅
|
||||
store.$subscribe((mutation, state) => {
|
||||
__apply(state.data2.classTodayProductYield);
|
||||
__apply(state.mainDataChart.lineSumProductData);
|
||||
// __apply([
|
||||
// { name: "钢1线", data: 11 },
|
||||
// { name: "钢2线", data: 22 },
|
||||
// { name: "钢3线", data: 33 },
|
||||
// { name: "合计", data: 66 },
|
||||
// ]);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
chartChart.value.classList.add("h-full");
|
||||
// __apply();
|
||||
__apply([
|
||||
{ name: "钢1线", data: 0 },
|
||||
{ name: "钢2线", data: 0 },
|
||||
{ name: "钢3线", data: 0 },
|
||||
{ name: "合计", data: 0 },
|
||||
]);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,59 +0,0 @@
|
||||
export const options = {
|
||||
color: ['#a4c9d1', '#72340b', '#ffd601' ],
|
||||
grid: {
|
||||
top: 8,
|
||||
bottom: 20,
|
||||
left: 42,
|
||||
right: 28,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
xAxis: {
|
||||
max: 100,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#fff2",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 16,
|
||||
color: "#e5e5e5a3",
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "category",
|
||||
data: ["A组", "B组", "C组"],
|
||||
inverse: true,
|
||||
max: 2, // only the largest 3 bars will be displayed
|
||||
axisLabel: {
|
||||
fontSize: 16,
|
||||
color: "#e5e5e5a3",
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#e5e5e5",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
data: [34, 2, 23],
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
formatter: "{c}%",
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
};
|
||||
|
||||
export default function setup(echartInstance, dataArr) {
|
||||
const new_options = { ...options };
|
||||
new_options.series[0].data = dataArr;
|
||||
echartInstance.setOption(new_options);
|
||||
}
|
||||
@ -1,10 +1,153 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, nextTick } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Container from "../Base/Container.vue";
|
||||
import { useWsStore } from "../../store";
|
||||
|
||||
const setupFn = (chart, datalist = [0.0, 0.0, 0.0]) => {
|
||||
const option = {
|
||||
color: ["#F3908B"],
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "5%",
|
||||
bottom: "5%",
|
||||
left: "3%",
|
||||
right: "5%",
|
||||
containLabel: true,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
fontSize: 14,
|
||||
color: "#fff",
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#ccc6",
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["钢1线", "钢2线", "钢3线"],
|
||||
axisLabel: {
|
||||
fontSize: 14,
|
||||
color: "#fff",
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#ccc6",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "line",
|
||||
data: datalist,
|
||||
// data: datalist.map((item) => item * 100),
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
// formatter: (params) => {
|
||||
// console.log("params", datalist[params.dataIndex]);
|
||||
// },
|
||||
formatter: "{c}%",
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
};
|
||||
|
||||
const store = useWsStore();
|
||||
const chartChart = ref(null);
|
||||
const chart = ref(null);
|
||||
const showChartDom = ref(false);
|
||||
|
||||
/** 无状态，处理数据 */
|
||||
function loadData(yieldArray) {
|
||||
// lineTodayProductYield
|
||||
const result = [];
|
||||
if (yieldArray == undefined || yieldArray?.length == 0) return null;
|
||||
for (let i = 0; i < yieldArray.length; ++i) {
|
||||
if (yieldArray[i].name == "钢1线") {
|
||||
result[0] = parseFloat(yieldArray[i].data) || 0.0;
|
||||
} else if (yieldArray[i].name == "钢2线") {
|
||||
result[1] = parseFloat(yieldArray[i].data) || 0.0;
|
||||
} else if (yieldArray[i].name == "钢3线") {
|
||||
result[2] = parseFloat(yieldArray[i].data) || 0.0;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function setupChart(chart, dom, data) {
|
||||
if (chart.value) chart.value.dispose();
|
||||
nextTick(() => {
|
||||
chart.value = echarts.init(dom);
|
||||
setupFn(chart.value, data);
|
||||
});
|
||||
}
|
||||
|
||||
/** 有状态，处理数据 */
|
||||
function __apply(yieldArray) {
|
||||
const d = loadData(yieldArray);
|
||||
if (!d) {
|
||||
showChartDom.value = false;
|
||||
if (chart.value) chart.value.dispose();
|
||||
return;
|
||||
}
|
||||
showChartDom.value = true;
|
||||
setupChart(chart, chartChart.value, d);
|
||||
}
|
||||
|
||||
// 订阅
|
||||
store.$subscribe((mutation, state) => {
|
||||
__apply(state.mainDataChart.lineTodayProductYield);
|
||||
// __apply([
|
||||
// { name: "钢1线", data: 0.32 },
|
||||
// { name: "钢2线", data: 0.91 },
|
||||
// { name: "钢3线", data: 0.54 },
|
||||
// ]);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
chartChart.value.classList.add("h-full");
|
||||
__apply([
|
||||
{ name: "钢1线", data: "0%" },
|
||||
{ name: "钢2线", data: "0%" },
|
||||
{ name: "钢3线", data: "0%" },
|
||||
]);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Container class="chart" title="今日生产线成品率" icon="cube">
|
||||
<p class="empty-data-hint">暂无数据</p>
|
||||
<div
|
||||
ref="chartChart"
|
||||
class="chart-chart"
|
||||
:style="{ opacity: showChartDom ? 1 : 0 }"
|
||||
></div>
|
||||
<p v-show="!chart" class="empty-data-hint">暂无数据</p>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.chart {
|
||||
/* height: 300px; */
|
||||
}
|
||||
|
||||
.chart-chart {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,7 +3,69 @@ import { ref, onMounted, nextTick } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Container from "../Base/Container.vue";
|
||||
import { useWsStore } from "../../store";
|
||||
import setupFn from "./TeamChartDayOptions";
|
||||
|
||||
const setupFn = (chart, datalist = [0.0, 0.0, 0.0, 0.0]) => {
|
||||
console.log("datalist", datalist);
|
||||
const option = {
|
||||
color: ["#3398FB"],
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "5%",
|
||||
bottom: "5%",
|
||||
left: "3%",
|
||||
right: "5%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "value",
|
||||
boundaryGap: [0, 0.01],
|
||||
axisLabel: {
|
||||
fontSize: 14,
|
||||
color: "#fff",
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#ccc6",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "category",
|
||||
data: ["钢1线", "钢2线", "钢3线", "合计"],
|
||||
axisLabel: {
|
||||
fontSize: 14,
|
||||
color: "#fff",
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#ccc6",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
data: datalist,
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
formatter: "{c}",
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
};
|
||||
|
||||
const store = useWsStore();
|
||||
const chartChart = ref(null);
|
||||
@ -12,15 +74,19 @@ const showChartDom = ref(false);
|
||||
|
||||
/** 无状态，处理数据 */
|
||||
function loadData(yieldArray) {
|
||||
// lineTodayProductData
|
||||
const result = [];
|
||||
if (yieldArray == undefined || yieldArray?.length == 0) return null;
|
||||
for (let i = 0; i < yieldArray.length; ++i) {
|
||||
if (yieldArray[i].teamName == "A组") {
|
||||
result[0] = parseInt(yieldArray[i].yield);
|
||||
} else if (yieldArray[i].teamName == "B组") {
|
||||
result[1] = parseInt(yieldArray[i].yield);
|
||||
} else if (yieldArray[i].teamName == "C组") {
|
||||
result[2] = parseInt(yieldArray[i].yield);
|
||||
if (yieldArray[i].name == "钢1线") {
|
||||
result[0] = parseInt(yieldArray[i].data);
|
||||
} else if (yieldArray[i].name == "钢2线") {
|
||||
result[1] = parseInt(yieldArray[i].data);
|
||||
} else if (yieldArray[i].name == "钢3线") {
|
||||
result[2] = parseInt(yieldArray[i].data);
|
||||
} else {
|
||||
// 合计
|
||||
result[3] = parseInt(yieldArray[i].data);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
@ -37,11 +103,6 @@ function setupChart(chart, dom, data) {
|
||||
/** 有状态，处理数据 */
|
||||
function __apply(yieldArray) {
|
||||
const d = loadData(yieldArray);
|
||||
// const d = loadData([
|
||||
// { teamName: "A组", yield: 11 },
|
||||
// { teamName: "B组", yield: 23 },
|
||||
// { teamName: "C组", yield: 14 },
|
||||
// ]);
|
||||
if (!d) {
|
||||
showChartDom.value = false;
|
||||
if (chart.value) chart.value.dispose();
|
||||
@ -53,12 +114,23 @@ function __apply(yieldArray) {
|
||||
|
||||
// 订阅
|
||||
store.$subscribe((mutation, state) => {
|
||||
__apply(state.data2.classTodayProductYield);
|
||||
__apply(state.mainDataChart.lineTodayProductData);
|
||||
// __apply([
|
||||
// { name: "钢1线", data: 11 },
|
||||
// { name: "钢2线", data: 22 },
|
||||
// { name: "钢3线", data: 33 },
|
||||
// { name: "合计", data: 66 },
|
||||
// ]);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
chartChart.value.classList.add("h-full");
|
||||
// __apply();
|
||||
__apply([
|
||||
{ name: "钢1线", data: 0 },
|
||||
{ name: "钢2线", data: 0 },
|
||||
{ name: "钢3线", data: 0 },
|
||||
{ name: "合计", data: 0 },
|
||||
]);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
179
src/full-eq-list.css
Normal file
179
src/full-eq-list.css
Normal file
@ -0,0 +1,179 @@
|
||||
#main-container__fulleq {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(./assets/full-lines.png) 100% / cover no-repeat;
|
||||
}
|
||||
|
||||
.name-tag {
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
background: #ccc3;
|
||||
backdrop-filter: blur(3px);
|
||||
color: #000a;
|
||||
font-size: 12px;
|
||||
/* font-weight: 600; */
|
||||
transition: background 0.1s ease-out;
|
||||
user-select: none;
|
||||
width: 72px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
/* cursor: pointer; */
|
||||
/* transform: rotate(-45deg); */
|
||||
box-shadow: 0 0 5px 2px #0003;
|
||||
}
|
||||
|
||||
/* .name-tag:hover {
|
||||
background: #666c;
|
||||
} */
|
||||
|
||||
.tag-container > .name-tag:first-child {
|
||||
bottom: 214px;
|
||||
left: -128px;
|
||||
}
|
||||
.tag-container > .name-tag:nth-child(2) {
|
||||
bottom: 182px;
|
||||
left: -100px;
|
||||
}
|
||||
.tag-container > .name-tag:nth-child(3) {
|
||||
bottom: 150px;
|
||||
left: -88px;
|
||||
}
|
||||
.tag-container > .name-tag:nth-child(4) {
|
||||
bottom: 118px;
|
||||
left: -68px;
|
||||
}
|
||||
.tag-container > .name-tag:nth-child(5) {
|
||||
bottom: 86px;
|
||||
left: -52px;
|
||||
}
|
||||
.tag-container > .name-tag:nth-child(6) {
|
||||
bottom: 32px;
|
||||
left: -20px;
|
||||
}
|
||||
.tag-container > .name-tag:nth-child(7) {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.v-1 {
|
||||
bottom: 160px;
|
||||
left: 430px;
|
||||
}
|
||||
|
||||
.v-2 {
|
||||
bottom: 200px;
|
||||
left: 480px;
|
||||
}
|
||||
|
||||
.v-3 {
|
||||
bottom: 250px;
|
||||
left: 620px;
|
||||
}
|
||||
|
||||
.z-1 > .name-tag:first-child {
|
||||
bottom: 205px;
|
||||
left: -155px;
|
||||
}
|
||||
.z-1 > .name-tag:nth-child(2) {
|
||||
bottom: 180px;
|
||||
left: -130px;
|
||||
}
|
||||
.v-4 {
|
||||
bottom: 300px;
|
||||
left: 730px;
|
||||
}
|
||||
|
||||
.v-5 {
|
||||
bottom: 340px;
|
||||
left: 780px;
|
||||
}
|
||||
|
||||
.v-6 {
|
||||
bottom: 360px;
|
||||
left: 840px;
|
||||
}
|
||||
|
||||
.z-2 > .name-tag:first-child {
|
||||
bottom: 205px;
|
||||
left: -140px;
|
||||
}
|
||||
.z-2 > .name-tag:nth-child(2) {
|
||||
bottom: 180px;
|
||||
left: -110px;
|
||||
}
|
||||
.z-2 > .name-tag:nth-child(3) {
|
||||
bottom: 152px;
|
||||
left: -70px;
|
||||
}
|
||||
.z-2 > .name-tag:nth-child(4) {
|
||||
bottom: 128px;
|
||||
left: -50px;
|
||||
}
|
||||
.z-2 > .name-tag:nth-child(5) {
|
||||
bottom: 100px;
|
||||
left: -36px;
|
||||
}
|
||||
|
||||
.v-7 {
|
||||
bottom: 380px;
|
||||
left: 880px;
|
||||
}
|
||||
|
||||
.v-8 {
|
||||
bottom: 410px;
|
||||
left: 930px;
|
||||
}
|
||||
|
||||
.v-9 {
|
||||
bottom: 440px;
|
||||
left: 1020px;
|
||||
}
|
||||
|
||||
.v-10 {
|
||||
bottom: 260px;
|
||||
left: 1100px;
|
||||
}
|
||||
|
||||
.z-3 {
|
||||
bottom: 550px;
|
||||
left: 1400px;
|
||||
/* background: #c003; */
|
||||
}
|
||||
|
||||
.z-3 > .name-tag:first-child {
|
||||
bottom: 235px;
|
||||
left: -155px;
|
||||
}
|
||||
|
||||
.z-3 > .name-tag:nth-child(2) {
|
||||
bottom: 188px;
|
||||
left: -85px;
|
||||
}
|
||||
|
||||
.z-3 > .name-tag:nth-child(3) {
|
||||
bottom: 120px;
|
||||
left: 35px;
|
||||
}
|
||||
|
||||
.b-1 {
|
||||
bottom: 570px;
|
||||
left: 1440px;
|
||||
}
|
||||
|
||||
.b-2 {
|
||||
bottom: 600px;
|
||||
left: 1490px;
|
||||
}
|
||||
|
||||
.b-3 {
|
||||
bottom: 620px;
|
||||
left: 1530px;
|
||||
}
|
||||
@ -2,9 +2,11 @@ import { defineStore } from "pinia";
|
||||
import { ref } from "vue";
|
||||
|
||||
export const useWsStore = defineStore("wsData", () => {
|
||||
const data1 = ref({ test: "hello world" });
|
||||
const data1 = ref({});
|
||||
const data2 = ref({});
|
||||
const data3 = ref({});
|
||||
const mainDataChart = ref({});
|
||||
const mainDataAlarm = ref({});
|
||||
|
||||
function updateData(category, data) {
|
||||
switch (category) {
|
||||
@ -16,12 +18,19 @@ export const useWsStore = defineStore("wsData", () => {
|
||||
break;
|
||||
case "3":
|
||||
data3.value = { ...data3.value, ...data };
|
||||
break;
|
||||
case "main-chart":
|
||||
mainDataChart.value = { ...mainDataChart.value, ...data };
|
||||
break;
|
||||
case "main-alarm":
|
||||
mainDataAlarm.value = { ...mainDataAlarm.value, ...data };
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return { data1, data2, data3, updateData };
|
||||
return { data1, data2, data3, mainDataChart, mainDataAlarm, updateData };
|
||||
});
|
||||
// export const useWsStore = defineStore('wsData', {
|
||||
// state: () => ({
|
||||
|
||||
@ -6,7 +6,8 @@ export default function useWebsocket(store, path, excludePaths = []) {
|
||||
connectPath(store, path);
|
||||
}
|
||||
|
||||
const url = "ws://192.168.1.101:8082/QbMonitoring/websocket";
|
||||
// const url = "ws://192.168.1.101:8082/QbMonitoring/websocket";
|
||||
const url = "ws://192.168.0.33:8082/QbMonitoring/websocket";
|
||||
function connectPath(store, path) {
|
||||
new Client(
|
||||
{
|
||||
@ -34,7 +35,8 @@ function connectPath(store, path) {
|
||||
);
|
||||
}
|
||||
|
||||
function connect0(store) {
|
||||
export function connect0(store) {
|
||||
console.log("[*] Connecting main screen........");
|
||||
new Client(
|
||||
{
|
||||
url: url + "/0",
|
||||
@ -44,6 +46,14 @@ function connect0(store) {
|
||||
try {
|
||||
const data = JSON.parse(message.data);
|
||||
console.log("message --- 0 ---> ", JSON.parse(message.data));
|
||||
|
||||
if ("lineSumProductYield" in data) {
|
||||
// 主屏推送 图表数据
|
||||
store.updateData("main-chart", data);
|
||||
} else {
|
||||
// 主屏推送 报警数据
|
||||
store.updateData("main-alarm", data);
|
||||
}
|
||||
} catch (err) {
|
||||
console.log("[x] 未解析的ws数据: ", err);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user