Merge branch 'dev' of http://222.212.85.86:8222/bdzl2/bxztApp into dev
This commit is contained in:
commit
2ebeb4376d
103
packages/screen/src/component/DetailInfoBox/DetailInfoBox.vue
Normal file
103
packages/screen/src/component/DetailInfoBox/DetailInfoBox.vue
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
<template>
|
||||||
|
<div class="info-box">
|
||||||
|
<div class="info-title-block">
|
||||||
|
<span class="title-text">{{ title }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-content-block">
|
||||||
|
<div class="info-item-list-wrapper">
|
||||||
|
<div class="info-item" v-for="(item, index) in dataConfig" :key="index">
|
||||||
|
<template v-if="item.slot">
|
||||||
|
<slot :item="item.slot" v-bind="item" />
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<div class="label">{{ getLabelText(item) }}</div>
|
||||||
|
<div class="value">{{ getValueText(item) }}</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
const props = defineProps({
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {}
|
||||||
|
},
|
||||||
|
dataConfig: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const getLabelText = (item) => {
|
||||||
|
if(typeof item.label == 'function') {
|
||||||
|
return item.label(props.data)
|
||||||
|
}
|
||||||
|
return item.label;
|
||||||
|
}
|
||||||
|
const getValueText = (item) => {
|
||||||
|
if(typeof item.value == 'function') return item.value(props.data)
|
||||||
|
return props.data[item.name];
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.info-box {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.info-title-block {
|
||||||
|
margin: 10px 0;
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-content-block {
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
.info-item-list-wrapper {
|
||||||
|
display: grid;
|
||||||
|
width: 100%;
|
||||||
|
row-gap: 15px;
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-right: 10px;
|
||||||
|
line-height: 14px;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: ":"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
line-height: 14px;
|
||||||
|
font-size: 14px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
91
packages/screen/src/component/DynamicForm/DynamicForm.vue
Normal file
91
packages/screen/src/component/DynamicForm/DynamicForm.vue
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
<template>
|
||||||
|
<div class="dynamic-form">
|
||||||
|
<el-form class="form-wrapper" :model="modelValue" ref="formRef">
|
||||||
|
<el-form-item v-for="(config, index) in formConfig" :key="index" :prop="config['prop']"
|
||||||
|
:label="config['label']" :rules="config['rules']" label-position="right">
|
||||||
|
|
||||||
|
<template v-if="config.type == 'input'">
|
||||||
|
<el-input :modelValue="modelValue[config.name]"
|
||||||
|
@update:modelValue="(event) => changeValue(config, event)"
|
||||||
|
:placeholder="config.componentProps?.placeholder" :clearable="true" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<template v-if="config.type == 'inputNumber'">
|
||||||
|
<el-input-number :modelValue="modelValue[config.name]"
|
||||||
|
@update:modelValue="(event) => changeValue(config, event)"
|
||||||
|
:placeholder="config.componentProps?.placeholder" :clearable="true" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<template v-if="config.type == 'radio'">
|
||||||
|
<el-radio-group :modelValue="modelValue[config.name]"
|
||||||
|
@update:modelValue="(event) => changeValue(config, event)"
|
||||||
|
:placeholder="config.componentProps?.placeholder">
|
||||||
|
<el-radio v-for="(option, i) in config.options" :value="option.value">{{ option.label
|
||||||
|
}}</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<template v-if="config.type == 'select'">
|
||||||
|
<el-select :modelValue="modelValue[config.name]"
|
||||||
|
@update:modelValue="(event) => changeValue(config, event)"
|
||||||
|
:placeholder="config.componentProps?.placeholder">
|
||||||
|
<el-option v-for="(option, i) in config.options" :key="i" :label="option.label"
|
||||||
|
:value="option.value"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-if="config.type == 'date'">
|
||||||
|
<el-date-picker :modelValue="modelValue[config.name]" type="date"
|
||||||
|
@update:modelValue="(event) => changeValue(config, event)"
|
||||||
|
:placeholder="config.componentProps?.placeholder" />
|
||||||
|
</template>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, watch, ref } from 'vue';
|
||||||
|
const props = defineProps({
|
||||||
|
formConfig: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
type: Object,
|
||||||
|
default: () => { }
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const emit = defineEmits(['update:modelValue'])
|
||||||
|
const formRef = ref(null)
|
||||||
|
const changeValue = (config, value) => {
|
||||||
|
const form = { ...props.modelValue }
|
||||||
|
form[config.name] = value
|
||||||
|
emit('update:modelValue', form)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得默认表单值
|
||||||
|
const getDefaultFormValue = () => {
|
||||||
|
const form = {}
|
||||||
|
props.formConfig.forEach(config => {
|
||||||
|
form[config.name] = config.default !== undefined ? config.default : ''
|
||||||
|
})
|
||||||
|
return form
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
getDefaultFormValue,
|
||||||
|
formComponent: formRef.value,
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.form-wrapper {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -14,8 +14,8 @@
|
|||||||
<slot></slot>
|
<slot></slot>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<div class="dialog-footer">
|
<div class="dialog-footer">
|
||||||
<el-button @click="onCancel"> {{ onCancelName }} </el-button>
|
<el-button class="button" size="large" type="primary" @click="onConfirm"> {{ onConfirmName }} </el-button>
|
||||||
<el-button type="primary" @click="onConfirm"> {{ onConfirmName }} </el-button>
|
<el-button class="button" size="large" @click="onCancel"> {{ onCancelName }} </el-button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
@ -59,7 +59,7 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
onConfirmName: {
|
onConfirmName: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "确认",
|
default: "保存",
|
||||||
},
|
},
|
||||||
onCancelName: {
|
onCancelName: {
|
||||||
type: String,
|
type: String,
|
||||||
@ -72,5 +72,13 @@ const normalizedComponent = computed(() =>
|
|||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style lang="scss" scoped>
|
||||||
|
.dialog-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.button {
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,81 +1,103 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="detail-container">
|
<div>
|
||||||
<el-form
|
<div class="area-title-block">
|
||||||
ref="formRef"
|
所属服务站: <span class="title-text">{{ stationName }}</span>
|
||||||
label-position="right"
|
</div>
|
||||||
label-width="auto"
|
<el-form :model="form" class="equipment-form">
|
||||||
style="max-height: 60vh; overflow-y: auto; padding-right: 50px"
|
<!-- 第一行：设备名称、设备大类、设备类型 -->
|
||||||
>
|
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="12">
|
<el-col :span="8">
|
||||||
<el-form-item label="操作员:">
|
<el-form-item label="设备名称" prop="sbmc">
|
||||||
<el-input v-model="form.czy" />
|
<el-input v-model="form.sbmc" maxlength="20" placeholder="请输入设备名称" />
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="辐射范围:">
|
|
||||||
<el-input v-model="form.fsfw" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="管理人员:">
|
|
||||||
<el-input v-model="form.glry" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="购买费用（万元）:">
|
|
||||||
<el-input v-model="form.gmfy" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="购置日期:">
|
|
||||||
<el-input v-model="form.gzrq" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="区县名称:">
|
|
||||||
<el-input v-model="form.qxmc" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="设备编号:">
|
|
||||||
<el-input v-model="form.sbbh" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="设备大类:">
|
|
||||||
<el-input v-model="form.sbdl" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="设备小类:">
|
|
||||||
<el-input v-model="form.sbxl" />
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="8">
|
||||||
<el-form-item label="设备名称:">
|
<el-form-item label="设备大类" prop="sbdl">
|
||||||
<el-input v-model="form.sbmc" />
|
<el-select v-model="form.sbdl" placeholder="请选择">
|
||||||
</el-form-item>
|
<el-option label="示例大类1" value="dl1" />
|
||||||
<el-form-item label="设备位置:">
|
<el-option label="示例大类2" value="dl2" />
|
||||||
<el-input v-model="form.sbwz" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="设备经度:">
|
|
||||||
<el-input v-model="form.jd" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="设备纬度:">
|
|
||||||
<el-input v-model="form.wd" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="设备型号:">
|
|
||||||
<el-input v-model="form.sbxh" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="设备状态:">
|
|
||||||
<el-select v-model="form.sbzt" placeholder="请选择" clearable>
|
|
||||||
<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-col>
|
||||||
<el-input v-model="form.sccj" />
|
<el-col :span="8">
|
||||||
|
<el-form-item label="设备类型" prop="sblx">
|
||||||
|
<el-select v-model="form.sblx" placeholder="请选择">
|
||||||
|
<el-option label="示例类型1" value="lx1" />
|
||||||
|
<el-option label="示例类型2" value="lx2" />
|
||||||
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="是否应急设备:">
|
</el-col>
|
||||||
<el-input v-model="form.sfyjsb" />
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 第二行：设备型号、设备经度（只读）、设备纬度（只读） -->
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="设备型号" prop="sbxh">
|
||||||
|
<el-input v-model="form.sbxh" placeholder="请输入设备型号" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="是否纳入市级补助范围:">
|
</el-col>
|
||||||
<el-input v-model="form.sfnrsjbz" />
|
<el-col :span="8">
|
||||||
|
<el-form-item label="设备经度" prop="jd">
|
||||||
|
<el-input v-model="form.jd" placeholder="自动填充服务站经纬度" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="设备纬度" prop="wd">
|
||||||
|
<el-input v-model="form.wd" placeholder="自动填充服务站经纬度" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 第三行：购置日期、购买费用（万元）、应急设备 -->
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="购置日期" prop="gzrq">
|
||||||
|
<el-date-picker v-model="form.gzrq" type="date" placeholder="请选择购置日期" style="width: 100%;" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="购买费用（万元）" prop="gmfy">
|
||||||
|
<el-input-number v-model="form.gmfy" :min="1" :max="10" controls-position="right" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="应急设备" prop="sfyjsb">
|
||||||
|
<el-select v-model="form.sfyjsb" placeholder="请选择">
|
||||||
|
<el-option label="是" value="是" />
|
||||||
|
<el-option label="否" value="否" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 第四行：辐射范围、生产商、纳入市级补助范围 -->
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="辐射范围" prop="fsfw">
|
||||||
|
<el-input v-model="form.fsfw" placeholder="请输入辐射范围" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="生产商" prop="sccj">
|
||||||
|
<el-input v-model="form.sccj" placeholder="请输入生产商" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="纳入市级补助范围" prop="sfnrsjbz">
|
||||||
|
<el-select v-model="form.sfnrsjbz" placeholder="请选择">
|
||||||
|
<el-option label="是" value="是" />
|
||||||
|
<el-option label="否" value="否" />
|
||||||
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from "vue";
|
import { ref, computed } from "vue";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
detailData: {
|
detailData: {
|
||||||
@ -86,8 +108,31 @@ const props = defineProps({
|
|||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({}),
|
default: () => ({}),
|
||||||
},
|
},
|
||||||
|
// 养护站数据
|
||||||
|
yhzData: {
|
||||||
|
type: [Object, null],
|
||||||
|
default: null,
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const stationName = computed(() => {
|
||||||
|
return props.yhzData ? props.yhzData.rawName : ''
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped lang="scss">
|
||||||
|
.area-title-block {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
color: rgb(10, 124, 255);
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.equipment-form) {
|
||||||
|
.el-form-item {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,82 +1,268 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="detail-container">
|
<div>
|
||||||
<el-form
|
<el-drawer v-model="visible" size="700px" :show-close="false">
|
||||||
label-position="right"
|
<template #header="{ close, titleId, titleClass }">
|
||||||
label-width="auto"
|
<div class="drawer-header">
|
||||||
style="max-height: 60vh; overflow-y: auto; padding-right: 50px"
|
<el-icon class="el-icon--close" @click="close">
|
||||||
>
|
<Close />
|
||||||
<el-row :gutter="20">
|
</el-icon>
|
||||||
<el-col :span="12">
|
<h4 :id="titleId" :class="titleClass">{{ title }}</h4>
|
||||||
<el-form-item label="操作员:">
|
</div>
|
||||||
<el-input disabled v-model="detailData.czy" />
|
</template>
|
||||||
</el-form-item>
|
<div v-if="equipment" class="drawer-content">
|
||||||
<el-form-item label="辐射范围:">
|
<!-- 基础信息 -->
|
||||||
<el-input disabled v-model="detailData.fsfw" />
|
<div class="info-box">
|
||||||
</el-form-item>
|
<div class="info-title-block">
|
||||||
<el-form-item label="管理人员:">
|
<span class="title-text">基础信息</span>
|
||||||
<el-input disabled v-model="detailData.glry" />
|
</div>
|
||||||
</el-form-item>
|
<div class="info-content-block flex">
|
||||||
<el-form-item label="购买费用（万元）:">
|
<div class="left-wrapper">
|
||||||
<el-input disabled v-model="detailData.gmfy" />
|
<div class="info-item-list-wrapper">
|
||||||
</el-form-item>
|
<div class="info-item" v-for="(item, index) in showDataConfig['基础信息']" :key="index">
|
||||||
<el-form-item label="购置日期:">
|
<div class="label">{{ item.label }}</div>
|
||||||
<el-input disabled v-model="detailData.gzrq" />
|
<div class="value">{{ equipment[item.name] }}</div>
|
||||||
</el-form-item>
|
</div>
|
||||||
<el-form-item label="区县名称:">
|
</div>
|
||||||
<el-input disabled v-model="detailData.qxmc" />
|
</div>
|
||||||
</el-form-item>
|
<div class="right-wrapper">
|
||||||
<el-form-item label="设备编号:">
|
<div>
|
||||||
<el-input disabled v-model="detailData.sbbh" />
|
<el-tag v-if="equipment.sbzt === '完好'" type="success" size="small">完好</el-tag>
|
||||||
</el-form-item>
|
<el-tag v-if="equipment.sbzt === '损坏'" type="danger" size="small">损坏</el-tag>
|
||||||
<el-form-item label="设备大类:">
|
<el-tag v-if="equipment.sbzt === '报废'" type="danger" size="small">报废</el-tag>
|
||||||
<el-input disabled v-model="detailData.sbdl" />
|
</div>
|
||||||
</el-form-item>
|
<div class="photo-block">
|
||||||
<el-form-item label="设备小类:">
|
<el-image v-if="defaultPhoto" style="width: 100%; height: 100%" :src="defaultPhoto" :zoom-rate="1.2"
|
||||||
<el-input disabled v-model="detailData.sbxl" />
|
:max-scale="7" :min-scale="0.2" :preview-src-list="photos" show-progress :initial-index="4"
|
||||||
</el-form-item>
|
fit="cover" />
|
||||||
</el-col>
|
<div v-else class="no-photo">
|
||||||
<el-col :span="12">
|
<span>暂无图片</span>
|
||||||
<el-form-item label="设备名称:">
|
</div>
|
||||||
<el-input disabled v-model="detailData.sbmc" />
|
</div>
|
||||||
</el-form-item>
|
</div>
|
||||||
<el-form-item label="设备位置:">
|
</div>
|
||||||
<el-input disabled v-model="detailData.sbwz" />
|
</div>
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="设备经度:">
|
<!-- 设备位置 -->
|
||||||
<el-input disabled v-model="detailData.jd" />
|
<DetailInfoBox class="detail-info-box" :data="equipment" :title="'设备位置'" :dataConfig="showDataConfig['设备位置']" />
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="设备纬度:">
|
<!-- 设备管理情况 -->
|
||||||
<el-input disabled v-model="detailData.wd" />
|
<DetailInfoBox class="detail-info-box" :data="equipment" :title="'设备管理情况'"
|
||||||
</el-form-item>
|
:dataConfig="showDataConfig['设备管理情况']" />
|
||||||
<el-form-item label="设备型号:">
|
</div>
|
||||||
<el-input disabled v-model="detailData.sbxh" />
|
|
||||||
</el-form-item>
|
<!-- 设备情况 -->
|
||||||
<el-form-item label="设备状态:">
|
<template v-for="(item, index) in statusList">
|
||||||
<el-input disabled v-model="detailData.sbzt" />
|
<DetailInfoBox class="detail-info-box" :data="item" :title="index == 0 ? '设备情况' : ''"
|
||||||
</el-form-item>
|
:dataConfig="showDataConfig['设备情况']" />
|
||||||
<el-form-item label="生产厂家:">
|
</template>
|
||||||
<el-input disabled v-model="detailData.sccj" />
|
</el-drawer>
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="是否应急设备:">
|
|
||||||
<el-input disabled v-model="detailData.sfyjsb" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="是否纳入市级补助范围:">
|
|
||||||
<el-input disabled v-model="detailData.sfnrsjbz" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
const props = defineProps({
|
import { ref } from 'vue'
|
||||||
detailData: {
|
import { Close } from '@element-plus/icons-vue'
|
||||||
type: Object,
|
import DetailInfoBox from '@/component/DetailInfoBox/DetailInfoBox.vue'
|
||||||
default: () => ({}),
|
import { formatDate } from '../../../../shared/utils'
|
||||||
|
|
||||||
|
const visible = ref(false)
|
||||||
|
const title = ref('设备详情')
|
||||||
|
const equipment = ref(null)
|
||||||
|
const statusList = ref([])
|
||||||
|
const defaultPhoto = ref('')
|
||||||
|
const photos = ref([])
|
||||||
|
const showDialog = (data) => {
|
||||||
|
equipment.value = data.equipment || {}
|
||||||
|
statusList.value = data.statusList || []
|
||||||
|
photos.value = data.photos?.length ? data.photos.map((item) => item.photoUrl) : []
|
||||||
|
defaultPhoto.value = photos.value && photos.value[0] || null
|
||||||
|
visible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const showDataConfig = ref({
|
||||||
|
'基础信息':
|
||||||
|
[{
|
||||||
|
"label": "设备名称",
|
||||||
|
"name": "sbmc"
|
||||||
|
}, {
|
||||||
|
"label": "设备大类",
|
||||||
|
"name": "sbdl"
|
||||||
|
}, {
|
||||||
|
"label": "设备类型",
|
||||||
|
"name": "sblx"
|
||||||
|
}, {
|
||||||
|
"label": "设备编号",
|
||||||
|
"name": "sbbh"
|
||||||
|
}, {
|
||||||
|
"label": "设备型号",
|
||||||
|
"name": "sbxh"
|
||||||
|
}, {
|
||||||
|
"label": "生产商",
|
||||||
|
"name": "sccj"
|
||||||
|
}, {
|
||||||
|
"label": "所属服务站",
|
||||||
|
"name": "yhzmc"
|
||||||
|
}, {
|
||||||
|
"label": "上传人",
|
||||||
|
"name": "czy"
|
||||||
|
}, {
|
||||||
|
"label": "上传时间",
|
||||||
|
"name": "tjsj"
|
||||||
|
}, {
|
||||||
|
"label": "备注",
|
||||||
|
"name": "remark"
|
||||||
|
}],
|
||||||
|
"设备位置": [{ "label": "设备位置", "name": "sbwz" }, { "label": "设备经度", "name": "jd" }, { "label": "设备纬度", "name": "wd" }],
|
||||||
|
"设备管理情况": [
|
||||||
|
{ "label": "设备管理人员", "name": "glry" },
|
||||||
|
{ "label": "操作员", "name": "czy" },
|
||||||
|
{
|
||||||
|
"label": "购置日期", "name": "gzrq",
|
||||||
|
"value": (item) => {
|
||||||
|
return item.gzrq ? formatDate(item.gzrq) : ''
|
||||||
|
}
|
||||||
},
|
},
|
||||||
});
|
{ "label": "购买费用（万元）", "name": "gmfy" },
|
||||||
|
{ "label": "应急设备", "name": "sfyjsb" },
|
||||||
|
{ "label": "纳入市级补助范围", "name": "sfnrsjbz" },
|
||||||
|
{ "label": "辐射范围", "name": "fsfw" }
|
||||||
|
],
|
||||||
|
"设备情况": [
|
||||||
|
{
|
||||||
|
"label": (item) => {
|
||||||
|
if (item.equipmentStatus == '正常') return '设备状态'
|
||||||
|
if (item.equipmentStatus == '损坏') return '损坏原因'
|
||||||
|
if (item.equipmentStatus == '报废') return '报废原因'
|
||||||
|
},
|
||||||
|
"value": (item) => {
|
||||||
|
if (item.equipmentStatus == '正常') return '正常'
|
||||||
|
if (item.equipmentStatus == '损坏') return item.statusDesc
|
||||||
|
if (item.equipmentStatus == '报废') return item.statusDesc
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "上报时间",
|
||||||
|
"value": (item) => {
|
||||||
|
return item.reportTime ? formatDate(item.reportTime) : ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "上报人",
|
||||||
|
"name": "userName"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
showDialog
|
||||||
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style lang="scss" scoped>
|
||||||
|
.drawer-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.el-icon--close {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-right: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-box {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.info-title-block {
|
||||||
|
margin: 10px 0;
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-content-block {
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
.info-item-list-wrapper {
|
||||||
|
display: grid;
|
||||||
|
width: 100%;
|
||||||
|
row-gap: 15px;
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-right: 10px;
|
||||||
|
line-height: 14px;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: ":"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
line-height: 14px;
|
||||||
|
font-size: 14px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-content-block.flex {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.right-wrapper {
|
||||||
|
display: flex;
|
||||||
|
gap: 30px;
|
||||||
|
|
||||||
|
.photo-block {
|
||||||
|
width: 150px;
|
||||||
|
height: 167px;
|
||||||
|
|
||||||
|
.no-photo {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.detail-info-box) {
|
||||||
|
.info-item-list-wrapper {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-drawer__header) {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-drawer__body) {
|
||||||
|
padding: 15px;
|
||||||
|
background-color: rgb(242, 242, 242);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -5,6 +5,7 @@ import DetailDialog from "./detailDialog.vue";
|
|||||||
import EditDialog from "./editDialog.vue";
|
import EditDialog from "./editDialog.vue";
|
||||||
import AddDialog from "./addDialog.vue";
|
import AddDialog from "./addDialog.vue";
|
||||||
import { useRoute } from 'vue-router'
|
import { useRoute } from 'vue-router'
|
||||||
|
import { formatDate } from '../../../../shared/utils'
|
||||||
|
|
||||||
const treeData = ref([]);
|
const treeData = ref([]);
|
||||||
const treeProps = {
|
const treeProps = {
|
||||||
@ -15,6 +16,7 @@ const treeProps = {
|
|||||||
const filterText = ref(''); // 树节点过滤条件
|
const filterText = ref(''); // 树节点过滤条件
|
||||||
const tableData = ref([]);
|
const tableData = ref([]);
|
||||||
const qxmc = ref(''); // 区县名称
|
const qxmc = ref(''); // 区县名称
|
||||||
|
const selectedYHZData = ref(null); // 被选中的养护站数据
|
||||||
const yhzid = ref(''); // 养护站id
|
const yhzid = ref(''); // 养护站id
|
||||||
const filterData = reactive({
|
const filterData = reactive({
|
||||||
sbmc: '',
|
sbmc: '',
|
||||||
@ -44,6 +46,7 @@ const model = reactive({
|
|||||||
}); // 弹窗内容
|
}); // 弹窗内容
|
||||||
const dialogType = ref(''); // 弹窗类型
|
const dialogType = ref(''); // 弹窗类型
|
||||||
const dialogRef = ref(null); // 弹窗实例
|
const dialogRef = ref(null); // 弹窗实例
|
||||||
|
const detailDialogRef = ref(null); // 详情信息弹窗
|
||||||
|
|
||||||
const INIT_FORM = {
|
const INIT_FORM = {
|
||||||
rid: "",
|
rid: "",
|
||||||
@ -109,7 +112,12 @@ const getTreeData = async () => {
|
|||||||
children: qx.yhzList.map(site => ({
|
children: qx.yhzList.map(site => ({
|
||||||
id: site.id,
|
id: site.id,
|
||||||
name: `${site.mc}(${site.sbsl})`,
|
name: `${site.mc}(${site.sbsl})`,
|
||||||
type: 'site'
|
type: 'site',
|
||||||
|
qxmc: qx.qxmc,
|
||||||
|
rawName: site.mc,
|
||||||
|
jd: site.jd,
|
||||||
|
wd: site.wd,
|
||||||
|
sbwz: qx.qxmc
|
||||||
})),
|
})),
|
||||||
rawName: qx.qxmc, // 原始名称
|
rawName: qx.qxmc, // 原始名称
|
||||||
})
|
})
|
||||||
@ -130,18 +138,21 @@ const handleNodeClick = (data, node) => {
|
|||||||
console.log('树节点关闭', node.expanded)
|
console.log('树节点关闭', node.expanded)
|
||||||
yhzid.value = ''; // 重置养护站id
|
yhzid.value = ''; // 重置养护站id
|
||||||
qxmc.value = ''; // 重置区县名称
|
qxmc.value = ''; // 重置区县名称
|
||||||
|
selectedYHZData.value = null;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (data.type === 'area') {
|
if (data.type === 'area') {
|
||||||
console.log('你点击的是区县', data.id)
|
console.log('你点击的是区县', data.id)
|
||||||
yhzid.value = ''; // 重置养护站id
|
yhzid.value = ''; // 重置养护站id
|
||||||
qxmc.value = data.id; // 保存区县名称
|
qxmc.value = data.id; // 保存区县名称
|
||||||
|
selectedYHZData.value = null
|
||||||
|
|
||||||
}
|
}
|
||||||
if (data.type === 'site') {
|
if (data.type === 'site') {
|
||||||
console.log('你点击的是站点', data.name)
|
console.log('你点击的是站点', data.name)
|
||||||
yhzid.value = data.id; // 保存养护站id
|
yhzid.value = data.id; // 保存养护站id
|
||||||
qxmc.value = ''; // 重置区县名称
|
qxmc.value = ''; // 重置区县名称
|
||||||
|
selectedYHZData.value = data
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -205,6 +216,11 @@ const columns = [
|
|||||||
{
|
{
|
||||||
prop: 'gzrq',
|
prop: 'gzrq',
|
||||||
label: '购置日期',
|
label: '购置日期',
|
||||||
|
width: 160,
|
||||||
|
render: (row) => {
|
||||||
|
const el = h('span', null, [row.gzrq ? formatDate(row.gzrq) : ''])
|
||||||
|
return el
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'gmfy',
|
prop: 'gmfy',
|
||||||
@ -214,6 +230,14 @@ const columns = [
|
|||||||
prop: 'qxmc',
|
prop: 'qxmc',
|
||||||
label: '所属区县',
|
label: '所属区县',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: '上传时间',
|
||||||
|
width: 160,
|
||||||
|
render: (row) => {
|
||||||
|
const el = h('span', null, [row.tjsj ? formatDate(row.tjsj) : ''])
|
||||||
|
return el
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: "操作",
|
label: "操作",
|
||||||
fixed: "right",
|
fixed: "right",
|
||||||
@ -232,18 +256,18 @@ const columns = [
|
|||||||
},
|
},
|
||||||
() => "详情"
|
() => "详情"
|
||||||
),
|
),
|
||||||
h(
|
// h(
|
||||||
ElButton,
|
// ElButton,
|
||||||
{
|
// {
|
||||||
type: "primary",
|
// type: "primary",
|
||||||
link: true,
|
// link: true,
|
||||||
onClick: async () => {
|
// onClick: async () => {
|
||||||
dialogType.value = 'edit'
|
// dialogType.value = 'edit'
|
||||||
await getDetailData(row);
|
// await getDetailData(row);
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
() => "编辑"
|
// () => "编辑"
|
||||||
),
|
// ),
|
||||||
h(
|
h(
|
||||||
ElButton,
|
ElButton,
|
||||||
{
|
{
|
||||||
@ -317,20 +341,9 @@ const getDetailData = async (row) => {
|
|||||||
}
|
}
|
||||||
if (res.code === '00000') {
|
if (res.code === '00000') {
|
||||||
if (dialogType.value === 'detail') {
|
if (dialogType.value === 'detail') {
|
||||||
model.title = `设备详情`;
|
// 打开详情
|
||||||
model.content = DetailDialog;
|
detailDialogRef.value.showDialog(res.data)
|
||||||
model.props = {
|
|
||||||
detailData: res.data.equipment,
|
|
||||||
};
|
|
||||||
model.onCancel = () => {
|
|
||||||
dialogType.value = '';
|
|
||||||
modelVisible.value = false;
|
|
||||||
};
|
|
||||||
model.onConfirm = () => {
|
|
||||||
dialogType.value = '';
|
|
||||||
modelVisible.value = false;
|
|
||||||
};
|
|
||||||
modelVisible.value = true;
|
|
||||||
}
|
}
|
||||||
if (dialogType.value === 'edit') {
|
if (dialogType.value === 'edit') {
|
||||||
model.title = `编辑设备`;
|
model.title = `编辑设备`;
|
||||||
@ -365,8 +378,16 @@ const getDetailData = async (row) => {
|
|||||||
const openAddEquipmentModel = () => {
|
const openAddEquipmentModel = () => {
|
||||||
model.title = `新增设备`;
|
model.title = `新增设备`;
|
||||||
model.content = AddDialog;
|
model.content = AddDialog;
|
||||||
Object.assign(form, INIT_FORM);
|
const extraData = {
|
||||||
|
jd: selectedYHZData.value.jd,
|
||||||
|
wd: selectedYHZData.value.wd,
|
||||||
|
yhzid: selectedYHZData.value.id,
|
||||||
|
qxmc: selectedYHZData.value.qxmc,
|
||||||
|
sbwz: selectedYHZData.value.sbwz,
|
||||||
|
}
|
||||||
|
Object.assign(form, INIT_FORM, extraData);
|
||||||
model.props = {
|
model.props = {
|
||||||
|
yhzData: selectedYHZData,
|
||||||
detailData: {},
|
detailData: {},
|
||||||
form: form,
|
form: form,
|
||||||
};
|
};
|
||||||
@ -380,7 +401,9 @@ const openAddEquipmentModel = () => {
|
|||||||
const res = await request({
|
const res = await request({
|
||||||
url: '/snow-ops-platform/yjsb/add',
|
url: '/snow-ops-platform/yjsb/add',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
data: toRaw(form),
|
data: {
|
||||||
|
equipment: toRaw(form)
|
||||||
|
},
|
||||||
});
|
});
|
||||||
if (res.code === '00000') {
|
if (res.code === '00000') {
|
||||||
ElMessage.success('新增成功');
|
ElMessage.success('新增成功');
|
||||||
@ -478,5 +501,8 @@ export default () => {
|
|||||||
dialogRef,
|
dialogRef,
|
||||||
model,
|
model,
|
||||||
openAddEquipmentModel,
|
openAddEquipmentModel,
|
||||||
|
|
||||||
|
selectedYHZData,
|
||||||
|
detailDialogRef
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -50,6 +50,7 @@
|
|||||||
<div class="form-box">
|
<div class="form-box">
|
||||||
<div class="event-box">
|
<div class="event-box">
|
||||||
<el-button
|
<el-button
|
||||||
|
v-if="selectedYHZData"
|
||||||
type="primary"
|
type="primary"
|
||||||
size="large"
|
size="large"
|
||||||
@click="script.openAddEquipmentModel"
|
@click="script.openAddEquipmentModel"
|
||||||
@ -78,20 +79,23 @@
|
|||||||
:onConfirm="script.model?.onConfirm"
|
:onConfirm="script.model?.onConfirm"
|
||||||
:onCancel="script.model?.onCancel"
|
:onCancel="script.model?.onCancel"
|
||||||
ref="dialogRef"
|
ref="dialogRef"
|
||||||
width="60%"
|
width="70%"
|
||||||
>
|
>
|
||||||
</MyDialog>
|
</MyDialog>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<detailDialog ref="detailDialogRef" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import scriptFn from "./index.js";
|
import scriptFn from "./index.js";
|
||||||
import DynamicTable from "../../component/DynamicTable";
|
import DynamicTable from "../../component/DynamicTable";
|
||||||
import MyDialog from "../../component/MyDialog";
|
import MyDialog from "../../component/MyDialog";
|
||||||
|
import detailDialog from "./detailDialog.vue";
|
||||||
|
|
||||||
const script = scriptFn();
|
const script = scriptFn();
|
||||||
const { treeRef, dialogRef } = script;
|
const { treeRef, dialogRef, detailDialogRef, selectedYHZData } = script;
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.root {
|
.root {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user