This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-02-28 17:02:33 +08:00
parent 23bf4790df
commit 8d30507f1b
7 changed files with 689 additions and 20 deletions

View File

@ -1,18 +1,225 @@
<!-- 报警列表页面 -->
<script setup>
import { ref, onMounted } from "vue";
import { ref } from "vue";
import { useWsStore } from "./store";
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";
const mainContainer = ref(null);
const props = defineProps({
line: {
type: Number,
default: 1,
},
});
const store = useWsStore();
const alarmList = ref(
(store.data1.alarmArrList || []).map((item, index) => ({
id: item.id,
eqName: item.equipmentName,
eqIndex: index + 1,
alarmGrade: item.alarmLevel,
alarmDetail: item.alarmDetails,
position: `${item.productLine} - ${item.segment}`,
}))
);
// store.$subscribe((mutation, state) => {
// alarmList.value = state.data1.alarmArrList.map((item, index) => ({
// id: item.id,
// eqName: item.equipmentName,
// eqIndex: index + 1,
// alarmGrade: item.alarmLevel,
// alarmDetail: item.alarmDetails,
// position: `${item.productLine} - ${item.segment}`,
// }));
// });
// function handleIgnore() {
// alarmList.value.splice(0)
// }
function handleResolutionChange(width, height) {
mainContainer.value && changeScale(mainContainer.value, width, height);
}
</script>
<template>
<main class="alertlist-screen">
<h1 style="color: red">alert list</h1>
</main>
<div id="main-container" ref="mainContainer" class="main-container">
<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
class="dark-table"
:data="alarmList"
:show-overflow-tooltip="true"
row-class-name="dark-row"
header-row-class-name="dark-header"
>
<el-table-column
prop="eqName"
label="设备名"
width="80"
></el-table-column>
<el-table-column
prop="eqIndex"
label="序号"
width="60"
></el-table-column>
<el-table-column
prop="alarmGrade"
label="报警等级"
width="100"
></el-table-column>
<el-table-column
prop="alarmDetail"
label="报警细节"
width="144"
></el-table-column>
<el-table-column prop="position" label="定位"></el-table-column>
</el-table>
</div>
<!-- <button @click="handleIgnore" class="alert-btn">忽略</button> -->
</Container>
</div>
</div>
</template>
<style scoped>
.alertlist-screen {
background: #e6e6e6;
height: 100vh;
width: 100vw;
display: inline-block;
<style>
.dark-table {
height: 100%;
background: transparent;
user-select: none;
}
.dark-row {
color: #fff;
background: #006acd32 !important;
user-select: none;
}
.dark-row:nth-child(odd) {
background: #020d2d32 !important;
}
.dark-row > td.el-table__cell {
border: none;
font-size: 16px;
}
.dark-row > td.el-table__cell:not(:last-child) {
border-right: 1px solid #0003;
}
.dark-row:hover > td.el-table__cell {
background-color: #fff1 !important;
}
.dark-header {
background-color: transparent !important;
color: #fff;
}
.dark-header > th.el-table__cell.is-leaf {
border-bottom: none;
background-color: #006acd32 !important;
font-weight: 400;
letter-spacing: 1px;
}
.dark-header > th.el-table__cell {
font-size: 16px;
}
.dark-header > th.el-table__cell:not(:last-child) {
border-right: 1px solid #0003;
}
</style>
<style scoped>
.main-container {
width: 1920px;
height: 1080px;
background: #000;
position: relative;
display: flex;
flex-direction: column;
background: url(./assets/bg.png) 100% / cover no-repeat;
}
.pages-wrapper {
flex: 1;
display: flex;
position: relative;
}
.alert-list-page {
flex: 1;
position: relative;
}
.alert-list {
height: calc(100% - 56px);
width: 520px;
position: absolute;
top: 15px;
right: 32px;
display: flex;
flex-direction: column;
}
:fullscreen .alert-list {
width: 35%;
top: 32px;
height: calc(100% - 64px);
}
.alert-list__table {
height: calc(100% - 72px);
}
.alert-list__table >>> .el-table__inner-wrapper::before {
background: transparent;
}
button {
appearance: none;
outline: none;
border: none;
cursor: pointer;
}
.alert-btn {
width: 100%;
height: 72px;
background: #0f04;
color: #fff;
font-size: 32px;
line-height: 1;
letter-spacing: 2px;
transition: all 0.2s ease-out;
}
.alert-btn:hover {
background: #0f08;
}
</style>

View File

@ -1,18 +1,233 @@
<!-- 报警列表页面 -->
<script setup>
import { ref, onMounted } from "vue";
import { ref } from "vue";
import { useWsStore } from "./store";
import DatetimeTool from "./components/HeadTime.vue";
import AppHeader from "./components/Base/Header.vue";
import Tools from "./components/Tools.vue";
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";
const mainContainer = ref(null);
const props = defineProps({
line: {
type: Number,
default: 1,
},
});
const store = useWsStore();
const alarmList = ref(
(store.data1.alarmArrList || []).map((item, index) => ({
id: item.id,
eqName: item.equipmentName,
eqIndex: index + 1,
alarmGrade: item.alarmLevel,
alarmDetail: item.alarmDetails,
position: `${item.productLine} - ${item.segment}`,
}))
);
// store.$subscribe((mutation, state) => {
// alarmList.value = state.data1.alarmArrList.map((item, index) => ({
// id: item.id,
// eqName: item.equipmentName,
// eqIndex: index + 1,
// alarmGrade: item.alarmLevel,
// alarmDetail: item.alarmDetails,
// position: `${item.productLine} - ${item.segment}`,
// }));
// });
// function handleIgnore() {
// alarmList.value.splice(0)
// }
function handleResolutionChange(width, height) {
mainContainer.value && changeScale(mainContainer.value, width, height);
}
</script>
<template>
<main class="main-screen">
<h1>main screen</h1>
</main>
<div id="main-container" ref="mainContainer" class="main-container">
<DatetimeTool />
<Tools @change-resolution="handleResolutionChange" />
<AppHeader />
<div class="main-screen">
<!-- <div
style="
position: absolute;
top: 0;
left: -279px;
width: calc(100% + 279px);
height: 100%;
background: #ccc3;
"
>
<ThreeD :line="line ?? '1'" />
</div> -->
<TodayYield class=" " />
<SumYield class=" " />
<TodayRate class=" " />
<SumRate class=" " />
</div>
</div>
</template>
<style scoped>
.main-screen {
background: #e6e6e6;
height: 100vh;
width: 100vw;
display: inline-block;
<style>
.dark-table {
height: 100%;
background: transparent;
user-select: none;
}
.dark-row {
color: #fff;
background: #006acd32 !important;
user-select: none;
}
.dark-row:nth-child(odd) {
background: #020d2d32 !important;
}
.dark-row > td.el-table__cell {
border: none;
font-size: 16px;
}
.dark-row > td.el-table__cell:not(:last-child) {
border-right: 1px solid #0003;
}
.dark-row:hover > td.el-table__cell {
background-color: #fff1 !important;
}
.dark-header {
background-color: transparent !important;
color: #fff;
}
.dark-header > th.el-table__cell.is-leaf {
border-bottom: none;
background-color: #006acd32 !important;
font-weight: 400;
letter-spacing: 1px;
}
.dark-header > th.el-table__cell {
font-size: 16px;
}
.dark-header > th.el-table__cell:not(:last-child) {
border-right: 1px solid #0003;
}
</style>
<style scoped>
.ccontainer {
width: 420px;
height: 420px;
background: #ccc3;
/* position: absolute; */
}
.left-top {
top: 32px;
left: 32px;
}
.left-bottom {
bottom: 32px;
left: 32px;
}
.right-top {
top: 32px;
right: 32px;
}
.right-bottom {
bottom: 32px;
right: 32px;
}
.main-container {
width: 1920px;
height: 1080px;
background: #000;
position: relative;
display: flex;
flex-direction: column;
background: url(./assets/bg.png) 100% / cover no-repeat;
}
.pages-wrapper {
flex: 1;
display: flex;
position: relative;
}
.main-screen {
flex: 1;
position: relative;
display: grid;
grid-template-rows: repeat(2, 400px);
grid-template-columns: repeat(2, 400px);
justify-content: center;
/* align-content: center; */
/* place-content: center; */
gap: 15% 55%;
}
.alert-list {
height: calc(100% - 56px);
width: 520px;
position: absolute;
top: 15px;
right: 32px;
display: flex;
flex-direction: column;
}
:fullscreen .alert-list {
width: 35%;
top: 32px;
height: calc(100% - 64px);
}
.alert-list__table {
height: calc(100% - 72px);
}
.alert-list__table >>> .el-table__inner-wrapper::before {
background: transparent;
}
button {
appearance: none;
outline: none;
border: none;
cursor: pointer;
}
.alert-btn {
width: 100%;
height: 72px;
background: #0f04;
color: #fff;
font-size: 32px;
line-height: 1;
letter-spacing: 2px;
transition: all 0.2s ease-out;
}
.alert-btn:hover {
background: #0f08;
}
</style>

View File

@ -0,0 +1,10 @@
<script setup>
import { ref, onMounted, nextTick } from "vue";
import Container from "../Base/Container.vue";
</script>
<template>
<Container class="chart" title="累计生产线成品率" icon="cube">
<p class="empty-data-hint">暂无数据</p>
</Container>
</template>

View File

@ -0,0 +1,84 @@
<script setup>
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 store = useWsStore();
const chartChart = ref(null);
const chart = ref(null);
const showChartDom = ref(false);
/** 无状态,处理数据 */
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);
}
}
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);
// 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();
return;
}
showChartDom.value = true;
setupChart(chart, chartChart.value, d);
}
//
store.$subscribe((mutation, state) => {
__apply(state.data2.classTodayProductYield);
});
onMounted(() => {
chartChart.value.classList.add("h-full");
// __apply();
});
</script>
<template>
<Container class="chart" title="累计生产线产量" icon="cube">
<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>

View File

@ -0,0 +1,59 @@
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);
}

View File

@ -0,0 +1,10 @@
<script setup>
import { ref, onMounted, nextTick } from "vue";
import Container from "../Base/Container.vue";
</script>
<template>
<Container class="chart" title="今日生产线成品率" icon="cube">
<p class="empty-data-hint">暂无数据</p>
</Container>
</template>

View File

@ -0,0 +1,84 @@
<script setup>
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 store = useWsStore();
const chartChart = ref(null);
const chart = ref(null);
const showChartDom = ref(false);
/** 无状态,处理数据 */
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);
}
}
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);
// 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();
return;
}
showChartDom.value = true;
setupChart(chart, chartChart.value, d);
}
//
store.$subscribe((mutation, state) => {
__apply(state.data2.classTodayProductYield);
});
onMounted(() => {
chartChart.value.classList.add("h-full");
// __apply();
});
</script>
<template>
<Container class="chart" title="今日生产线产量" icon="cube">
<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>