大屏二级页面 + 装备类型管理
This commit is contained in:
parent
70fdb1b652
commit
cd65de7a9e
|
|
@ -204,6 +204,7 @@ export default {
|
|||
}
|
||||
addProperties(formData).then((response) => {
|
||||
this.$modal.msgSuccess('新增成功')
|
||||
this.$emit('refresh')
|
||||
})
|
||||
this.handleClose()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
@close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
label-width="80px"
|
||||
label-width="110px"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
|
|
@ -33,6 +33,14 @@
|
|||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="showIsStateGrid">
|
||||
<el-form-item label="是否国网单位" prop="isStateGrid">
|
||||
<el-select v-model="form.isStateGrid" placeholder="请选择是否国网单位" style="width: 100%">
|
||||
<el-option label="是" :value="true"></el-option>
|
||||
<el-option label="否" :value="false"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="text-align: right; margin-top: 20px">
|
||||
|
|
@ -58,19 +66,25 @@ export default {
|
|||
parentNode: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
showIsStateGrid: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
parentName: '',
|
||||
name: ''
|
||||
name: '',
|
||||
isStateGrid: null
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' },
|
||||
{ min: 2, max: 20, message: '长度在2到20个字符', trigger: 'blur' }
|
||||
]
|
||||
],
|
||||
isStateGrid: [{ required: true, message: '请选择是否国网单位', trigger: 'change' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -99,10 +113,13 @@ export default {
|
|||
const formData = {
|
||||
typeName: this.form.name || null,
|
||||
parentId: this.parentNode?.id || null,
|
||||
companyId: this.parentNode?.companyId || null
|
||||
// companyId: this.parentNode?.companyId || null,
|
||||
isStateGrid: this.form.isStateGrid || null
|
||||
}
|
||||
console.log('🚀 ~ onSubmit ~ formData:', formData)
|
||||
addMaType(formData).then((response) => {
|
||||
this.$modal.msgSuccess('新增成功')
|
||||
this.$emit('refresh')
|
||||
})
|
||||
this.handleClose()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,13 +22,13 @@
|
|||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="设备名称" prop="deviceName">
|
||||
<el-input v-model="form.deviceName"/>
|
||||
<el-form-item label="设备名称" prop="typeName">
|
||||
<el-input v-model="form.typeName"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="计量单位" prop="unit">
|
||||
<el-input v-model="form.unit"/>
|
||||
<el-form-item label="计量单位" prop="unitName">
|
||||
<el-input v-model="form.unitName"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -45,14 +45,14 @@
|
|||
|
||||
<el-row :gutter="20" style="margin-bottom: 10px">
|
||||
<el-col
|
||||
v-for="(item, index) in form.features"
|
||||
v-for="(item, index) in form.formFeature"
|
||||
:key="index"
|
||||
:span="8"
|
||||
>
|
||||
<el-form-item
|
||||
style="margin: unset"
|
||||
:label="item.featureName"
|
||||
:prop="`features[${index}].value`"
|
||||
:prop="`formFeature[${index}].value`"
|
||||
required
|
||||
:rules="[{ required: true, message: `请输入${item.featureName}`, trigger: ['blur', 'change'] }]"
|
||||
>
|
||||
|
|
@ -123,17 +123,17 @@ export default {
|
|||
major: '',
|
||||
mainProcedure: '',
|
||||
subProcedure: '',
|
||||
deviceName: '',
|
||||
unit: '',
|
||||
typeName: '',
|
||||
unitName: '',
|
||||
powerType: '',
|
||||
ratedForce: '',
|
||||
maxForce: '',
|
||||
smartControl: '',
|
||||
features: [] // 特征项数组
|
||||
formFeature: [] // 特征项数组
|
||||
},
|
||||
rules: {
|
||||
deviceName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
|
||||
unit: [{ required: true, message: '请输入计量单位', trigger: 'blur' }],
|
||||
typeName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
|
||||
unitName: [{ required: true, message: '请输入计量单位', trigger: 'blur' }],
|
||||
powerType: [{ required: true, message: '请输入动力方式', trigger: 'blur' }],
|
||||
ratedForce: [{ required: true, message: '请输入额定牵引力', trigger: 'blur' }],
|
||||
maxForce: [{ required: true, message: '请输入最大牵引力', trigger: 'blur' }],
|
||||
|
|
@ -155,11 +155,15 @@ export default {
|
|||
parentNode: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
this.form.subProcedure = newVal?.label || null
|
||||
this.form.major = newVal?.major || null
|
||||
this.form.mainProcedure = newVal?.mainProcedure || null
|
||||
this.form.deviceName = newVal?.label || newVal?.typeName
|
||||
this.form.unit = newVal?.unitName || null
|
||||
this.form = {
|
||||
...this.form,
|
||||
...newVal,
|
||||
}
|
||||
// this.form.subProcedure = newVal?.subProcedure || null
|
||||
// this.form.major = newVal?.major || null
|
||||
// this.form.mainProcedure = newVal?.mainProcedure || null
|
||||
// this.form.typeName = newVal?.label || newVal?.typeName
|
||||
// this.form.unitName = newVal?.unitName || null
|
||||
// 解析特征值数据并生成特征项
|
||||
this.analyzeData(newVal?.maTypeProperties || [])
|
||||
}
|
||||
|
|
@ -172,7 +176,7 @@ export default {
|
|||
*/
|
||||
analyzeData(data) {
|
||||
// 清空现有特征项
|
||||
this.form.features = []
|
||||
this.form.formFeature = []
|
||||
if (!data || !data.length) return
|
||||
|
||||
// 统计每个propertyName的出现次数和对应值
|
||||
|
|
@ -194,7 +198,7 @@ export default {
|
|||
|
||||
// 转换统计结果为特征项数组
|
||||
Object.entries(result).forEach(([name, info]) => {
|
||||
this.form.features.push({
|
||||
this.form.formFeature.push({
|
||||
featureName: name,
|
||||
// 出现次数>1的显示为下拉选，否则为输入框
|
||||
inputType: info.count > 1 ? 'select' : 'input',
|
||||
|
|
@ -206,7 +210,7 @@ export default {
|
|||
|
||||
handleSubmitSuccess(data) {
|
||||
const formData = JSON.parse(data)
|
||||
const isDuplicate = this.form.features.some(
|
||||
const isDuplicate = this.form.formFeature.some(
|
||||
(item) => item.featureName === formData.featureName
|
||||
)
|
||||
if (!isDuplicate) {
|
||||
|
|
@ -216,7 +220,7 @@ export default {
|
|||
formData.value = ''
|
||||
formData.options = []
|
||||
}
|
||||
this.form.features.push(formData)
|
||||
this.form.formFeature.push(formData)
|
||||
this.featureOpen = false
|
||||
} else {
|
||||
this.$message.warning(`特征项 "${formData.featureName}" 已存在！`)
|
||||
|
|
@ -228,7 +232,7 @@ export default {
|
|||
},
|
||||
|
||||
removeFeature(index) {
|
||||
this.form.features.splice(index, 1)
|
||||
this.form.formFeature.splice(index, 1)
|
||||
},
|
||||
|
||||
handleClose() {
|
||||
|
|
@ -241,15 +245,16 @@ export default {
|
|||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
const formData = {
|
||||
typeName: this.form.deviceName || null,
|
||||
typeId: this.parentNode?.id || null,
|
||||
parentId: this.parentNode?.parentId || null,
|
||||
companyId: this.parentNode?.companyId || null,
|
||||
unitName: this.form.unit || null,
|
||||
formFeature: this.form.features || null
|
||||
typeName: this.form.typeName || null,
|
||||
typeId: this.form?.typeId || null,
|
||||
parentId: this.form?.parentId || null,
|
||||
companyId: this.form?.companyId || null,
|
||||
unitName: this.form.unitName || null,
|
||||
formFeature: this.form.formFeature || null
|
||||
}
|
||||
updateProperties(formData).then((response) => {
|
||||
this.$modal.msgSuccess('修改成功')
|
||||
this.$emit('refresh')
|
||||
this.handleClose()
|
||||
})
|
||||
}
|
||||
|
|
@ -257,7 +262,7 @@ export default {
|
|||
},
|
||||
|
||||
resetForm() {
|
||||
this.form.features = []
|
||||
this.form.formFeature = []
|
||||
this.$refs.form?.resetFields()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,12 +8,25 @@
|
|||
@close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
label-width="80px"
|
||||
label-width="110px"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="所属上级">
|
||||
<treeselect
|
||||
v-model="form.parentId"
|
||||
:options="deptOptions"
|
||||
:normalizer="normalizer"
|
||||
:show-count="true"
|
||||
noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
|
||||
placeholder="请选择所属上级"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input
|
||||
|
|
@ -25,6 +38,17 @@
|
|||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" v-if="showIsStateGrid">
|
||||
<el-form-item label="是否国网单位" prop="isStateGrid">
|
||||
<el-select v-model="form.isStateGrid" placeholder="请选择是否国网单位" style="width: 100%">
|
||||
<el-option label="是" :value="true"></el-option>
|
||||
<el-option label="否" :value="false"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="text-align: right; margin-top: 20px">
|
||||
<el-form-item>
|
||||
|
|
@ -37,9 +61,12 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { updateMaType } from '@/api/lessor/equipType'
|
||||
import { updateMaType, getMaTypeList } from '@/api/lessor/equipType'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
|
||||
export default {
|
||||
components: { Treeselect },
|
||||
name: 'EditNodeDialog',
|
||||
props: {
|
||||
visible: {
|
||||
|
|
@ -49,24 +76,32 @@ export default {
|
|||
parentNode: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
showIsStateGrid: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: ''
|
||||
name: '',
|
||||
isStateGrid: null
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' },
|
||||
{ min: 2, max: 20, message: '长度在2到20个字符', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
],
|
||||
isStateGrid: [{ required: true, message: '请选择是否显示', trigger: 'change' }]
|
||||
},
|
||||
deptOptions: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dialogVisible: {
|
||||
get() {
|
||||
this.getTreeData()
|
||||
return this.visible
|
||||
},
|
||||
set(val) {
|
||||
|
|
@ -78,21 +113,58 @@ export default {
|
|||
parentNode: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
console.log(newVal)
|
||||
console.log('🚀 ~ handler ~ newVal:', newVal)
|
||||
this.form.name = newVal?.label || newVal?.name || ''
|
||||
this.form.isStateGrid = newVal?.isStateGrid || null
|
||||
this.form.parentId = newVal?.parentId || null
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getTreeData() {
|
||||
const response = await getMaTypeList()
|
||||
// 递归过滤掉 level == 7 的节点
|
||||
const filterTree = (nodes) => {
|
||||
return nodes
|
||||
.filter(node => node.level !== 7) // 过滤掉 level=7 的
|
||||
.map(node => ({
|
||||
...node,
|
||||
children: node.children ? filterTree(node.children) : []
|
||||
}))
|
||||
}
|
||||
|
||||
this.deptOptions = [
|
||||
{
|
||||
label: '机具类型',
|
||||
id: 0,
|
||||
children: filterTree(response.data),
|
||||
level: 0
|
||||
}
|
||||
]
|
||||
},
|
||||
/** 转换菜单数据结构 */
|
||||
normalizer(node) {
|
||||
if (node.children && !node.children.length) {
|
||||
delete node.children;
|
||||
}
|
||||
return {
|
||||
id: node.id,
|
||||
label: node.label,
|
||||
children: node.children,
|
||||
};
|
||||
},
|
||||
onSubmit() {
|
||||
this.$refs.formRef.validate(valid => {
|
||||
if (valid) {
|
||||
const formData = {
|
||||
typeName: this.form.name || null,
|
||||
typeId: this.parentNode?.id || null
|
||||
typeId: this.parentNode?.id || null,
|
||||
isStateGrid: this.form.isStateGrid || null,
|
||||
parentId: this.form.parentId || null
|
||||
}
|
||||
updateMaType(formData).then((response) => {
|
||||
this.$modal.msgSuccess('修改成功')
|
||||
this.$emit('refresh')
|
||||
})
|
||||
this.handleClose()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@
|
|||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-plus"
|
||||
v-show="data.level !==4"
|
||||
v-show="data.level !== 7"
|
||||
@click.stop="() => appendTreeNode(data)"
|
||||
/>
|
||||
<el-button
|
||||
|
|
@ -168,6 +168,7 @@
|
|||
icon="el-icon-delete"
|
||||
@click="removeTreeNode(scope.row)"
|
||||
v-hasPermi="['machinery:type:del']"
|
||||
style="color: #f56c6c;"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
|
|
@ -185,8 +186,8 @@
|
|||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<AddNode :visible.sync="addOpen" :parentNode="addParentNode" @refresh="refresh"/>
|
||||
<EditNode :visible.sync="editOpen" :parentNode="editParentNode" @refresh="refresh"/>
|
||||
<AddNode :visible.sync="addOpen" :parentNode="addParentNode" :showIsStateGrid="showIsStateGrid" @refresh="refresh"/>
|
||||
<EditNode :visible.sync="editOpen" :parentNode="editParentNode" :showIsStateGrid="showIsStateGrid" @refresh="refresh"/>
|
||||
<AddChildNode :visible.sync="addChildOpen" :parentNode="addChildNode"
|
||||
@refresh="refresh"
|
||||
/>
|
||||
|
|
@ -249,7 +250,8 @@ export default {
|
|||
]
|
||||
},
|
||||
addTitleVisible: false,
|
||||
addTitle: ''
|
||||
addTitle: '',
|
||||
showIsStateGrid: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -272,11 +274,21 @@ export default {
|
|||
},
|
||||
async getTreeData() {
|
||||
const response = await getMaTypeList()
|
||||
// 递归过滤掉 level == 7 的节点
|
||||
const filterTree = (nodes) => {
|
||||
return nodes
|
||||
.filter(node => node.level !== 7) // 过滤掉 level=7 的
|
||||
.map(node => ({
|
||||
...node,
|
||||
children: node.children ? filterTree(node.children) : []
|
||||
}))
|
||||
}
|
||||
|
||||
this.treeOptions = [
|
||||
{
|
||||
label: '机具类型',
|
||||
id: 0,
|
||||
children: response.data,
|
||||
children: filterTree(response.data),
|
||||
level: 0
|
||||
}
|
||||
]
|
||||
|
|
@ -305,7 +317,8 @@ export default {
|
|||
this.getList()
|
||||
},
|
||||
appendTreeNode(data) {
|
||||
if (data.level == 3) {
|
||||
this.showIsStateGrid = data.level == 4
|
||||
if (data.level == 6) {
|
||||
const path = this.getParentNames(this.treeOptions, data.id)
|
||||
data.major = path[1]
|
||||
data.mainProcedure = path[2]
|
||||
|
|
@ -318,8 +331,10 @@ export default {
|
|||
},
|
||||
|
||||
editTreeNode(data) {
|
||||
if (data.level == 4) {
|
||||
const path = this.getParentNames(this.treeOptions, data.id || data.typeId)
|
||||
console.log('🚀 ~ editTreeNode ~ data.level:', data)
|
||||
this.showIsStateGrid = data.level == 5
|
||||
if (data.level == 7) {
|
||||
const path = this.getParentNames(this.treeOptions, data.parentId)
|
||||
data.major = path[1]
|
||||
data.mainProcedure = path[2]
|
||||
this.editChildOpen = true
|
||||
|
|
@ -337,6 +352,7 @@ export default {
|
|||
.then(() => {
|
||||
this.$modal.msgSuccess('删除成功')
|
||||
this.getTreeData()
|
||||
this.getList()
|
||||
})
|
||||
.catch(() => {
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,427 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-if="dialogVisible"
|
||||
v-loading="isLoading"
|
||||
:visible.sync="dialogVisible"
|
||||
width="65%"
|
||||
:modal="false"
|
||||
class="dlg-box"
|
||||
>
|
||||
<div>
|
||||
<!-- 自定义title -->
|
||||
<i class="close-btn" @click="dialogVisible = false" />
|
||||
<div class="dlg-title">全量装备</div>
|
||||
|
||||
<!-- 表单 -->
|
||||
<el-form
|
||||
v-show="showSearch"
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
size="small"
|
||||
inline
|
||||
label-width="100px"
|
||||
@submit.native.prevent
|
||||
>
|
||||
<el-form-item label="装备范围" prop="equipRange">
|
||||
<el-select v-model="queryParams.equipRange" placeholder="请选择" clearable style="width: 240px">
|
||||
<el-option v-for="item in equipRangeList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="地市公司" prop="dsCompName">
|
||||
<el-select v-model="queryParams.dsCompName" placeholder="请选择" clearable style="width: 240px">
|
||||
<el-option v-for="item in dsCompNameList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="装备名称" prop="equipName">
|
||||
<el-input v-model="queryParams.equipName" placeholder="请输入" clearable style="width: 240px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="装备系列" prop="equipSeries">
|
||||
<el-select v-model="queryParams.equipSeries" placeholder="请选择" clearable style="width: 240px">
|
||||
<el-option v-for="item in equipSeriesList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="装备编号" prop="equipCode">
|
||||
<el-input v-model="queryParams.equipCode" placeholder="请输入" clearable style="width: 240px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="装备状态" prop="equipStatus">
|
||||
<el-select v-model="queryParams.equipStatus" placeholder="请选择" clearable style="width: 240px">
|
||||
<el-option v-for="item in equipStatusList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="所在项目" prop="projectName">
|
||||
<el-select v-model="queryParams.projectName" placeholder="请选择" clearable style="width: 240px">
|
||||
<el-option v-for="item in projectNameList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 日期范围 -->
|
||||
<el-form-item label="采购日期" prop="purchaseDate">
|
||||
<el-date-picker
|
||||
v-model="queryParams.purchaseDate"
|
||||
type="date"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="出厂日期" prop="factoryDate">
|
||||
<el-date-picker
|
||||
v-model="queryParams.factoryDate"
|
||||
type="date"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="使用年限" prop="usefulLife">
|
||||
<el-select v-model="queryParams.usefulLife" placeholder="请选择" clearable style="width: 240px">
|
||||
<el-option v-for="item in usefulLifeList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="产权单位" prop="propertyUnit">
|
||||
<el-select v-model="queryParams.propertyUnit" placeholder="请选择" clearable style="width: 240px">
|
||||
<el-option v-for="item in propertyUnitList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="生产厂家" prop="manufacturer">
|
||||
<el-select v-model="queryParams.manufacturer" placeholder="请选择" clearable style="width: 240px">
|
||||
<el-option v-for="item in manufacturerList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="资产原值" prop="assetValue">
|
||||
<el-input v-model="queryParams.assetValue" placeholder="请输入" clearable style="width: 240px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="下次检测日期" prop="nextCheckDate">
|
||||
<el-date-picker
|
||||
v-model="queryParams.nextCheckDate"
|
||||
type="date"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="特征项" prop="featureItem">
|
||||
<el-input v-model="queryParams.featureItem" placeholder="请输入" clearable style="width: 240px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="特征值" prop="featureValue">
|
||||
<el-select v-model="queryParams.featureValue" placeholder="请选择" clearable style="width: 240px">
|
||||
<el-option v-for="item in featureValueList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 表单按钮 -->
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="handleReset" class="btn">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button class="btn" plain icon="el-icon-download" size="mini" @click="handleExport">导出数据</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="isLoading"
|
||||
:data="tableList"
|
||||
stripe
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
:max-height="650"
|
||||
class="table-container"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
width="55"
|
||||
label="序号"
|
||||
align="center"
|
||||
:index="(index) => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
|
||||
/>
|
||||
<el-table-column
|
||||
v-for="(column, index) in tableColumns"
|
||||
show-overflow-tooltip
|
||||
:key="index"
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<!-- 操作 -->
|
||||
<el-table-column label="操作" align="center" width="130">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button type="text" size="mini" @click="" style="color: #409eff">查看详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="88"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
dialogVisible: false,
|
||||
showSearch: true,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
equipRange: '', // 装备范围
|
||||
dsCompName: '', // 地市公司
|
||||
equipName: '', // 装备名称
|
||||
equipSeries: '', // 装备系列
|
||||
equipCode: '', // 装备编号
|
||||
equipStatus: '', // 装备状态
|
||||
projectName: '', // 所在项目
|
||||
purchaseDate: '', // 采购日期
|
||||
factoryDate: '', // 出厂日期
|
||||
usefulLife: '', // 使用年限
|
||||
propertyUnit: '', // 产权单位
|
||||
manufacturer: '', // 生产厂家
|
||||
assetValue: '', // 资产原值
|
||||
nextCheckDate: '', // 下次检测日期
|
||||
featureItem: '', // 特征项
|
||||
featureValue: '', // 特征值
|
||||
},
|
||||
equipRangeList: [
|
||||
{ label: '全网省', value: 1 },
|
||||
{ label: '合肥市', value: 2 },
|
||||
],
|
||||
dsCompNameList: [
|
||||
{ label: '全网省', value: 1 },
|
||||
{ label: '合肥市', value: 2 },
|
||||
],
|
||||
equipSeriesList: [
|
||||
{ label: '全网省', value: 1 },
|
||||
{ label: '合肥市', value: 2 },
|
||||
],
|
||||
equipStatusList: [
|
||||
{ label: '在库', value: 1 },
|
||||
{ label: '在用', value: 2 },
|
||||
],
|
||||
projectNameList: [
|
||||
{ label: '全网省', value: 1 },
|
||||
{ label: '合肥市', value: 2 },
|
||||
],
|
||||
usefulLifeList: [
|
||||
{ label: '5年', value: 1 },
|
||||
{ label: '10年', value: 2 },
|
||||
],
|
||||
propertyUnitList: [
|
||||
{ label: '单位1', value: 1 },
|
||||
{ label: '单位2', value: 2 },
|
||||
],
|
||||
manufacturerList: [
|
||||
{ label: '单位1', value: 1 },
|
||||
{ label: '单位2', value: 2 },
|
||||
],
|
||||
assetValueList: [
|
||||
{ label: '原值1', value: 1 },
|
||||
{ label: '原值2', value: 2 },
|
||||
],
|
||||
featureValueList: [
|
||||
{ label: '特征1', value: 1 },
|
||||
{ label: '特征2', value: 2 },
|
||||
],
|
||||
|
||||
tableColumns: [
|
||||
{ label: '公司名称', prop: 'compName' },
|
||||
{ label: '工程专业', prop: 'proFee' },
|
||||
{ label: '施工主工序', prop: 'process' },
|
||||
{ label: '装备名称', prop: 'equipName' },
|
||||
{ label: '装备型号', prop: 'equipType' },
|
||||
{ label: '装备编号', prop: 'equipCode' },
|
||||
{ label: '计量单位', prop: 'unitName' },
|
||||
{ label: '产权单位', prop: 'propertyUnit' },
|
||||
{ label: '资产原值（元）', prop: 'unitPrice' },
|
||||
{ label: '采购日期', prop: 'purchaseDate' },
|
||||
],
|
||||
tableList: [
|
||||
// { id: 1, equipName: '测试1', equipType: '测试1', equipCode: '测试1' },
|
||||
// { id: 2, equipName: '测试1', equipType: '测试1', equipCode: '测试1' },
|
||||
// { id: 3, equipName: '测试1', equipType: '测试1', equipCode: '测试1' },
|
||||
// { id: 4, equipName: '测试1', equipType: '测试1', equipCode: '测试1' },
|
||||
// { id: 5, equipName: '测试1', equipType: '测试1', equipCode: '测试1' },
|
||||
// { id: 6, equipName: '测试1', equipType: '测试1', equipCode: '测试1' },
|
||||
// { id: 7, equipName: '测试1', equipType: '测试1', equipCode: '测试1' },
|
||||
// { id: 8, equipName: '测试1', equipType: '测试1', equipCode: '测试1' },
|
||||
// { id: 9, equipName: '测试1', equipType: '测试1', equipCode: '测试1' },
|
||||
// { id: 10, equipName: '测试1', equipType: '测试1', equipCode: '测试1' },
|
||||
],
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.dialogVisible = true
|
||||
},
|
||||
getList() {},
|
||||
// 查询
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
// 重置
|
||||
handleReset() {
|
||||
this.$refs.queryForm.resetFields()
|
||||
this.queryParams.pageNum = 1
|
||||
this.queryParams.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
// 导出数据
|
||||
handleExport() {
|
||||
// 提示
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '导出功能开发中，敬请期待！',
|
||||
})
|
||||
try {
|
||||
let fileName = `导出_${formatTime(new Date())}.xLsx`
|
||||
let url = '/material/backstage/costPush/exportPushCheck'
|
||||
const params = { ...this.queryParams }
|
||||
console.log('🚀 ~ 导出 ~ params:', params)
|
||||
// this.derive(url, params, fileName)
|
||||
// this.download(url, params, fileName)
|
||||
} catch (error) {
|
||||
console.log('导出数据失败', error)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-dialog {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog .el-dialog__body {
|
||||
background-image: url('../../img/all-dialog.png');
|
||||
background-size: 100% auto;
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
// 输入框
|
||||
::v-deep .el-input__inner {
|
||||
background: rgba(3, 16, 44, 0.5) !important;
|
||||
}
|
||||
::v-deep .el-button--primary {
|
||||
background: #3165d6;
|
||||
border-color: #3165d6;
|
||||
}
|
||||
::v-deep .el-button--mini.is-circle {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
color: #fff;
|
||||
}
|
||||
// 表格 - 单元格
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
color: #fff;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
// 表格 - 每一行
|
||||
::v-deep .el-table tr {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
// 表头
|
||||
::v-deep .el-table thead tr {
|
||||
background: url('../../img/all-table-tr.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
// 点击后背景色
|
||||
::v-deep .el-table__body tr.current-row > td.el-table__cell,
|
||||
.el-table__body tr.selection-row > td.el-table__cell {
|
||||
background: #10264a;
|
||||
}
|
||||
// 鼠标移入
|
||||
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: rgba(16, 37, 81, 0.9);
|
||||
}
|
||||
// stripe - 斑马线
|
||||
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
|
||||
background-color: #0d214580;
|
||||
}
|
||||
// 分页背景
|
||||
::v-deep .pagination-container {
|
||||
background-color: transparent;
|
||||
}
|
||||
// 分页-按钮-选中
|
||||
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background-color: #3165d6;
|
||||
}
|
||||
// 分页-按钮-未选中
|
||||
::v-deep .el-pagination.is-background .el-pager li {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 分页-上一页
|
||||
::v-deep .el-pagination.is-background .btn-prev {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 分页-下一页
|
||||
::v-deep .el-pagination.is-background .btn-next {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
|
||||
// --
|
||||
.btn {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
color: #fff;
|
||||
border: none;
|
||||
// 选中颜色
|
||||
&:hover {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 点击颜色
|
||||
&:active {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
}
|
||||
.table-container {
|
||||
color: #fff;
|
||||
background-color: #04112a80;
|
||||
//#071934
|
||||
/* background: url('../../img/tableTr.png') no-repeat center center;
|
||||
background-size: 100% 100%; */
|
||||
}
|
||||
.dlg-box {
|
||||
position: absolute;
|
||||
.close-btn {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
background-image: url('../../img/close.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.dlg-title {
|
||||
margin-top: -25px;
|
||||
margin-bottom: 45px;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,265 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-if="dialogVisible"
|
||||
v-loading="isLoading"
|
||||
:visible.sync="dialogVisible"
|
||||
width="65%"
|
||||
:modal="false"
|
||||
class="dlg-box"
|
||||
>
|
||||
<div>
|
||||
<!-- 自定义title -->
|
||||
<i class="close-btn" @click="dialogVisible = false" />
|
||||
<div class="dlg-title">全量装备</div>
|
||||
|
||||
<!-- 表单 -->
|
||||
<el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent>
|
||||
<el-form-item label="施工装备" prop="equip">
|
||||
<el-select v-model="queryParams.equip" placeholder="请选择" clearable style="width: 240px">
|
||||
<el-option v-for="item in equipList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 240px">
|
||||
<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 表单按钮 -->
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="handleReset" class="btn">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="isLoading"
|
||||
:data="tableList"
|
||||
stripe
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
:max-height="650"
|
||||
class="table-container"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
width="55"
|
||||
label="序号"
|
||||
align="center"
|
||||
:index="(index) => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
|
||||
/>
|
||||
<el-table-column
|
||||
v-for="(column, index) in tableColumns"
|
||||
show-overflow-tooltip
|
||||
:key="index"
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="88"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
dialogVisible: false,
|
||||
showSearch: true,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
equip: '', // 施工装备
|
||||
status: '', // 状态
|
||||
},
|
||||
equipList: [
|
||||
{ label: '全网省', value: 1 },
|
||||
{ label: '合肥市', value: 2 },
|
||||
],
|
||||
statusList: [
|
||||
{ label: '全网省', value: 1 },
|
||||
{ label: '合肥市', value: 2 },
|
||||
],
|
||||
|
||||
tableColumns: [
|
||||
{ label: '施工装备', prop: 'equip' },
|
||||
{ label: '型号', prop: 'equipType' },
|
||||
{ label: '数量', prop: 'equipNum' },
|
||||
{ label: '设备编码', prop: 'equipCode' },
|
||||
{ label: '特征项1', prop: 'feature1' },
|
||||
{ label: '特征值1', prop: 'featureValue1' },
|
||||
{ label: '特征项1', prop: 'feature1' },
|
||||
{ label: '特征值2', prop: 'featureValue2' },
|
||||
{ label: '特征项2', prop: 'feature2' },
|
||||
{ label: '特征值3', prop: 'featureValue3' },
|
||||
{ label: '特征项4', prop: 'feature4' },
|
||||
{ label: '特征值4', prop: 'featureValue4' },
|
||||
{ label: '特征项5', prop: 'feature5' },
|
||||
{ label: '特征值5', prop: 'featureValue5' },
|
||||
{ label: '特征项6', prop: 'feature6' },
|
||||
{ label: '特征值6', prop: 'featureValue6' },
|
||||
{ label: '产权单位', prop: 'propertyUnit' },
|
||||
{ label: '资产原值（元）', prop: 'unitPrice' },
|
||||
{ label: '出厂日期', prop: 'productionDate' },
|
||||
{ label: '所在项目', prop: 'usefulLife' },
|
||||
{ label: 'vlook的状态', prop: 'vlookStatus' },
|
||||
{ label: '状态', prop: 'status' },
|
||||
{ label: '下次检验日期', prop: 'nextCheckDate' },
|
||||
{ label: '生产厂家', prop: 'manufacturer' },
|
||||
],
|
||||
tableList: [],
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.dialogVisible = true
|
||||
},
|
||||
getList() {},
|
||||
// 查询
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
// 重置
|
||||
handleReset() {
|
||||
this.$refs.queryForm.resetFields()
|
||||
this.queryParams.pageNum = 1
|
||||
this.queryParams.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-dialog {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog .el-dialog__body {
|
||||
background-image: url('../../img/all-dialog.png');
|
||||
background-size: 100% auto;
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
// 输入框
|
||||
::v-deep .el-input__inner {
|
||||
background: rgba(3, 16, 44, 0.5) !important;
|
||||
}
|
||||
::v-deep .el-button--primary {
|
||||
background: #3165d6;
|
||||
border-color: #3165d6;
|
||||
}
|
||||
::v-deep .el-button--mini.is-circle {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
color: #fff;
|
||||
}
|
||||
// 表格 - 单元格
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
color: #fff;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
// 表格 - 每一行
|
||||
::v-deep .el-table tr {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
// 表头
|
||||
::v-deep .el-table thead tr {
|
||||
background: url('../../img/all-table-tr.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
// 点击后背景色
|
||||
::v-deep .el-table__body tr.current-row > td.el-table__cell,
|
||||
.el-table__body tr.selection-row > td.el-table__cell {
|
||||
background: #10264a;
|
||||
}
|
||||
// 鼠标移入
|
||||
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: rgba(16, 37, 81, 0.9);
|
||||
}
|
||||
// stripe - 斑马线
|
||||
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
|
||||
background-color: #0d214580;
|
||||
}
|
||||
// 分页背景
|
||||
::v-deep .pagination-container {
|
||||
background-color: transparent;
|
||||
}
|
||||
// 分页-按钮-选中
|
||||
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background-color: #3165d6;
|
||||
}
|
||||
// 分页-按钮-未选中
|
||||
::v-deep .el-pagination.is-background .el-pager li {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 分页-上一页
|
||||
::v-deep .el-pagination.is-background .btn-prev {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 分页-下一页
|
||||
::v-deep .el-pagination.is-background .btn-next {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
|
||||
// --
|
||||
.btn {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
color: #fff;
|
||||
border: none;
|
||||
// 选中颜色
|
||||
&:hover {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 点击颜色
|
||||
&:active {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
}
|
||||
.table-container {
|
||||
color: #fff;
|
||||
background-color: #04112a80;
|
||||
}
|
||||
.dlg-box {
|
||||
position: absolute;
|
||||
.close-btn {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
background-image: url('../../img/close.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.dlg-title {
|
||||
margin-top: -25px;
|
||||
margin-bottom: 45px;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,207 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-if="dialogVisible"
|
||||
v-loading="isLoading"
|
||||
:visible.sync="dialogVisible"
|
||||
width="45%"
|
||||
:modal="false"
|
||||
class="dlg-box"
|
||||
>
|
||||
<div>
|
||||
<!-- 自定义title -->
|
||||
<i class="close-btn" @click="dialogVisible = false" />
|
||||
<div class="dlg-title">单位装备配置</div>
|
||||
|
||||
<el-table
|
||||
v-loading="isLoading"
|
||||
:data="tableList"
|
||||
stripe
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
:max-height="650"
|
||||
class="table-container"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
width="55"
|
||||
label="序号"
|
||||
align="center"
|
||||
:index="(index) => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
|
||||
/>
|
||||
<el-table-column
|
||||
v-for="(column, index) in tableColumns"
|
||||
show-overflow-tooltip
|
||||
:key="index"
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<!-- <pagination
|
||||
v-show="true"
|
||||
:total="88"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/> -->
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
dialogVisible: false,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
tableColumns: [
|
||||
{ label: '单位名称', prop: 'unitName' },
|
||||
{ label: '装备价值（亿元）', prop: 'equipPrice' },
|
||||
{ label: '装备数量', prop: 'equipNum' },
|
||||
{ label: '线路数量（台）', prop: 'lineNum' },
|
||||
{ label: '变电数量（台）', prop: 'subStationNum' },
|
||||
{ label: '电缆数量（台）', prop: 'cableNum' },
|
||||
{ label: '配置率', prop: 'configRate' },
|
||||
{ label: '线路配置率', prop: 'lineConfigRate' },
|
||||
{ label: '变电配置率', prop: 'subStationConfigRate' },
|
||||
{ label: '电缆配置率', prop: 'cableConfigRate' },
|
||||
],
|
||||
tableList: [],
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.dialogVisible = true
|
||||
},
|
||||
getList() {},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-dialog {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog .el-dialog__body {
|
||||
background-image: url('../../img/unit-config-dialog.png');
|
||||
// 以宽度为准
|
||||
background-size: 100% auto;
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
// 输入框
|
||||
::v-deep .el-input__inner {
|
||||
background: rgba(3, 16, 44, 0.5) !important;
|
||||
}
|
||||
::v-deep .el-button--primary {
|
||||
background: #3165d6;
|
||||
border-color: #3165d6;
|
||||
}
|
||||
::v-deep .el-button--mini.is-circle {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
color: #fff;
|
||||
}
|
||||
// 表格 - 单元格
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
color: #fff;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
// 表格 - 每一行
|
||||
::v-deep .el-table tr {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
// 表头
|
||||
::v-deep .el-table thead tr {
|
||||
background: url('../../img/all-table-tr.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
// 点击后背景色
|
||||
::v-deep .el-table__body tr.current-row > td.el-table__cell,
|
||||
.el-table__body tr.selection-row > td.el-table__cell {
|
||||
background: #10264a;
|
||||
}
|
||||
// 鼠标移入
|
||||
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: rgba(16, 37, 81, 0.9);
|
||||
}
|
||||
// stripe - 斑马线
|
||||
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
|
||||
background-color: #0d214580;
|
||||
}
|
||||
// 分页背景
|
||||
::v-deep .pagination-container {
|
||||
background-color: transparent;
|
||||
}
|
||||
// 分页-按钮-选中
|
||||
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background-color: #3165d6;
|
||||
}
|
||||
// 分页-按钮-未选中
|
||||
::v-deep .el-pagination.is-background .el-pager li {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 分页-上一页
|
||||
::v-deep .el-pagination.is-background .btn-prev {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 分页-下一页
|
||||
::v-deep .el-pagination.is-background .btn-next {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
|
||||
// --
|
||||
.btn {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
color: #fff;
|
||||
border: none;
|
||||
// 选中颜色
|
||||
&:hover {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 点击颜色
|
||||
&:active {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
}
|
||||
.table-container {
|
||||
color: #fff;
|
||||
background-color: #04112a80;
|
||||
//#071934
|
||||
/* background: url('../../img/tableTr.png') no-repeat center center;
|
||||
background-size: 100% 100%; */
|
||||
}
|
||||
.dlg-box {
|
||||
position: absolute;
|
||||
.close-btn {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
background-image: url('../../img/close.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.dlg-title {
|
||||
margin-top: -25px;
|
||||
margin-bottom: 45px;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="top-box">
|
||||
<div class="title-tip">
|
||||
<div>装备总览</div>
|
||||
<div class="more">更多 ></div>
|
||||
<div class="more" @click="handleEquipOverview">更多 ></div>
|
||||
</div>
|
||||
<div class="equip-box">
|
||||
<div class="equip-item-1">装备总数</div>
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
<div class="bottom-left">
|
||||
<div class="title-tip">
|
||||
<div class="tip-title">单位装备配置</div>
|
||||
<div class="more">更多 ></div>
|
||||
<div class="more" @click="openEquipConfig">更多 ></div>
|
||||
</div>
|
||||
<div class="bottom-list">
|
||||
<UnitEquipmentConfig />
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
<div class="bottom-right">
|
||||
<div class="title-tip">
|
||||
<div class="tip-title">装备状态</div>
|
||||
<div class="more">更多 ></div>
|
||||
<div class="more" @click="openStatusMore">更多 ></div>
|
||||
</div>
|
||||
<div class="equip-status">
|
||||
<EquipStatus />
|
||||
|
|
@ -62,6 +62,13 @@
|
|||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 全量装备 -->
|
||||
<AllEquip ref="allEquip" />
|
||||
<!-- 单位装备配置 -->
|
||||
<UnitEquipConfig ref="unitEquipConfig" />
|
||||
<!-- 装备状态 -->
|
||||
<EquipStatusMore ref="equipStatusMore" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -69,10 +76,13 @@
|
|||
import EquipItem from './EquipItem.vue'
|
||||
import UnitEquipmentConfig from './UnitEquipmentConfig.vue'
|
||||
import EquipStatus from './EquipStatus.vue'
|
||||
import AllEquip from './AllEquip.vue'
|
||||
import UnitEquipConfig from './UnitEquipConfig.vue'
|
||||
import EquipStatusMore from './EquipStatusMore.vue'
|
||||
import { getTotalEquipmentApi, getEquipmentClassificationApi } from '@/api/wsScreen'
|
||||
|
||||
export default {
|
||||
components: { EquipItem, UnitEquipmentConfig, EquipStatus },
|
||||
components: { EquipItem, UnitEquipmentConfig, EquipStatus, AllEquip, UnitEquipConfig, EquipStatusMore },
|
||||
data() {
|
||||
return {
|
||||
// 装备总览
|
||||
|
|
@ -132,6 +142,15 @@ export default {
|
|||
console.log('🚀 ~ getEquipList ~ error:', error)
|
||||
}
|
||||
},
|
||||
handleEquipOverview() {
|
||||
this.$refs.allEquip.openDialog()
|
||||
},
|
||||
openEquipConfig() {
|
||||
this.$refs.unitEquipConfig.openDialog()
|
||||
},
|
||||
openStatusMore() {
|
||||
this.$refs.equipStatusMore.openDialog()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div>
|
||||
<div class="title-tip">
|
||||
<div>装备在用率统计</div>
|
||||
<div class="more">更多 ></div>
|
||||
<div class="more" @click="openDialog">更多 ></div>
|
||||
</div>
|
||||
<div style="width: 25%; height: 100%; display: flex; align-items: center; justify-content: space-between">
|
||||
<div :class="tabIndex == 0 ? 'topTab1 fs-24 active1' : 'topTab1 fs-24'" @click="changTab(0)">总体</div>
|
||||
|
|
@ -22,13 +22,18 @@
|
|||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 更多 -->
|
||||
<EquipUsageRateMore ref="equipUsageRateMore" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUsageStatisticsApi } from '@/api/wsScreen'
|
||||
import EquipUsageRateMore from './EquipUsageRateMore'
|
||||
|
||||
export default {
|
||||
components: { EquipUsageRateMore },
|
||||
data() {
|
||||
return {
|
||||
tabIndex: 0,
|
||||
|
|
@ -46,7 +51,7 @@ export default {
|
|||
},
|
||||
async getInfo() {
|
||||
try {
|
||||
const res = await getUsageStatisticsApi({ type: this.tabIndex})
|
||||
const res = await getUsageStatisticsApi({ type: this.tabIndex })
|
||||
if (!res.data) return
|
||||
if (res.data.length > 5) {
|
||||
this.tableList = res.data.slice(0, 5)
|
||||
|
|
@ -58,6 +63,10 @@ export default {
|
|||
console.log('🚀 ~ 装备在用率统计 ~ error:', error)
|
||||
}
|
||||
},
|
||||
openDialog() {
|
||||
console.log('🚀 ~ openDialog ~ openDialog:')
|
||||
this.$refs.equipUsageRateMore.openDialog()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,209 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-if="dialogVisible"
|
||||
v-loading="isLoading"
|
||||
:visible.sync="dialogVisible"
|
||||
width="40%"
|
||||
:modal="false"
|
||||
class="dlg-box"
|
||||
>
|
||||
<div>
|
||||
<!-- 自定义title -->
|
||||
<i class="close-btn" @click="dialogVisible = false" />
|
||||
<div class="dlg-title">装备在用率统计</div>
|
||||
|
||||
<el-table
|
||||
v-loading="isLoading"
|
||||
:data="tableList"
|
||||
stripe
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
:max-height="650"
|
||||
class="table-container"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
width="55"
|
||||
label="序号"
|
||||
align="center"
|
||||
:index="(index) => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
|
||||
/>
|
||||
<el-table-column
|
||||
v-for="(column, index) in tableColumns"
|
||||
show-overflow-tooltip
|
||||
:key="index"
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="88"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
dialogVisible: false,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
|
||||
tableColumns: [
|
||||
{ label: '装备名称', prop: 'equipName' },
|
||||
{ label: '在用率', prop: 'usageRate' },
|
||||
{ label: '周转率', prop: 'turnoverRate' },
|
||||
],
|
||||
tableList: [],
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.dialogVisible = true
|
||||
},
|
||||
getList() {},
|
||||
// 查询
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
// 重置
|
||||
handleReset() {
|
||||
this.$refs.queryForm.resetFields()
|
||||
this.queryParams.pageNum = 1
|
||||
this.queryParams.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-dialog {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog .el-dialog__body {
|
||||
background-image: url('../../img/right-dialog.png');
|
||||
background-size: 100% auto;
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
// 输入框
|
||||
::v-deep .el-input__inner {
|
||||
background: rgba(3, 16, 44, 0.5) !important;
|
||||
}
|
||||
::v-deep .el-button--primary {
|
||||
background: #3165d6;
|
||||
border-color: #3165d6;
|
||||
}
|
||||
::v-deep .el-button--mini.is-circle {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
color: #fff;
|
||||
}
|
||||
// 表格 - 单元格
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
color: #fff;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
// 表格 - 每一行
|
||||
::v-deep .el-table tr {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
// 表头
|
||||
::v-deep .el-table thead tr {
|
||||
background: url('../../img/all-table-tr.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
// 点击后背景色
|
||||
::v-deep .el-table__body tr.current-row > td.el-table__cell,
|
||||
.el-table__body tr.selection-row > td.el-table__cell {
|
||||
background: #10264a;
|
||||
}
|
||||
// 鼠标移入
|
||||
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: rgba(16, 37, 81, 0.9);
|
||||
}
|
||||
// stripe - 斑马线
|
||||
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
|
||||
background-color: #0d214580;
|
||||
}
|
||||
// 分页背景
|
||||
::v-deep .pagination-container {
|
||||
background-color: transparent;
|
||||
}
|
||||
// 分页-按钮-选中
|
||||
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background-color: #3165d6;
|
||||
}
|
||||
// 分页-按钮-未选中
|
||||
::v-deep .el-pagination.is-background .el-pager li {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 分页-上一页
|
||||
::v-deep .el-pagination.is-background .btn-prev {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 分页-下一页
|
||||
::v-deep .el-pagination.is-background .btn-next {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
|
||||
// --
|
||||
.btn {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
color: #fff;
|
||||
border: none;
|
||||
// 选中颜色
|
||||
&:hover {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 点击颜色
|
||||
&:active {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
}
|
||||
.table-container {
|
||||
color: #fff;
|
||||
background-color: #04112a80;
|
||||
}
|
||||
.dlg-box {
|
||||
position: absolute;
|
||||
.close-btn {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
background-image: url('../../img/close.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.dlg-title {
|
||||
margin-top: -25px;
|
||||
margin-bottom: 45px;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 399 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 689 B |
Binary file not shown.
|
After Width: | Height: | Size: 290 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 272 KiB |
Loading…
Reference in New Issue