This commit is contained in:
parent
0753e59306
commit
914ece3f22
Binary file not shown.
|
After Width: | Height: | Size: 740 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 450 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 443 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 328 B |
|
|
@ -0,0 +1,516 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-loading="isLoading"
|
||||
:visible.sync="dialogVisible"
|
||||
width="85%"
|
||||
: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="110px"
|
||||
@submit.native.prevent
|
||||
>
|
||||
<el-form-item label="装备范围" prop="deptName">
|
||||
<el-select
|
||||
v-model="queryParams.deptName"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
:popper-append-to-body="false"
|
||||
style="width: 240px"
|
||||
@change="changeDept"
|
||||
>
|
||||
<el-option v-for="item in deptNameList" :key="item.area_code" :label="item.name" :value="item.area_code" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="产权单位" prop="propertyUnit">
|
||||
<el-select
|
||||
v-model="queryParams.propertyUnit"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
:popper-append-to-body="false"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in companyNameList"
|
||||
:key="item.deptId"
|
||||
:label="item.deptName"
|
||||
:value="item.deptId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="专业" prop="major">
|
||||
<el-select
|
||||
v-model="queryParams.major"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
:popper-append-to-body="false"
|
||||
style="width: 240px"
|
||||
@change="changeProType"
|
||||
>
|
||||
<el-option v-for="item in proTypeList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="装备类目" prop="deviceSeries">
|
||||
<el-cascader
|
||||
popper-class="my-cas"
|
||||
v-model="deviceSeries"
|
||||
:options="deviceSeriesList"
|
||||
clearable
|
||||
@change="changeDeviceSeries"
|
||||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="装备名称" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入" clearable style="width: 240px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格型号" prop="specificationModel">
|
||||
<el-input v-model="queryParams.specificationModel" placeholder="请输入" clearable style="width: 240px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="装备编号" prop="code">
|
||||
<el-input v-model="queryParams.code" placeholder="请输入" clearable style="width: 240px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="装备原始编码" prop="originalCode">
|
||||
<el-input v-model="queryParams.originalCode" placeholder="请输入" clearable style="width: 240px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="装备状态" prop="changeStatus">
|
||||
<el-select
|
||||
v-model="queryParams.changeStatus"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
:popper-append-to-body="false"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option v-for="item in changeStatusList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="所在项目" prop="onProject">
|
||||
<el-select
|
||||
v-model="queryParams.onProject"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
:popper-append-to-body="false"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in onProjectList"
|
||||
:key="item.proCode"
|
||||
:label="item.usingProject"
|
||||
:value="item.proCode"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="装备厂家" prop="brand">
|
||||
<el-input v-model="queryParams.brand" placeholder="请输入" clearable style="width: 240px" />
|
||||
<!-- <el-select v-model="queryParams.brand" placeholder="请选择" clearable style="width: 240px">
|
||||
<el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select> -->
|
||||
</el-form-item>
|
||||
<el-form-item label="出厂日期" prop="productionDate">
|
||||
<el-date-picker
|
||||
popper-class="my-date"
|
||||
v-model="queryParams.productionDate"
|
||||
type="date"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="使用年限" prop="maxServiceLifeYears">
|
||||
<el-select
|
||||
v-model="queryParams.maxServiceLifeYears"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
:popper-append-to-body="false"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option v-for="item in workingHoursList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="资产原值(万元)" prop="originalValue">
|
||||
<el-input v-model="queryParams.originalValue" placeholder="请输入" clearable style="width: 240px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="下次检测日期" prop="nextMaintenanceDate">
|
||||
<el-date-picker
|
||||
popper-class="my-date"
|
||||
v-model="queryParams.nextMaintenanceDate"
|
||||
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-input v-model="queryParams.featureValue" placeholder="请输入" clearable style="width: 240px" />
|
||||
<!-- <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 icon="el-icon-refresh" @click="handleReset" class="btn">重置</el-button>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</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%"
|
||||
height="546"
|
||||
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"
|
||||
>
|
||||
<template v-slot="{ row }" v-if="column.prop === 'featureItem'">
|
||||
<span>{{ getFeatureItem(row.propertyVoList) }}</span>
|
||||
</template>
|
||||
<template v-slot="{ row }" v-else-if="column.prop === 'featureValue'">
|
||||
<span>{{ getFeatureValue(row.propertyVoList) }}</span>
|
||||
</template>
|
||||
</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
|
||||
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDeviceListAPI } from '@/api/EquipmentLedger'
|
||||
import { getAddressApi, getDeptApi, getMaTypeApi, getFirstLevelApi, getProListApi } from '@/api/wsScreen'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
dialogVisible: false,
|
||||
showSearch: true,
|
||||
deviceSeries: [],
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
deptName: '', // 装备范围
|
||||
propertyUnit: '', // 地市公司
|
||||
name: '', // 装备名称
|
||||
deviceSeries: '', // 装备系列
|
||||
code: '', // 装备编号
|
||||
changeStatus: '', // 装备状态
|
||||
onProject: '', // 所在项目
|
||||
purchaseDate: '', // 采购日期
|
||||
productionDate: '', // 出厂日期
|
||||
maxServiceLifeYears: '', // 使用年限
|
||||
propertyUnit: '', // 产权单位
|
||||
brand: '', // 生产厂家
|
||||
originalValue: '', // 资产原值
|
||||
nextMaintenanceDate: '', // 下次检测日期
|
||||
featureItem: '', // 特征项
|
||||
featureValue: '', // 特征值
|
||||
},
|
||||
deptNameList: [],
|
||||
companyNameList: [],
|
||||
deviceSeriesList: [],
|
||||
changeStatusList: [
|
||||
{ label: '在库', value: 1 },
|
||||
{ label: '自用', value: 2 },
|
||||
{ label: '共享', value: 3 },
|
||||
{ label: '退役', value: 4 },
|
||||
{ label: '维修', value: 5 },
|
||||
],
|
||||
proTypeList: [],
|
||||
onProjectList: [],
|
||||
workingHoursList: [
|
||||
{ label: '5年', value: 1 },
|
||||
{ label: '5-10年', value: 2 },
|
||||
{ label: '10年以上', value: 3 },
|
||||
],
|
||||
companyNameList: [
|
||||
{ label: '单位1', value: 1 },
|
||||
{ label: '单位2', value: 2 },
|
||||
],
|
||||
brandList: [
|
||||
{ label: '单位1', value: 1 },
|
||||
{ label: '单位2', value: 2 },
|
||||
],
|
||||
buyPriceList: [
|
||||
{ label: '原值1', value: 1 },
|
||||
{ label: '原值2', value: 2 },
|
||||
],
|
||||
featureValueList: [
|
||||
{ label: '特征1', value: 1 },
|
||||
{ label: '特征2', value: 2 },
|
||||
],
|
||||
|
||||
tableColumns: [
|
||||
{ label: '公司名称', prop: 'propertyUnit' },
|
||||
{ label: '产权单位', prop: 'propertyUnit' },
|
||||
{ label: '专业', prop: 'major' },
|
||||
{ label: '主工序', prop: 'mainProcess' },
|
||||
{ label: '子工序', prop: 'subProcess' },
|
||||
{ label: '装备大类', prop: 'mainCategory' },
|
||||
{ label: '装备小类', prop: 'subCategory' },
|
||||
{ label: '类型分支', prop: 'branch' },
|
||||
{ label: '装备名称', prop: 'name' },
|
||||
{ label: '规格型号', prop: 'specificationModel' },
|
||||
{ label: '装备编号', prop: 'code' },
|
||||
{ label: '计量单位', prop: 'unit' },
|
||||
{ label: '所在项目', prop: 'usingProject' },
|
||||
{ label: '使用到期时间', prop: 'expirationTime' },
|
||||
{ label: '装备原始编码', prop: 'originalCode' },
|
||||
{ label: '出厂日期', prop: 'productionDate' },
|
||||
{ label: '生产厂家', prop: 'manufacturer' },
|
||||
{ label: '资产原值', prop: 'originalValue' },
|
||||
{ label: '下次维保日期', prop: 'nextMaintenanceDate' },
|
||||
{ label: '最大使用年限 (年)', prop: 'maxServiceLifeYears' },
|
||||
{ label: '特征项', prop: 'featureItem' },
|
||||
{ label: '特征值', prop: 'featureValue' },
|
||||
],
|
||||
tableList: [],
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.dialogVisible = true
|
||||
this.getList()
|
||||
this.getDeptNameList()
|
||||
this.getProTypeList()
|
||||
this.getOnProjectList()
|
||||
},
|
||||
async getList() {
|
||||
try {
|
||||
const res = await getDeviceListAPI(this.queryParams)
|
||||
console.log('🚀 ~ getList ~ res:', res)
|
||||
this.tableList = res.data?.rows || []
|
||||
this.total = res.data?.total || 0
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ getList ~ error:', error)
|
||||
}
|
||||
},
|
||||
// 查询
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
// 重置
|
||||
handleReset() {
|
||||
this.$refs.queryForm.resetFields()
|
||||
this.queryParams.pageNum = 1
|
||||
this.queryParams.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
// 拼接特征项
|
||||
getFeatureItem(item) {
|
||||
if (!item || item.length == 0) return ''
|
||||
return item.map((item) => item.propertyName).join(',')
|
||||
},
|
||||
// 拼接特征值
|
||||
getFeatureValue(item) {
|
||||
if (!item || item.length == 0) return ''
|
||||
return item.map((item) => item.propertyValue).join(',')
|
||||
},
|
||||
// 装备范围
|
||||
async getDeptNameList() {
|
||||
try {
|
||||
const res = await getAddressApi()
|
||||
console.log('🚀 ~ getDeptNameList ~ res:', res)
|
||||
this.deptNameList = res.data || []
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ getDeptNameList ~ error:', error)
|
||||
}
|
||||
},
|
||||
// 转换为树结构
|
||||
convertToSubTree(list) {
|
||||
const map = {}
|
||||
const tree = []
|
||||
|
||||
// 构建节点映射
|
||||
list.forEach((item) => {
|
||||
map[item.value] = {
|
||||
value: item.value.toString(),
|
||||
label: item.label,
|
||||
}
|
||||
})
|
||||
|
||||
// 构建树形关系
|
||||
list.forEach((item) => {
|
||||
const current = map[item.value]
|
||||
const parent = map[item.parentId]
|
||||
|
||||
if (parent) {
|
||||
if (!parent.children) {
|
||||
parent.children = []
|
||||
}
|
||||
parent.children.push(current)
|
||||
} else {
|
||||
tree.push(current)
|
||||
}
|
||||
})
|
||||
|
||||
return tree
|
||||
},
|
||||
changeDept(val) {
|
||||
if (val) {
|
||||
this.getCompanyNameList(val)
|
||||
} else {
|
||||
this.companyNameList = []
|
||||
this.queryParams.propertyUnit = ''
|
||||
}
|
||||
},
|
||||
// 地市公司
|
||||
async getCompanyNameList(code) {
|
||||
console.log('🚀 ~ getCompanyNameList ~ code:', code)
|
||||
try {
|
||||
const res = await getDeptApi({ code })
|
||||
console.log('🚀 ~ getCompanyNameList ~ res:', res)
|
||||
this.companyNameList = res.data || []
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ getCompanyNameList ~ error:', error)
|
||||
}
|
||||
},
|
||||
// 装备类目
|
||||
async getDeviceSeriesList(firstLevelId) {
|
||||
try {
|
||||
const res = await getMaTypeApi({ firstLevelId })
|
||||
console.log('🚀 ~ getMaTypeApi ~ res:', res)
|
||||
this.deviceSeriesList = this.convertToSubTree(res.data) || []
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ getMaTypeApi ~ error:', error)
|
||||
}
|
||||
},
|
||||
changeDeviceSeries(val) {
|
||||
console.log('🚀 ~ changeDeviceSeries ~ val:', val)
|
||||
if (!val) {
|
||||
this.queryParams.deviceSeries == ''
|
||||
return
|
||||
}
|
||||
this.queryParams.deviceSeries = val[val.length - 1]
|
||||
},
|
||||
// 工程专业
|
||||
async getProTypeList() {
|
||||
try {
|
||||
const res = await getFirstLevelApi()
|
||||
this.proTypeList = res.data || []
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ getProTypeList ~ error:', error)
|
||||
}
|
||||
},
|
||||
changeProType(val) {
|
||||
console.log('🚀 ~ changeProType ~ val:', val)
|
||||
this.deviceSeries = []
|
||||
if (val) {
|
||||
this.getDeviceSeriesList(val)
|
||||
} else {
|
||||
this.deviceSeriesList = []
|
||||
this.queryParams.deviceSeries = ''
|
||||
}
|
||||
},
|
||||
// 所在项目
|
||||
async getOnProjectList() {
|
||||
try {
|
||||
const res = await getProListApi()
|
||||
this.onProjectList = res.data || []
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ getOnProjectList ~ error:', error)
|
||||
}
|
||||
},
|
||||
// 导出数据
|
||||
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>
|
||||
.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>
|
||||
|
|
@ -1,516 +1,488 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-loading="isLoading"
|
||||
:visible.sync="dialogVisible"
|
||||
width="85%"
|
||||
:modal="false"
|
||||
class="dlg-box"
|
||||
>
|
||||
<el-dialog v-loading="isLoading" :visible.sync="dialogVisible" width="85%" :modal="false">
|
||||
<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="110px"
|
||||
@submit.native.prevent
|
||||
>
|
||||
<el-form-item label="装备范围" prop="deptName">
|
||||
<el-select
|
||||
v-model="queryParams.deptName"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
:popper-append-to-body="false"
|
||||
style="width: 240px"
|
||||
@change="changeDept"
|
||||
>
|
||||
<el-option v-for="item in deptNameList" :key="item.area_code" :label="item.name" :value="item.area_code" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="产权单位" prop="propertyUnit">
|
||||
<el-select
|
||||
v-model="queryParams.propertyUnit"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
:popper-append-to-body="false"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in companyNameList"
|
||||
:key="item.deptId"
|
||||
:label="item.deptName"
|
||||
:value="item.deptId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="专业" prop="major">
|
||||
<el-select
|
||||
v-model="queryParams.major"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
:popper-append-to-body="false"
|
||||
style="width: 240px"
|
||||
@change="changeProType"
|
||||
>
|
||||
<el-option v-for="item in proTypeList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="装备类目" prop="deviceSeries">
|
||||
<el-cascader
|
||||
popper-class="my-cas"
|
||||
v-model="deviceSeries"
|
||||
:options="deviceSeriesList"
|
||||
clearable
|
||||
@change="changeDeviceSeries"
|
||||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="装备名称" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入" clearable style="width: 240px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格型号" prop="specificationModel">
|
||||
<el-input v-model="queryParams.specificationModel" placeholder="请输入" clearable style="width: 240px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="装备编号" prop="code">
|
||||
<el-input v-model="queryParams.code" placeholder="请输入" clearable style="width: 240px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="装备原始编码" prop="originalCode">
|
||||
<el-input v-model="queryParams.originalCode" placeholder="请输入" clearable style="width: 240px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="装备状态" prop="changeStatus">
|
||||
<el-select
|
||||
v-model="queryParams.changeStatus"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
:popper-append-to-body="false"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option v-for="item in changeStatusList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="所在项目" prop="onProject">
|
||||
<el-select
|
||||
v-model="queryParams.onProject"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
:popper-append-to-body="false"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in onProjectList"
|
||||
:key="item.proCode"
|
||||
:label="item.usingProject"
|
||||
:value="item.proCode"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="装备厂家" prop="brand">
|
||||
<el-input v-model="queryParams.brand" placeholder="请输入" clearable style="width: 240px" />
|
||||
<!-- <el-select v-model="queryParams.brand" placeholder="请选择" clearable style="width: 240px">
|
||||
<el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select> -->
|
||||
</el-form-item>
|
||||
<el-form-item label="出厂日期" prop="productionDate">
|
||||
<el-date-picker
|
||||
popper-class="my-date"
|
||||
v-model="queryParams.productionDate"
|
||||
type="date"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="使用年限" prop="maxServiceLifeYears">
|
||||
<el-select
|
||||
v-model="queryParams.maxServiceLifeYears"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
:popper-append-to-body="false"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option v-for="item in workingHoursList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="资产原值(万元)" prop="originalValue">
|
||||
<el-input v-model="queryParams.originalValue" placeholder="请输入" clearable style="width: 240px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="下次检测日期" prop="nextMaintenanceDate">
|
||||
<el-date-picker
|
||||
popper-class="my-date"
|
||||
v-model="queryParams.nextMaintenanceDate"
|
||||
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-input v-model="queryParams.featureValue" placeholder="请输入" clearable style="width: 240px" />
|
||||
<!-- <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 icon="el-icon-refresh" @click="handleReset" class="btn">重置</el-button>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</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>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px">
|
||||
<div class="title-tip">
|
||||
<!-- <i class="el-icon-reading icon-tip" /> -->
|
||||
<span>装备总览</span>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||
<el-button type="primary" size="mini" @click="handleActive">图表分析</el-button>
|
||||
<i class="el-icon-download icon-tip" style="margin-left: 10px; cursor: pointer" @click="handleExport" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
v-if="activeTab"
|
||||
v-loading="isLoading"
|
||||
:data="tableList"
|
||||
stripe
|
||||
highlight-current-row
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
height="546"
|
||||
class="table-container"
|
||||
height="555"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
width="55"
|
||||
label="序号"
|
||||
align="center"
|
||||
:index="(index) => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
|
||||
/>
|
||||
<el-table-column type="index" width="55" label="序号" align="center" />
|
||||
<el-table-column
|
||||
v-for="(column, index) in tableColumns"
|
||||
show-overflow-tooltip
|
||||
:key="index"
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
:sortable="column.sortable || false"
|
||||
align="center"
|
||||
>
|
||||
<template v-slot="{ row }" v-if="column.prop === 'featureItem'">
|
||||
<span>{{ getFeatureItem(row.propertyVoList) }}</span>
|
||||
<template #header v-if="column.sortable">
|
||||
<span class="custom-header">
|
||||
{{ column.label }}
|
||||
<i class="el-icon-sort" style="color: #fff" />
|
||||
</span>
|
||||
</template>
|
||||
<template v-slot="{ row }" v-else-if="column.prop === 'featureValue'">
|
||||
<span>{{ getFeatureValue(row.propertyVoList) }}</span>
|
||||
<!-- 表格列插槽：单独处理装备总数、工具总数 -->
|
||||
<template #default="scope">
|
||||
<!-- 装备总数：非0/非空变色 + 跳转 -->
|
||||
<div v-if="column.prop === 'maNum'" class="table-active-color" style="cursor: pointer; user-select: none">
|
||||
{{ scope.row.maNum }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="column.prop === 'maCost'"
|
||||
class="table-active-color"
|
||||
style="cursor: pointer; user-select: none"
|
||||
>
|
||||
{{ scope.row.maCost }}
|
||||
</div>
|
||||
<!-- 其他列保持原样 -->
|
||||
<div v-else>
|
||||
{{ scope.row[column.prop] }}
|
||||
</div>
|
||||
</template>
|
||||
</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
|
||||
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
<!-- 柱状图 -->
|
||||
<div v-else ref="barRef" style="width: 100%; height: 550px; margin-top: 20px"></div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDeviceListAPI } from '@/api/EquipmentLedger'
|
||||
import { getAddressApi, getDeptApi, getMaTypeApi, getFirstLevelApi, getProListApi } from '@/api/wsScreen'
|
||||
import * as echarts from 'echarts'
|
||||
import { getDeviceByDept } from '@/api/basic/home'
|
||||
|
||||
export default {
|
||||
name: 'ProvincialCompany',
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
dialogVisible: false,
|
||||
showSearch: true,
|
||||
deviceSeries: [],
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
deptName: '', // 装备范围
|
||||
propertyUnit: '', // 地市公司
|
||||
name: '', // 装备名称
|
||||
deviceSeries: '', // 装备系列
|
||||
code: '', // 装备编号
|
||||
changeStatus: '', // 装备状态
|
||||
onProject: '', // 所在项目
|
||||
purchaseDate: '', // 采购日期
|
||||
productionDate: '', // 出厂日期
|
||||
maxServiceLifeYears: '', // 使用年限
|
||||
propertyUnit: '', // 产权单位
|
||||
brand: '', // 生产厂家
|
||||
originalValue: '', // 资产原值
|
||||
nextMaintenanceDate: '', // 下次检测日期
|
||||
featureItem: '', // 特征项
|
||||
featureValue: '', // 特征值
|
||||
isLoading: false,
|
||||
toolTotal: 60,
|
||||
equipTotal: 50,
|
||||
activeTab: true,
|
||||
dataAll: {
|
||||
maNum: 0,
|
||||
maPercent: 0,
|
||||
toolNum: 0,
|
||||
toolPercent: 0,
|
||||
totalSum: 0,
|
||||
},
|
||||
deptNameList: [],
|
||||
companyNameList: [],
|
||||
deviceSeriesList: [],
|
||||
changeStatusList: [
|
||||
{ label: '在库', value: 1 },
|
||||
{ label: '自用', value: 2 },
|
||||
{ label: '共享', value: 3 },
|
||||
{ label: '退役', value: 4 },
|
||||
{ label: '维修', value: 5 },
|
||||
],
|
||||
proTypeList: [],
|
||||
onProjectList: [],
|
||||
workingHoursList: [
|
||||
{ label: '5年', value: 1 },
|
||||
{ label: '5-10年', value: 2 },
|
||||
{ label: '10年以上', value: 3 },
|
||||
],
|
||||
companyNameList: [
|
||||
{ label: '单位1', value: 1 },
|
||||
{ label: '单位2', value: 2 },
|
||||
],
|
||||
brandList: [
|
||||
{ label: '单位1', value: 1 },
|
||||
{ label: '单位2', value: 2 },
|
||||
],
|
||||
buyPriceList: [
|
||||
{ label: '原值1', value: 1 },
|
||||
{ label: '原值2', value: 2 },
|
||||
],
|
||||
featureValueList: [
|
||||
{ label: '特征1', value: 1 },
|
||||
{ label: '特征2', value: 2 },
|
||||
],
|
||||
|
||||
useData: {
|
||||
availableNum: 0,
|
||||
inNum: 0,
|
||||
repairNum: 0,
|
||||
scrapNum: 0,
|
||||
shareNum: 0,
|
||||
},
|
||||
eventList: [],
|
||||
timer: null,
|
||||
speed: 60,
|
||||
isHover: false,
|
||||
tableColumns: [
|
||||
{ label: '公司名称', prop: 'propertyUnit' },
|
||||
{ label: '产权单位', prop: 'propertyUnit' },
|
||||
{ label: '专业', prop: 'major' },
|
||||
{ label: '主工序', prop: 'mainProcess' },
|
||||
{ label: '子工序', prop: 'subProcess' },
|
||||
{ label: '装备大类', prop: 'mainCategory' },
|
||||
{ label: '装备小类', prop: 'subCategory' },
|
||||
{ label: '类型分支', prop: 'branch' },
|
||||
{ label: '装备名称', prop: 'name' },
|
||||
{ label: '规格型号', prop: 'specificationModel' },
|
||||
{ label: '装备编号', prop: 'code' },
|
||||
{ label: '计量单位', prop: 'unit' },
|
||||
{ label: '所在项目', prop: 'usingProject' },
|
||||
{ label: '使用到期时间', prop: 'expirationTime' },
|
||||
{ label: '装备原始编码', prop: 'originalCode' },
|
||||
{ label: '出厂日期', prop: 'productionDate' },
|
||||
{ label: '生产厂家', prop: 'manufacturer' },
|
||||
{ label: '资产原值', prop: 'originalValue' },
|
||||
{ label: '下次维保日期', prop: 'nextMaintenanceDate' },
|
||||
{ label: '最大使用年限 (年)', prop: 'maxServiceLifeYears' },
|
||||
{ label: '特征项', prop: 'featureItem' },
|
||||
{ label: '特征值', prop: 'featureValue' },
|
||||
{ label: '公司名称', prop: 'companyName' },
|
||||
{ label: '装备总数', prop: 'maNum', sortable: true },
|
||||
{ label: '线路装备数量', prop: 'lineNum' },
|
||||
{ label: '变电装备数量', prop: 'substationNum' },
|
||||
{ label: '电缆装备数量', prop: 'cableNum' },
|
||||
{ label: '装备总价值(万元)', prop: 'maCost', sortable: true },
|
||||
],
|
||||
tableList: [],
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.dialogVisible = true
|
||||
this.getList()
|
||||
this.getDeptNameList()
|
||||
this.getProTypeList()
|
||||
this.getOnProjectList()
|
||||
},
|
||||
async getList() {
|
||||
try {
|
||||
const res = await getDeviceListAPI(this.queryParams)
|
||||
console.log('🚀 ~ getList ~ res:', res)
|
||||
this.tableList = res.data?.rows || []
|
||||
this.total = res.data?.total || 0
|
||||
const res = await getDeviceByDept()
|
||||
this.tableList = res.data
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ getList ~ error:', error)
|
||||
console.log('🚀 ~ error:', error)
|
||||
}
|
||||
},
|
||||
// 查询
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
// 重置
|
||||
handleReset() {
|
||||
this.$refs.queryForm.resetFields()
|
||||
this.queryParams.pageNum = 1
|
||||
this.queryParams.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
// 拼接特征项
|
||||
getFeatureItem(item) {
|
||||
if (!item || item.length == 0) return ''
|
||||
return item.map((item) => item.propertyName).join(',')
|
||||
},
|
||||
// 拼接特征值
|
||||
getFeatureValue(item) {
|
||||
if (!item || item.length == 0) return ''
|
||||
return item.map((item) => item.propertyValue).join(',')
|
||||
},
|
||||
// 装备范围
|
||||
async getDeptNameList() {
|
||||
try {
|
||||
const res = await getAddressApi()
|
||||
console.log('🚀 ~ getDeptNameList ~ res:', res)
|
||||
this.deptNameList = res.data || []
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ getDeptNameList ~ error:', error)
|
||||
handleActive() {
|
||||
this.activeTab = !this.activeTab
|
||||
if (!this.activeTab) {
|
||||
this.$nextTick(() => {
|
||||
this.initBarChart()
|
||||
})
|
||||
}
|
||||
},
|
||||
// 转换为树结构
|
||||
convertToSubTree(list) {
|
||||
const map = {}
|
||||
const tree = []
|
||||
|
||||
// 构建节点映射
|
||||
list.forEach((item) => {
|
||||
map[item.value] = {
|
||||
value: item.value.toString(),
|
||||
label: item.label,
|
||||
}
|
||||
})
|
||||
|
||||
// 构建树形关系
|
||||
list.forEach((item) => {
|
||||
const current = map[item.value]
|
||||
const parent = map[item.parentId]
|
||||
|
||||
if (parent) {
|
||||
if (!parent.children) {
|
||||
parent.children = []
|
||||
}
|
||||
parent.children.push(current)
|
||||
} else {
|
||||
tree.push(current)
|
||||
}
|
||||
})
|
||||
|
||||
return tree
|
||||
},
|
||||
changeDept(val) {
|
||||
if (val) {
|
||||
this.getCompanyNameList(val)
|
||||
} else {
|
||||
this.companyNameList = []
|
||||
this.queryParams.propertyUnit = ''
|
||||
}
|
||||
},
|
||||
// 地市公司
|
||||
async getCompanyNameList(code) {
|
||||
console.log('🚀 ~ getCompanyNameList ~ code:', code)
|
||||
try {
|
||||
const res = await getDeptApi({ code })
|
||||
console.log('🚀 ~ getCompanyNameList ~ res:', res)
|
||||
this.companyNameList = res.data || []
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ getCompanyNameList ~ error:', error)
|
||||
}
|
||||
},
|
||||
// 装备类目
|
||||
async getDeviceSeriesList(firstLevelId) {
|
||||
try {
|
||||
const res = await getMaTypeApi({ firstLevelId })
|
||||
console.log('🚀 ~ getMaTypeApi ~ res:', res)
|
||||
this.deviceSeriesList = this.convertToSubTree(res.data) || []
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ getMaTypeApi ~ error:', error)
|
||||
}
|
||||
},
|
||||
changeDeviceSeries(val) {
|
||||
console.log('🚀 ~ changeDeviceSeries ~ val:', val)
|
||||
if (!val) {
|
||||
this.queryParams.deviceSeries == ''
|
||||
return
|
||||
}
|
||||
this.queryParams.deviceSeries = val[val.length - 1]
|
||||
},
|
||||
// 工程专业
|
||||
async getProTypeList() {
|
||||
try {
|
||||
const res = await getFirstLevelApi()
|
||||
this.proTypeList = res.data || []
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ getProTypeList ~ error:', error)
|
||||
}
|
||||
},
|
||||
changeProType(val) {
|
||||
console.log('🚀 ~ changeProType ~ val:', val)
|
||||
this.deviceSeries = []
|
||||
if (val) {
|
||||
this.getDeviceSeriesList(val)
|
||||
} else {
|
||||
this.deviceSeriesList = []
|
||||
this.queryParams.deviceSeries = ''
|
||||
}
|
||||
},
|
||||
// 所在项目
|
||||
async getOnProjectList() {
|
||||
try {
|
||||
const res = await getProListApi()
|
||||
this.onProjectList = res.data || []
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ getOnProjectList ~ error:', error)
|
||||
}
|
||||
},
|
||||
// 导出数据
|
||||
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)
|
||||
this.download('material-mall/index/export', {}, `装备对比_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
initBarChart() {
|
||||
const barDom = this.$refs.barRef
|
||||
const barChart = echarts.init(barDom)
|
||||
|
||||
const companyNames = this.tableList.map((item) => item.companyName)
|
||||
const equipTotals = this.tableList.map((item) => item.maNum)
|
||||
const toolTotals = this.tableList.map((item) => item.maCost)
|
||||
|
||||
// 双系列专用-固定刻度
|
||||
const yAxisTicks = ['0', '200', '500', '1000', '10000', '100000', '200000+']
|
||||
const yAxisValues = [0, 200, 500, 1000, 10000, 100000, 200000]
|
||||
|
||||
// 双系列数值映射（预计算映射后的数据）
|
||||
const mapToStepHeight = (value) => {
|
||||
let i = 0
|
||||
while (i < yAxisValues.length - 1 && value > yAxisValues[i + 1]) i++
|
||||
const rangeStart = yAxisValues[i]
|
||||
const rangeEnd = yAxisValues[i + 1] || yAxisValues[i]
|
||||
const ratio = (value - rangeStart) / (rangeEnd - rangeStart || 1)
|
||||
return i + ratio
|
||||
}
|
||||
const mappedEquipTotals = equipTotals.map(mapToStepHeight)
|
||||
const mappedToolTotals = toolTotals.map(mapToStepHeight)
|
||||
|
||||
// ---------------------- 初始化图表 ----------------------
|
||||
const initShowEquip = equipTotals.some((v) => v > 0)
|
||||
const initShowTool = toolTotals.some((v) => v > 0)
|
||||
const initShowBoth = initShowEquip && initShowTool
|
||||
|
||||
barChart.setOption(
|
||||
{
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: (params) => {
|
||||
let res = `${params[0].name}<br/>`
|
||||
params.forEach((p) => {
|
||||
const val = p.seriesName === '装备总数' ? equipTotals[p.dataIndex] : toolTotals[p.dataIndex]
|
||||
const unit = p.seriesName === '装备总数' ? '台' : '万元'
|
||||
res += `${p.seriesName}: ${val}${unit}<br/>`
|
||||
})
|
||||
return res
|
||||
},
|
||||
},
|
||||
// ✅ 永久双图例，永不消失
|
||||
legend: {
|
||||
top: 0,
|
||||
right: 20,
|
||||
data: ['装备总数', '总价值'],
|
||||
selected: {
|
||||
装备总数: initShowEquip,
|
||||
总价值: initShowTool,
|
||||
},
|
||||
},
|
||||
grid: { left: '3%', right: '3%', bottom: '3%', top: '15%', containLabel: true },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: companyNames,
|
||||
axisLabel: {
|
||||
fontSize: 13,
|
||||
interval: 0,
|
||||
lineHeight: 16,
|
||||
formatter: (name) => {
|
||||
if (name.length <= 4) return name
|
||||
let res = ''
|
||||
for (let i = 0; i < Math.ceil(name.length / 4); i++) {
|
||||
res += name.substring(i * 4, (i + 1) * 4) + '\n'
|
||||
}
|
||||
return res
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: initShowBoth
|
||||
? {
|
||||
// 双系列-固定阶梯刻度
|
||||
type: 'value',
|
||||
name: '数量（台）',
|
||||
nameTextStyle: { fontSize: 14 },
|
||||
min: 0,
|
||||
max: 6,
|
||||
interval: 1,
|
||||
axisLabel: { fontSize: 12, margin: 8, formatter: (idx) => yAxisTicks[Math.floor(idx)] },
|
||||
splitLine: { lineStyle: { type: 'dashed', color: '#e0e0e0' } },
|
||||
}
|
||||
: {
|
||||
// 单系列-原生线性轴
|
||||
type: 'value',
|
||||
name: '数量（台）',
|
||||
nameTextStyle: { fontSize: 14 },
|
||||
},
|
||||
series: [
|
||||
...(initShowEquip
|
||||
? [
|
||||
{
|
||||
name: '装备总数',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
barGap: '40%',
|
||||
barCategoryGap: '0%',
|
||||
itemStyle: {
|
||||
borderRadius: [50, 50, 0, 0],
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{ offset: 0, color: '#51ABF7' },
|
||||
{ offset: 1, color: '#78C5FF' },
|
||||
]),
|
||||
},
|
||||
data: initShowBoth ? mappedEquipTotals : equipTotals,
|
||||
},
|
||||
]
|
||||
: []),
|
||||
...(initShowTool
|
||||
? [
|
||||
{
|
||||
name: '总价值',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
barGap: '40%',
|
||||
barCategoryGap: '0%',
|
||||
itemStyle: {
|
||||
borderRadius: [50, 50, 0, 0],
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{ offset: 0, color: '#5EDDCA' },
|
||||
{ offset: 1, color: '#32E1C6' },
|
||||
]),
|
||||
},
|
||||
data: initShowBoth ? mappedToolTotals : toolTotals,
|
||||
},
|
||||
]
|
||||
: []),
|
||||
],
|
||||
},
|
||||
true,
|
||||
)
|
||||
|
||||
// ---------------------- 严格按你指定格式编写【核心修复Y轴不生效问题】 ----------------------
|
||||
barChart.on('legendselectchanged', (params) => {
|
||||
// 获取当前显示的系列
|
||||
const selectedSeries = Object.keys(params.selected).filter((key) => params.selected[key])
|
||||
// 判断是否同时显示两台系列
|
||||
const showBothSeries = selectedSeries.length > 1
|
||||
|
||||
// ✅ 核心修复：单系列清空所有固定配置，强制线性轴生效
|
||||
let newYAxisConfig
|
||||
if (showBothSeries) {
|
||||
// 双系列：固定阶梯刻度（完整配置）
|
||||
newYAxisConfig = {
|
||||
type: 'value',
|
||||
name: '数量（台）',
|
||||
nameTextStyle: { fontSize: 14 },
|
||||
min: 0, // 固定最小值
|
||||
max: 6, // 固定最大值
|
||||
interval: 1, // 固定刻度间隔
|
||||
axisTick: { show: true, alignWithLabel: true, length: 4 },
|
||||
axisLabel: { fontSize: 12, margin: 8, formatter: (idx) => yAxisTicks[Math.floor(idx)] },
|
||||
splitLine: { lineStyle: { type: 'dashed', color: '#e0e0e0' } },
|
||||
}
|
||||
} else {
|
||||
// ✅ 单系列：彻底清空所有固定配置，强制原生线性轴【必生效】
|
||||
newYAxisConfig = {
|
||||
type: 'value',
|
||||
name: '数量（台）',
|
||||
nameTextStyle: { fontSize: 14 },
|
||||
min: undefined, // 清空固定最小值
|
||||
max: undefined, // 清空固定最大值
|
||||
interval: undefined, // 清空固定间隔
|
||||
axisLabel: {
|
||||
// 清空自定义格式化，恢复原生数值显示
|
||||
fontSize: 12,
|
||||
margin: 8,
|
||||
formatter: undefined,
|
||||
},
|
||||
splitLine: { lineStyle: { type: 'solid', color: '#e0e0e0' } },
|
||||
}
|
||||
}
|
||||
|
||||
// ✅ 关键：更新Y轴时添加 replaceMerge: true，强制覆盖旧配置（解决不生效核心）
|
||||
barChart.setOption({ yAxis: newYAxisConfig }, { replaceMerge: ['yAxis'], silent: true })
|
||||
|
||||
// 更新系列数据
|
||||
const newSeries = []
|
||||
if (params.selected['装备总数']) {
|
||||
newSeries.push({
|
||||
name: '装备总数',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
barGap: '40%',
|
||||
barCategoryGap: '0%',
|
||||
itemStyle: {
|
||||
borderRadius: [50, 50, 0, 0],
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{ offset: 0, color: '#5470C6' },
|
||||
{ offset: 1, color: '#78A2FF' },
|
||||
]),
|
||||
},
|
||||
data: showBothSeries ? mappedEquipTotals : equipTotals,
|
||||
})
|
||||
}
|
||||
if (params.selected['总价值']) {
|
||||
newSeries.push({
|
||||
name: '总价值',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
barGap: '40%',
|
||||
barCategoryGap: '0%',
|
||||
itemStyle: {
|
||||
borderRadius: [50, 50, 0, 0],
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{ offset: 0, color: '#5EDDCA' },
|
||||
{ offset: 1, color: '#32E1C6' },
|
||||
]),
|
||||
},
|
||||
data: showBothSeries ? mappedToolTotals : toolTotals,
|
||||
})
|
||||
}
|
||||
barChart.setOption({ series: newSeries })
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.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%;
|
||||
.app-container {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
margin-bottom: 10px;
|
||||
.top-item {
|
||||
width: 33%;
|
||||
flex: 1;
|
||||
}
|
||||
.dlg-title {
|
||||
margin-top: -25px;
|
||||
margin-bottom: 45px;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
.left-tip {
|
||||
font-size: 13px;
|
||||
background: #f5f5f5;
|
||||
padding: 3px 10px;
|
||||
border-radius: 5px;
|
||||
color: #75787d;
|
||||
}
|
||||
}
|
||||
.card-box {
|
||||
width: 100%;
|
||||
border-radius: 15px;
|
||||
height: 350px;
|
||||
}
|
||||
.card-box2 {
|
||||
width: 100%;
|
||||
border-radius: 15px;
|
||||
min-height: 430px;
|
||||
}
|
||||
.title-tip {
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
.icon-tip {
|
||||
margin-right: 10px;
|
||||
font-weight: 900;
|
||||
}
|
||||
::v-deep .card-box {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
|
||||
.content-item {
|
||||
flex: 1;
|
||||
border-radius: 8px;
|
||||
height: 90px;
|
||||
/* background: #f3fbf8; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
.line {
|
||||
width: 4px;
|
||||
height: 90px;
|
||||
/* background: #79d1b8; */
|
||||
}
|
||||
.item-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #75787d;
|
||||
font-size: 13px;
|
||||
}
|
||||
.num {
|
||||
margin-top: 10px;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-wrapper {
|
||||
margin-top: 10px;
|
||||
height: 300px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.scroll-list {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.is-hover {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.scroll-list li {
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
/* 隔行背景色 */
|
||||
.scroll-list li.odd {
|
||||
background-color: #ebf8f3;
|
||||
}
|
||||
|
||||
// 表格有效数值（非0/非空）的样式
|
||||
.table-active-color {
|
||||
color: #2cbab2 !important; // 蓝色（可修改为你需要的颜色）
|
||||
font-weight: 700 !important; // 加粗突出
|
||||
}
|
||||
|
||||
// 鼠标悬浮时的过渡效果（可选）
|
||||
.table-active-color:hover {
|
||||
color: #2cbab2 !important;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
/* 干掉原来的三角形 */
|
||||
::v-deep .caret-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::v-deep .el-table .el-table__header th {
|
||||
background: linear-gradient(180deg, #00d2be 0%, #4eacff 100%) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<div>
|
||||
<img src="@/assets/images/bgs/equ.jpg" style="width: 100%" alt="" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RentStat',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<div>
|
||||
<img v-if="showPro" src="@/assets/images/bgs/pro1.jpg" style="width: 100%" alt="" />
|
||||
<img v-else src="@/assets/images/bgs/pro2.jpg" style="width: 100%" alt="" />
|
||||
<img src="@/assets/images/bgs/switch.png" class="stitch" @click="showPro = !showPro" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ProUseAnalysis',
|
||||
data() {
|
||||
return {
|
||||
showPro: true,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.stitch {
|
||||
position: absolute;
|
||||
top: 230px;
|
||||
right: 40px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue