|
|
@@ -0,0 +1,401 @@
|
|
|
+<template>
|
|
|
+ <ContentWrap>
|
|
|
+ <el-tabs v-model="activeTab" type="border-card" tab-position="left" v-loading="loading" style="height: 84vh">
|
|
|
+ <el-tab-pane
|
|
|
+ style="height: 100%"
|
|
|
+ v-for="(item,index) in list"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <template #label>
|
|
|
+ <!-- <span @click="openFill(item.deviceCategoryId,item.deviceId,item.deptId,item.deviceName,item.deviceCode)">
|
|
|
+ {{item.deviceCode}} ({{ item.deviceName }})
|
|
|
+ </span>-->
|
|
|
+ <span class="custom-label" v-if='item.isFill === 1' @click="openFill(item.deviceCategoryId,item.deviceId,item.deptId,item.deviceName,item.deviceCode)">
|
|
|
+ {{item.deviceCode}} ({{ item.deviceName }})
|
|
|
+ </span>
|
|
|
+ <span class="custom-label1" v-else @click="openFill(item.deviceCategoryId,item.deviceId,item.deptId,item.deviceName,item.deviceCode)">
|
|
|
+ {{item.deviceCode}} ({{ item.deviceName }})
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <div class="form-wrapper">
|
|
|
+ <el-form label-width="120px">
|
|
|
+ <div style="margin-left: 24px">
|
|
|
+ <el-form class="demo-form-inline" :inline="true">
|
|
|
+ <el-form-item :label="t('operationFillForm.team')" class="custom-label1">
|
|
|
+ <span style="text-decoration: underline;">
|
|
|
+ {{item.orgName}}
|
|
|
+ </span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col
|
|
|
+ v-for="(item,index) in attrList1"
|
|
|
+ :key="index"
|
|
|
+ :span="4"
|
|
|
+ >
|
|
|
+ <el-form-item :label='item.name' class="custom-label1">
|
|
|
+ <span style="text-decoration: underline;">
|
|
|
+ {{item.totalRunTime}}h
|
|
|
+ </span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <!-- <el-form-item :label="t('operationFillForm.sumTime')" class="custom-label1">
|
|
|
+ <span style="text-decoration: underline;">
|
|
|
+ {{totalRunTime1}}h
|
|
|
+ </span>
|
|
|
+ </el-form-item>-->
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div v-for="(item,index) in attrList" :key="index">
|
|
|
+ <el-form-item :label='item.name' prop="deviceId" >
|
|
|
+ <el-input
|
|
|
+ v-if="item.isCollection===1||fillStatus === '1'"
|
|
|
+ v-model="item.fillContent"
|
|
|
+ clearable
|
|
|
+ style="width: 200px"
|
|
|
+ disabled
|
|
|
+ />
|
|
|
+ <el-input
|
|
|
+ v-else
|
|
|
+ v-model="item.fillContent"
|
|
|
+ clearable
|
|
|
+ style="width: 200px"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="getFillInfo" v-show="showStatus">{{t('operationFillForm.confirm')}}</el-button>
|
|
|
+ <el-button type="info" @click="deleteFillInfo" v-show="showStatus">{{t('operationFillForm.cancel')}}</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </ContentWrap>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { dateFormatter2 } from '@/utils/formatTime'
|
|
|
+import download from '@/utils/download'
|
|
|
+import { IotOpeationFillApi, IotOpeationFillVO } from '@/api/pms/iotopeationfill'
|
|
|
+import IotOpeationFillForm from './IotOpeationFillForm.vue'
|
|
|
+import Vue from "@vitejs/plugin-vue";
|
|
|
+import {useUserStore} from "@/store/modules/user";
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
+import moment from 'moment';
|
|
|
+import { format } from 'date-fns';
|
|
|
+import {cx} from "@fullcalendar/core/internal-common";
|
|
|
+/** 运行记录填报 列表 */
|
|
|
+defineOptions({ name: 'IotOpeationFill' })
|
|
|
+
|
|
|
+const message = useMessage() // 消息弹窗
|
|
|
+const { t } = useI18n() // 国际化
|
|
|
+/** 提交表单 */
|
|
|
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
|
+const loading = ref(true) // 列表的加载中
|
|
|
+const { params, name } = useRoute() // 查询参数
|
|
|
+const orderId = params.id
|
|
|
+const deviceId = params.deviceid
|
|
|
+const deptId = params.deptid
|
|
|
+const createtime = params.createtime
|
|
|
+const list = ref<IotOpeationFillVO[]>([]) // 列表的数据
|
|
|
+const attrList = ref<IotOpeationFillVO[]>([]) // 非累计属性集合
|
|
|
+const attrList1 = ref<IotOpeationFillVO[]>([]) // 累计属性集合
|
|
|
+const total = ref(0) // 列表的总页数
|
|
|
+const arry1 =ref([]);
|
|
|
+let totalRunTime1: string = '123'
|
|
|
+let fillStatus = params.status
|
|
|
+
|
|
|
+
|
|
|
+let showStatus = true;
|
|
|
+const queryParams = reactive({
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ deviceCode: undefined,
|
|
|
+ deviceName: undefined,
|
|
|
+ fillContent: undefined,
|
|
|
+ deviceType: undefined,
|
|
|
+ deviceComponent: undefined,
|
|
|
+ deptId: undefined,
|
|
|
+ orgName: undefined,
|
|
|
+ proId: undefined,
|
|
|
+ proName: undefined,
|
|
|
+ teamId: undefined,
|
|
|
+ teamName: undefined,
|
|
|
+ dutyName: undefined,
|
|
|
+ creDate: [],
|
|
|
+ createTime: [],
|
|
|
+ deviceCategoryId:1,
|
|
|
+ deviceId:undefined
|
|
|
+})
|
|
|
+const queryFormRef = ref() // 搜索的表单
|
|
|
+const exportLoading = ref(false) // 导出的加载中
|
|
|
+let cxStatus = true;
|
|
|
+
|
|
|
+const formatDescription = async(row, column, cellValue) =>{
|
|
|
+ return cellValue.split(',').map(part => `<div>${part}</div>`).join('');
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+const showComponent = () => {
|
|
|
+ if(JSON.parse(fillStatus)=== 1){
|
|
|
+ showStatus = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+/** 查询列表 */
|
|
|
+const getList = async () => {
|
|
|
+ loading.value = true
|
|
|
+ try {
|
|
|
+ queryParams.orderId = orderId
|
|
|
+ queryParams.deviceId = deviceId
|
|
|
+ const data = await IotOpeationFillApi.getIotOrderPage(queryParams);
|
|
|
+ list.value = data;
|
|
|
+ // if(cxStatus){
|
|
|
+ if (list.value){
|
|
|
+ queryParams.deviceCategoryId = list.value[0].deviceCategoryId
|
|
|
+ queryParams.deptId = list.value[0].deptId;
|
|
|
+ queryParams.deviceCode = list.value[0].deviceCode;
|
|
|
+ queryParams.deviceName = list.value[0].deviceName;
|
|
|
+ queryParams.deviceId = list.value[0].deviceId;
|
|
|
+ }
|
|
|
+
|
|
|
+ // }
|
|
|
+ getAttrList();
|
|
|
+
|
|
|
+ } finally {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+function formatTimestamp(timestamp) {
|
|
|
+ return moment.unix(timestamp/1000).format('YYYY-MM-DD');
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+/** 搜索按钮操作 */
|
|
|
+const handleQuery = () => {
|
|
|
+ queryParams.pageNo = 1
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+/** 重置按钮操作 */
|
|
|
+const resetQuery = () => {
|
|
|
+ queryFormRef.value.resetFields()
|
|
|
+ handleQuery()
|
|
|
+}
|
|
|
+
|
|
|
+/** 添加/修改操作 */
|
|
|
+const formRef = ref()
|
|
|
+const openForm = (type: string, id?: number) => {
|
|
|
+ formRef.value.open(type, id)
|
|
|
+}
|
|
|
+const open = async (type: string, id?: number) => {
|
|
|
+ alert(id)
|
|
|
+}
|
|
|
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
|
+const openFill = (deviceCategoryId?:number,deviceId?:number,deptId?:number,deviceName?:string,deviceCode?:string) =>{
|
|
|
+ queryParams.deviceCategoryId = deviceCategoryId;
|
|
|
+ queryParams.deptId = deptId;
|
|
|
+ queryParams.deviceCode = deviceCode;
|
|
|
+ queryParams.deviceName = deviceName;
|
|
|
+ queryParams.deviceId = deviceId;
|
|
|
+ getAttrList();
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+const getAttrList = async () => {
|
|
|
+ loading.value = true
|
|
|
+ try {
|
|
|
+ queryParams.createTime = formatTimestamp(createtime);
|
|
|
+ const data = await IotOpeationFillApi.getAttrs(queryParams)
|
|
|
+ attrList.value = data[0].nonSumList;
|
|
|
+ attrList1.value = data[0].sumList;
|
|
|
+ attrList.value.forEach(function (item,index){
|
|
|
+ /*if(item.name === '当日运转时间'){
|
|
|
+ totalRunTime1 = Number(item.totalRunTime).toFixed(2)
|
|
|
+ }*/
|
|
|
+ item.fillContent = Number(item.fillContent).toFixed(2)
|
|
|
+ item.deviceCode = queryParams.deviceCode;
|
|
|
+ item.deptId = queryParams.deptId;
|
|
|
+ item.deviceId = queryParams.deviceId;
|
|
|
+ item.deviceCategoryId = queryParams.deviceCategoryId;
|
|
|
+ })
|
|
|
+ attrList1.value.forEach(function (item,index){
|
|
|
+ item.deviceCode = queryParams.deviceCode;
|
|
|
+ item.deptId = queryParams.deptId;
|
|
|
+ item.deviceId = queryParams.deviceId;
|
|
|
+ item.deviceCategoryId = queryParams.deviceCategoryId;
|
|
|
+ })
|
|
|
+ } finally {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+/** 获取填写信息保存到后台*/
|
|
|
+const getFillInfo = async () => {
|
|
|
+ try {
|
|
|
+ attrList.value = attrList.value.concat(attrList1.value)
|
|
|
+
|
|
|
+ attrList.value.forEach(function (item,index){
|
|
|
+ item.pointName = item.name;
|
|
|
+ item.createTime = formatTimestamp(JSON.parse(deptId.split(",")[2].substring(0,10)));
|
|
|
+ item.userId = deptId.split(",")[1];
|
|
|
+ item.id = deptId.split(",")[3];
|
|
|
+ })
|
|
|
+ const data = attrList.value as unknown as IotOpeationFillVO
|
|
|
+ await IotOpeationFillApi.insertLog(data)
|
|
|
+ message.success(t('common.createSuccess'))
|
|
|
+ // 发送操作成功的事件
|
|
|
+ emit('success')
|
|
|
+ cxStatus = false;
|
|
|
+ getList();
|
|
|
+ } finally {
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+/**清空填写信息*/
|
|
|
+const deleteFillInfo = () =>{
|
|
|
+ attrList.value.forEach(function (item, index){
|
|
|
+ item.fillContent = '';
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/** 删除按钮操作 */
|
|
|
+const handleDelete = async (id: number) => {
|
|
|
+ try {
|
|
|
+ // 删除的二次确认
|
|
|
+ await message.delConfirm()
|
|
|
+ // 发起删除
|
|
|
+ await IotOpeationFillApi.deleteIotOpeationFill(id)
|
|
|
+ message.success(t('common.delSuccess'))
|
|
|
+ // 刷新列表
|
|
|
+ await getList()
|
|
|
+ } catch {}
|
|
|
+}
|
|
|
+
|
|
|
+/** 导出按钮操作 */
|
|
|
+const handleExport = async () => {
|
|
|
+ try {
|
|
|
+ // 导出的二次确认
|
|
|
+ await message.exportConfirm()
|
|
|
+ // 发起导出
|
|
|
+ exportLoading.value = true
|
|
|
+ const data = await IotOpeationFillApi.exportIotOpeationFill(queryParams)
|
|
|
+ download.excel(data, '运行记录填报.xls')
|
|
|
+ } catch {
|
|
|
+ } finally {
|
|
|
+ exportLoading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/** 初始化 **/
|
|
|
+onMounted(() => {
|
|
|
+ getList()
|
|
|
+ showComponent()
|
|
|
+})
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.back-red{ /* 红色背景 */
|
|
|
+ background-color: red;
|
|
|
+}
|
|
|
+.back-blue{
|
|
|
+ background-color: grey;
|
|
|
+}
|
|
|
+.step-container {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 220px 1fr;
|
|
|
+ gap: 10px;
|
|
|
+ height: 100%;
|
|
|
+ min-height: 600px;
|
|
|
+}
|
|
|
+
|
|
|
+.steps-nav {
|
|
|
+ overflow-y: auto;
|
|
|
+ padding-right: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.form-wrapper {
|
|
|
+ background: #fff;
|
|
|
+ padding: 30px;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 12px rgba(0,0,0,0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.navigation-controls {
|
|
|
+ margin-top: 40px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-label {
|
|
|
+ font-weight: 1000;
|
|
|
+ font-size: 17px;
|
|
|
+ padding: 0 10px;
|
|
|
+ color: forestgreen;
|
|
|
+}
|
|
|
+.custom-label1 {
|
|
|
+ font-weight: 1000;
|
|
|
+ font-size: 17px;
|
|
|
+ padding: 0 10px;
|
|
|
+}
|
|
|
+::v-deep .el-step__icon {
|
|
|
+ background-color: #409eff;
|
|
|
+ color: #fff;
|
|
|
+ border: 0px;
|
|
|
+}
|
|
|
+.step-title-wrapper {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ position: relative;
|
|
|
+ padding-right: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 覆盖步骤条默认样式 */
|
|
|
+:deep(.custom-steps) {
|
|
|
+
|
|
|
+ /* 调整头部位置 */
|
|
|
+ .el-step__head {
|
|
|
+ top: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 标题容器定位 */
|
|
|
+ .el-step__title {
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 10px;
|
|
|
+ padding-right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 步骤连接线 */
|
|
|
+ .el-step__line {
|
|
|
+ left: 11px;
|
|
|
+ background-color: #ebeef5;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 当前步骤样式 */
|
|
|
+ .is-process .title-text {
|
|
|
+ font-weight: 600;
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 完成状态图标 */
|
|
|
+ .is-finish .tip-icon {
|
|
|
+ color: #67c23a;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.horizontal-container {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap; /* 允许换行 */
|
|
|
+ gap: 20px; /* 项目间距 */
|
|
|
+}
|
|
|
+
|
|
|
+.form-item-container {
|
|
|
+ flex: 1; /* 等宽分布 */
|
|
|
+ min-width: 200px; /* 最小宽度防止挤压 */
|
|
|
+}
|
|
|
+</style>
|
