|
|
|
@ -8,23 +8,27 @@
|
|
|
|
-->
|
|
|
|
-->
|
|
|
|
<script setup lang="ts">
|
|
|
|
<script setup lang="ts">
|
|
|
|
import { onMounted, ref, reactive, h } from "vue";
|
|
|
|
import { onMounted, ref, reactive, h } from "vue";
|
|
|
|
import { getDeviceSceneList, getDeviceSceneItemsList } from "@/api/list";
|
|
|
|
import { getDeviceSceneList } from "@/api/list";
|
|
|
|
import type { FormInstance } from "element-plus";
|
|
|
|
import type { FormInstance } from "element-plus";
|
|
|
|
|
|
|
|
|
|
|
|
import { fabric } from "fabric";
|
|
|
|
import { fabric } from "fabric";
|
|
|
|
|
|
|
|
import { getWarnList } from "@/api/alarm";
|
|
|
|
|
|
|
|
import { getDeviceList } from "@/api/device";
|
|
|
|
// import { BaseTable } from "@/components/CustomTable";
|
|
|
|
// import { BaseTable } from "@/components/CustomTable";
|
|
|
|
|
|
|
|
|
|
|
|
import jiankongtu1 from "@/assets/device/jiankongtu1.png";
|
|
|
|
import jiankongtu1 from "@/assets/device/jiankongtu1.png";
|
|
|
|
import historyAlarm from "@/assets/history_alarm.png";
|
|
|
|
import historyAlarm from "@/assets/history_alarm.png";
|
|
|
|
|
|
|
|
import dayjs from "dayjs";
|
|
|
|
|
|
|
|
|
|
|
|
defineOptions({
|
|
|
|
defineOptions({
|
|
|
|
name: "DeviceScene"
|
|
|
|
name: "DeviceScene"
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
const formData = ref({
|
|
|
|
const formData = ref({
|
|
|
|
deviceSort: "",
|
|
|
|
node_id: "",
|
|
|
|
deviceSceneItem: ""
|
|
|
|
deviceSceneItem: ""
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
const nodeList = ref([]);
|
|
|
|
const dataLoading = ref<boolean>(true);
|
|
|
|
const dataLoading = ref<boolean>(true);
|
|
|
|
// alarmDataLoading
|
|
|
|
// alarmDataLoading
|
|
|
|
const alarmDataLoading = ref<boolean>(true);
|
|
|
|
const alarmDataLoading = ref<boolean>(true);
|
|
|
|
@ -59,9 +63,18 @@ const pagination = ref({ currentPage: 1, pageSize: 8, total: 0 });
|
|
|
|
const formRef = ref<FormInstance>();
|
|
|
|
const formRef = ref<FormInstance>();
|
|
|
|
|
|
|
|
|
|
|
|
const alarmValidateForm = reactive({
|
|
|
|
const alarmValidateForm = reactive({
|
|
|
|
defectType: "",
|
|
|
|
warning_type: "",
|
|
|
|
createTime: ""
|
|
|
|
start_time: ""
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
async function getNodeList() {
|
|
|
|
|
|
|
|
const { data } = await getDeviceList();
|
|
|
|
|
|
|
|
nodeList.value = data;
|
|
|
|
|
|
|
|
formData.value = {
|
|
|
|
|
|
|
|
...formData.value,
|
|
|
|
|
|
|
|
deviceSceneItem: data[0].name
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
console.log(data);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const isShowAlarmDatail = ref<boolean>(false);
|
|
|
|
const isShowAlarmDatail = ref<boolean>(false);
|
|
|
|
const currRowData = ref<Record<string, any>>({});
|
|
|
|
const currRowData = ref<Record<string, any>>({});
|
|
|
|
@ -69,15 +82,15 @@ const currRowData = ref<Record<string, any>>({});
|
|
|
|
const columns = [
|
|
|
|
const columns = [
|
|
|
|
{
|
|
|
|
{
|
|
|
|
label: "序号",
|
|
|
|
label: "序号",
|
|
|
|
property: "alarmNo"
|
|
|
|
property: "node_id"
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
label: "产品类型",
|
|
|
|
label: "产品类型",
|
|
|
|
property: "productType"
|
|
|
|
property: "product_name"
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
label: "缺陷类型",
|
|
|
|
label: "缺陷类型",
|
|
|
|
property: "defectType",
|
|
|
|
property: "warning_name",
|
|
|
|
formatter: val => {
|
|
|
|
formatter: val => {
|
|
|
|
return h(
|
|
|
|
return h(
|
|
|
|
"div",
|
|
|
|
"div",
|
|
|
|
@ -87,7 +100,7 @@ const columns = [
|
|
|
|
fontSize: "12px"
|
|
|
|
fontSize: "12px"
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
val.defectType
|
|
|
|
val.warning_name
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
@ -97,7 +110,9 @@ const columns = [
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
label: "生产日期",
|
|
|
|
label: "生产日期",
|
|
|
|
property: "createTime"
|
|
|
|
property: "trigger_time",
|
|
|
|
|
|
|
|
formatter: ({ trigger_time }) =>
|
|
|
|
|
|
|
|
dayjs(trigger_time).format("YYYY-MM-DD HH:mm:ss")
|
|
|
|
}
|
|
|
|
}
|
|
|
|
];
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
@ -106,10 +121,10 @@ const getList = async () => {
|
|
|
|
const { data } = await getDeviceSceneList();
|
|
|
|
const { data } = await getDeviceSceneList();
|
|
|
|
listData.value = data;
|
|
|
|
listData.value = data;
|
|
|
|
formData.value = {
|
|
|
|
formData.value = {
|
|
|
|
...formData.value,
|
|
|
|
...formData.value
|
|
|
|
deviceSceneItem: data[0].name
|
|
|
|
// deviceSceneItem: data[0].name
|
|
|
|
};
|
|
|
|
};
|
|
|
|
currDeviceSceneItems.value = data[0].alarmList;
|
|
|
|
// currDeviceSceneItems.value = data[0].alarmList;
|
|
|
|
initCanvas();
|
|
|
|
initCanvas();
|
|
|
|
dataLoading.value = false;
|
|
|
|
dataLoading.value = false;
|
|
|
|
console.log(data, "getDeviceSceneList_data");
|
|
|
|
console.log(data, "getDeviceSceneList_data");
|
|
|
|
@ -151,37 +166,39 @@ function initCanvas() {
|
|
|
|
// 展示全部缺陷告警
|
|
|
|
// 展示全部缺陷告警
|
|
|
|
const getAlarmList = async () => {
|
|
|
|
const getAlarmList = async () => {
|
|
|
|
const { currentPage, pageSize } = pagination.value;
|
|
|
|
const { currentPage, pageSize } = pagination.value;
|
|
|
|
const { data } = await getDeviceSceneItemsList({
|
|
|
|
const { data } = await getWarnList({
|
|
|
|
|
|
|
|
...formData.value,
|
|
|
|
|
|
|
|
...alarmValidateForm,
|
|
|
|
page: currentPage,
|
|
|
|
page: currentPage,
|
|
|
|
pageSize
|
|
|
|
pageSize
|
|
|
|
});
|
|
|
|
});
|
|
|
|
// listData.value = data;
|
|
|
|
// listData.value = data;
|
|
|
|
alarmListData.value = data.list;
|
|
|
|
alarmListData.value = data.results;
|
|
|
|
|
|
|
|
|
|
|
|
pagination.value = {
|
|
|
|
pagination.value = {
|
|
|
|
...pagination.value,
|
|
|
|
...pagination.value,
|
|
|
|
total: data.total
|
|
|
|
total: data.count
|
|
|
|
};
|
|
|
|
};
|
|
|
|
// formData.value = {
|
|
|
|
// formData.value = {
|
|
|
|
// ...formData.value,
|
|
|
|
// ...formData.value,
|
|
|
|
// deviceSceneItem: data[0].name
|
|
|
|
// deviceSceneItem: data[0].name
|
|
|
|
// };
|
|
|
|
// };
|
|
|
|
// currDeviceSceneItems.value = data[0].alarmList;
|
|
|
|
currDeviceSceneItems.value = data.results;
|
|
|
|
alarmDataLoading.value = false;
|
|
|
|
alarmDataLoading.value = false;
|
|
|
|
console.log(data, "getAlarmList_data");
|
|
|
|
console.log(data, "getAlarmList_data");
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const submitForm = (formEl: FormInstance | undefined) => {
|
|
|
|
// const submitForm = (formEl: FormInstance | undefined) => {
|
|
|
|
if (!formEl) return;
|
|
|
|
// if (!formEl) return;
|
|
|
|
formEl.validate(valid => {
|
|
|
|
// formEl.validate(valid => {
|
|
|
|
if (valid) {
|
|
|
|
// if (valid) {
|
|
|
|
console.log("submit!");
|
|
|
|
// console.log("submit!");
|
|
|
|
} else {
|
|
|
|
// } else {
|
|
|
|
console.log("error submit!");
|
|
|
|
// console.log("error submit!");
|
|
|
|
return false;
|
|
|
|
// return false;
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
});
|
|
|
|
// });
|
|
|
|
};
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
|
|
const resetForm = (formEl: FormInstance | undefined) => {
|
|
|
|
const resetForm = (formEl: FormInstance | undefined) => {
|
|
|
|
if (!formEl) return;
|
|
|
|
if (!formEl) return;
|
|
|
|
@ -190,7 +207,7 @@ const resetForm = (formEl: FormInstance | undefined) => {
|
|
|
|
|
|
|
|
|
|
|
|
function showFullAlert() {
|
|
|
|
function showFullAlert() {
|
|
|
|
isShowFull.value = true;
|
|
|
|
isShowFull.value = true;
|
|
|
|
getAlarmList();
|
|
|
|
// getAlarmList();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function handleDetail(rowData) {
|
|
|
|
function handleDetail(rowData) {
|
|
|
|
@ -201,6 +218,8 @@ function handleDetail(rowData) {
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
onMounted(() => {
|
|
|
|
getList();
|
|
|
|
getList();
|
|
|
|
|
|
|
|
getAlarmList();
|
|
|
|
|
|
|
|
getNodeList();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
@ -211,12 +230,17 @@ onMounted(() => {
|
|
|
|
<el-form :inline="true" :model="formData" class="demo-form-inline">
|
|
|
|
<el-form :inline="true" :model="formData" class="demo-form-inline">
|
|
|
|
<el-form-item label="车间">
|
|
|
|
<el-form-item label="车间">
|
|
|
|
<el-select
|
|
|
|
<el-select
|
|
|
|
v-model="formData.deviceSort"
|
|
|
|
v-model="formData.node_id"
|
|
|
|
placeholder="车间"
|
|
|
|
placeholder="车间"
|
|
|
|
|
|
|
|
@change="getAlarmList"
|
|
|
|
clearable
|
|
|
|
clearable
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<el-option label="车间1" value="车间1" />
|
|
|
|
<el-option
|
|
|
|
<el-option label="车间2" value="车间2" />
|
|
|
|
v-for="(v, k) in nodeList"
|
|
|
|
|
|
|
|
:key="k"
|
|
|
|
|
|
|
|
:label="v.name"
|
|
|
|
|
|
|
|
:value="v.id"
|
|
|
|
|
|
|
|
/>
|
|
|
|
</el-select>
|
|
|
|
</el-select>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
<!-- <el-form-item label="设备">
|
|
|
|
<!-- <el-form-item label="设备">
|
|
|
|
@ -261,24 +285,26 @@ onMounted(() => {
|
|
|
|
<ul class="alarm_body">
|
|
|
|
<ul class="alarm_body">
|
|
|
|
<li v-for="(v, k) in currDeviceSceneItems" :key="k">
|
|
|
|
<li v-for="(v, k) in currDeviceSceneItems" :key="k">
|
|
|
|
<h5>
|
|
|
|
<h5>
|
|
|
|
<span class="label">序号: </span><span>{{ v.alarmNo }}</span>
|
|
|
|
<span class="label">序号: </span><span>{{ v.node_id }}</span>
|
|
|
|
</h5>
|
|
|
|
</h5>
|
|
|
|
<div class="alarm_info">
|
|
|
|
<div class="alarm_info">
|
|
|
|
<p>
|
|
|
|
<p>
|
|
|
|
<span class="label">缺陷类型: </span
|
|
|
|
<span class="label">缺陷类型: </span
|
|
|
|
><span class="active_value">{{ v.defectType }}</span>
|
|
|
|
><span class="active_value">{{ v.warning_name }}</span>
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
<p>
|
|
|
|
<span class="label">检测时间: </span
|
|
|
|
<span class="label">检测时间: </span
|
|
|
|
><span>{{ v.createTime }}</span>
|
|
|
|
><span>{{
|
|
|
|
|
|
|
|
dayjs(v.trigger_time).format("YYYY-MM-DD HH:mm:ss")
|
|
|
|
|
|
|
|
}}</span>
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<span class="label">产品类型: </span
|
|
|
|
<span class="label">产品类型: {{ v.product_info }}</span>
|
|
|
|
><span class="pr-[16px]">{{ v.productType }}</span>
|
|
|
|
<!-- <span class="pr-[16px]">{{ v.productType }}</span>
|
|
|
|
<span class="label">长: </span
|
|
|
|
<span class="label">长: </span
|
|
|
|
><span class="pr-[16px]">{{ v.productL }}</span>
|
|
|
|
><span class="pr-[16px]">{{ v.productL }}</span>
|
|
|
|
<span class="label">宽: </span
|
|
|
|
<span class="label">宽: </span
|
|
|
|
><span class="pr-[16px]">{{ v.productW }}</span>
|
|
|
|
><span class="pr-[16px]">{{ v.productW }}</span> -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
@ -311,28 +337,30 @@ onMounted(() => {
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<el-form-item label="缺陷类型">
|
|
|
|
<el-form-item label="缺陷类型">
|
|
|
|
<el-select
|
|
|
|
<el-select
|
|
|
|
v-model="alarmValidateForm.defectType"
|
|
|
|
v-model="alarmValidateForm.warning_type"
|
|
|
|
placeholder="缺陷类型"
|
|
|
|
placeholder="缺陷类型"
|
|
|
|
clearable
|
|
|
|
clearable
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<el-option label="表面裂纹" value="表面裂纹" />
|
|
|
|
<el-option label="表面裂纹" value="表面裂纹" />
|
|
|
|
<el-option label="划痕" value="划痕" />
|
|
|
|
<el-option label="外观缺损" value="外观缺损" />
|
|
|
|
|
|
|
|
<el-option label="表面划痕" value="表面划痕" />
|
|
|
|
|
|
|
|
<el-option label="白斑" value="白斑" />
|
|
|
|
|
|
|
|
<el-option label="毛刺" value="毛刺" />
|
|
|
|
</el-select>
|
|
|
|
</el-select>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="生产日期">
|
|
|
|
<el-form-item label="日期">
|
|
|
|
<el-date-picker
|
|
|
|
<el-date-picker
|
|
|
|
v-model="alarmValidateForm.createTime"
|
|
|
|
v-model="alarmValidateForm.start_time"
|
|
|
|
type="daterange"
|
|
|
|
placeholder="请选择日期"
|
|
|
|
start-placeholder="开始日期"
|
|
|
|
type="date"
|
|
|
|
end-placeholder="结束日期"
|
|
|
|
format="YYYY-MM-DD"
|
|
|
|
|
|
|
|
value-format="YYYY-MM-DD"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
|
|
<el-form-item>
|
|
|
|
<el-button @click="resetForm(formRef)">重置</el-button>
|
|
|
|
<el-button @click="resetForm(formRef)">重置</el-button>
|
|
|
|
|
|
|
|
|
|
|
|
<el-button type="primary" @click="submitForm(formRef)"
|
|
|
|
<el-button type="primary" @click="getAlarmList">查询</el-button>
|
|
|
|
>查询</el-button
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
</el-form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -342,6 +370,15 @@ onMounted(() => {
|
|
|
|
:element-loading-svg="svg"
|
|
|
|
:element-loading-svg="svg"
|
|
|
|
element-loading-svg-view-box="-10, -10, 50, 50"
|
|
|
|
element-loading-svg-view-box="-10, -10, 50, 50"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
|
|
|
|
<el-empty
|
|
|
|
|
|
|
|
v-show="
|
|
|
|
|
|
|
|
alarmListData.slice(
|
|
|
|
|
|
|
|
pagination.pageSize * (pagination.currentPage - 1),
|
|
|
|
|
|
|
|
pagination.pageSize * pagination.currentPage
|
|
|
|
|
|
|
|
).length === 0
|
|
|
|
|
|
|
|
"
|
|
|
|
|
|
|
|
:description="`暂无信息`"
|
|
|
|
|
|
|
|
/>
|
|
|
|
<template v-if="pagination.total > 0">
|
|
|
|
<template v-if="pagination.total > 0">
|
|
|
|
<pure-table
|
|
|
|
<pure-table
|
|
|
|
showOverflowTooltip
|
|
|
|
showOverflowTooltip
|
|
|
|
@ -358,8 +395,8 @@ onMounted(() => {
|
|
|
|
<el-image
|
|
|
|
<el-image
|
|
|
|
preview-teleported
|
|
|
|
preview-teleported
|
|
|
|
loading="lazy"
|
|
|
|
loading="lazy"
|
|
|
|
:src="row.image"
|
|
|
|
:src="row.picture_path"
|
|
|
|
:preview-src-list="[jiankongtu1]"
|
|
|
|
:preview-src-list="[row.picture_path]"
|
|
|
|
:initial-index="index"
|
|
|
|
:initial-index="index"
|
|
|
|
fit="cover"
|
|
|
|
fit="cover"
|
|
|
|
class="w-[96px] h-[56px]"
|
|
|
|
class="w-[96px] h-[56px]"
|
|
|
|
@ -403,11 +440,11 @@ onMounted(() => {
|
|
|
|
<div class="alarm_info">
|
|
|
|
<div class="alarm_info">
|
|
|
|
<p>
|
|
|
|
<p>
|
|
|
|
<span class="label">缺陷类型: </span
|
|
|
|
<span class="label">缺陷类型: </span
|
|
|
|
><span class="active_value">{{ currRowData.defectType }}</span>
|
|
|
|
><span class="active_value">{{ currRowData.warning_type }}</span>
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
<p>
|
|
|
|
<span class="label">检测时间: </span
|
|
|
|
<span class="label">检测时间: </span
|
|
|
|
><span>{{ currRowData.createTime }}</span>
|
|
|
|
><span>{{ currRowData.start_time }}</span>
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
<p>
|
|
|
|
<span class="label">产品类型: </span
|
|
|
|
<span class="label">产品类型: </span
|
|
|
|
|
JINGYJ
11 months ago