|
|
|
|
@ -12,9 +12,10 @@ import { getDeviceSceneList, getDeviceSceneItemsList } from "@/api/list";
|
|
|
|
|
import type { FormInstance } from "element-plus";
|
|
|
|
|
|
|
|
|
|
import { fabric } from "fabric";
|
|
|
|
|
import { BaseTable } from "@/components/CustomTable";
|
|
|
|
|
// import { BaseTable } from "@/components/CustomTable";
|
|
|
|
|
|
|
|
|
|
import jiankongtu1 from "@/assets/device/jiankongtu1.png";
|
|
|
|
|
import historyAlarm from "@/assets/history_alarm.png";
|
|
|
|
|
|
|
|
|
|
defineOptions({
|
|
|
|
|
name: "DeviceScene"
|
|
|
|
|
@ -91,12 +92,12 @@ const columns = [
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "生产日期",
|
|
|
|
|
property: "createTime"
|
|
|
|
|
label: "缺陷图片",
|
|
|
|
|
slot: "image"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: "action",
|
|
|
|
|
label: "操作"
|
|
|
|
|
label: "生产日期",
|
|
|
|
|
property: "createTime"
|
|
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
@ -218,7 +219,7 @@ onMounted(() => {
|
|
|
|
|
<el-option label="车间2" value="车间2" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="设备">
|
|
|
|
|
<!-- <el-form-item label="设备">
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="formData.deviceSceneItem"
|
|
|
|
|
placeholder="设备"
|
|
|
|
|
@ -231,28 +232,30 @@ onMounted(() => {
|
|
|
|
|
:key="k"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form-item> -->
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex justify-between deviceScene_body">
|
|
|
|
|
<div class="left scene_box">
|
|
|
|
|
<div class="flex items-center deviceScene_box_top">
|
|
|
|
|
<div class="bg_icon">
|
|
|
|
|
<i class="iconfont icon-jiwei"></i>
|
|
|
|
|
<i class="iconfont icon-jiwei" />
|
|
|
|
|
</div>
|
|
|
|
|
<span>机位：</span><span>{{ formData.deviceSceneItem }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<canvas
|
|
|
|
|
<img :src="jiankongtu1" class="w-full h-[90%]" />
|
|
|
|
|
|
|
|
|
|
<!-- <canvas
|
|
|
|
|
ref="canvasRef"
|
|
|
|
|
:width="clipPathData.width"
|
|
|
|
|
:height="clipPathData.height"
|
|
|
|
|
/>
|
|
|
|
|
/> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right scene_box">
|
|
|
|
|
<div class="flex items-center justify-between alarm_head">
|
|
|
|
|
<span class="label">缺陷告警</span>
|
|
|
|
|
<el-button type="primary" @click="showFullAlert"
|
|
|
|
|
>全部告警</el-button
|
|
|
|
|
>历史告警</el-button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<ul class="alarm_body">
|
|
|
|
|
@ -286,12 +289,19 @@ onMounted(() => {
|
|
|
|
|
<el-dialog
|
|
|
|
|
top="5vh"
|
|
|
|
|
v-model="isShowFull"
|
|
|
|
|
title="全部告警"
|
|
|
|
|
title="历史告警"
|
|
|
|
|
append-to-body
|
|
|
|
|
width="70vw"
|
|
|
|
|
:style="{
|
|
|
|
|
borderRadius: '6px'
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<template #header="{ titleId, titleClass }">
|
|
|
|
|
<div class="my-header">
|
|
|
|
|
<img :src="historyAlarm" class="w-[26px] h-[26px]" />
|
|
|
|
|
<h4 :id="titleId" :class="titleClass">历史告警</h4>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<div class="alarm_dialog_head">
|
|
|
|
|
<el-form
|
|
|
|
|
ref="formRef"
|
|
|
|
|
@ -333,15 +343,29 @@ onMounted(() => {
|
|
|
|
|
element-loading-svg-view-box="-10, -10, 50, 50"
|
|
|
|
|
>
|
|
|
|
|
<template v-if="pagination.total > 0">
|
|
|
|
|
<BaseTable
|
|
|
|
|
:total="pagination.total"
|
|
|
|
|
:pageSize="pagination.pageSize"
|
|
|
|
|
:dataSource="alarmListData"
|
|
|
|
|
<pure-table
|
|
|
|
|
showOverflowTooltip
|
|
|
|
|
alignWhole="center"
|
|
|
|
|
:data="alarmListData"
|
|
|
|
|
:columns="columns"
|
|
|
|
|
:page="pagination.currentPage"
|
|
|
|
|
:isFixedPagination="false"
|
|
|
|
|
:header-cell-style="{
|
|
|
|
|
background: 'rgba(21, 77, 221, 0.10)',
|
|
|
|
|
color: 'rgba(51, 51, 51, 1)'
|
|
|
|
|
}"
|
|
|
|
|
:pagination="pagination"
|
|
|
|
|
>
|
|
|
|
|
<template v-slot:actionBar="{ row }">
|
|
|
|
|
<template #image="{ row, index }">
|
|
|
|
|
<el-image
|
|
|
|
|
preview-teleported
|
|
|
|
|
loading="lazy"
|
|
|
|
|
:src="row.image"
|
|
|
|
|
:preview-src-list="[jiankongtu1]"
|
|
|
|
|
:initial-index="index"
|
|
|
|
|
fit="cover"
|
|
|
|
|
class="w-[96px] h-[56px]"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
<template #operation="{ row }">
|
|
|
|
|
<ul class="table_action_box">
|
|
|
|
|
<li class="flex items-center" @click="handleDetail(row)">
|
|
|
|
|
<el-button text>
|
|
|
|
|
@ -357,7 +381,7 @@ onMounted(() => {
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</template>
|
|
|
|
|
</BaseTable>
|
|
|
|
|
</pure-table>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
@ -403,4 +427,10 @@ onMounted(() => {
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
@import url("./scene.scss");
|
|
|
|
|
.my-header {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
JINGYJ
9 months ago
