Merge branch 'anhui-mall-ui-test' of http://192.168.30.2:3000/bonus/bonus-ui into anhui-mall-ui-test
This commit is contained in:
commit
3e9a046f32
|
|
@ -0,0 +1,81 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
/**
|
||||
* 查询列表
|
||||
* @param {object} params - 查询参数
|
||||
*/
|
||||
export const getProcessList = (params) => {
|
||||
return request({
|
||||
url: '/material-mall/equipment/field/list',
|
||||
method: 'GET',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取详细信息（包含节点列表）
|
||||
* @param {number} id - ID
|
||||
*/
|
||||
export const getProcessDetail = (id) => {
|
||||
return request({
|
||||
url: `/material-mall/equipment/field/${id}`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增
|
||||
* @param {object} data - 数据
|
||||
*/
|
||||
export const addProcess = (data) => {
|
||||
return request({
|
||||
url: '/material-mall/equipment/field/add ',
|
||||
method: 'POST',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改
|
||||
* @param {object} data - 数据
|
||||
*/
|
||||
export const updateProcess = (data) => {
|
||||
return request({
|
||||
url: '/material-mall/equipment/field/edit ',
|
||||
method: 'POST',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除
|
||||
* @param {string} ids - ID，多个用逗号分隔
|
||||
*/
|
||||
export const deleteProcess = (ids) => {
|
||||
return request({
|
||||
url: `/material-mall/equipment/field/delete/${ids}`,
|
||||
method: 'POST',
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 启用
|
||||
* @param {number} id - ID
|
||||
*/
|
||||
export const enableProcess = (id) => {
|
||||
return request({
|
||||
url: `/material-mall/approval/process/enable/${id}`,
|
||||
method: 'PUT'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 停用
|
||||
* @param {number} id - ID
|
||||
*/
|
||||
export const disableProcess = (id) => {
|
||||
return request({
|
||||
url: `/material-mall/approval/process/disable/${id}`,
|
||||
method: 'PUT'
|
||||
})
|
||||
}
|
||||
|
|
@ -2,6 +2,9 @@
|
|||
<div>
|
||||
<TitleBox titleText="装备状态" @handleMore="handleMore" style="margin-bottom: 10px" />
|
||||
<div ref="diamondChart" class="chart-container"></div>
|
||||
|
||||
<!-- 装备状态 -->
|
||||
<EquipStatusMore ref="equipStatusMore" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -9,11 +12,13 @@
|
|||
import TitleBox from '../TitleBox'
|
||||
import * as echarts from 'echarts'
|
||||
import { getEquipmentStatusApi } from '@/api/wsScreen/index'
|
||||
import EquipStatusMore from '@/views/home/components/provincial/Dialog/EquipStatusMore'
|
||||
|
||||
export default {
|
||||
name: 'Bottom1-1',
|
||||
components: {
|
||||
TitleBox,
|
||||
EquipStatusMore,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -25,7 +30,7 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
handleMore() {
|
||||
console.log('🚀 ~ methods.handleMore:')
|
||||
this.$refs.equipStatusMore.openDialog()
|
||||
},
|
||||
async getList() {
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -28,17 +28,21 @@
|
|||
</table>
|
||||
<el-empty v-if="tableData.length == 0" :image-size="110" description="暂无数据"></el-empty>
|
||||
</div>
|
||||
|
||||
<UsageRateMore ref="usageRateMore" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TitleBox from '../TitleBox'
|
||||
import { getDeptEquipmentApi } from '@/api/wsScreen'
|
||||
import UsageRateMore from '@/views/home/components/provincial/Dialog/UsageRateMore.vue'
|
||||
|
||||
export default {
|
||||
name: 'Bottom1-2',
|
||||
components: {
|
||||
TitleBox,
|
||||
UsageRateMore
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -96,7 +100,7 @@ export default {
|
|||
}
|
||||
},
|
||||
handleMore() {
|
||||
console.log('🚀 ~ methods.handleMore:')
|
||||
this.$refs.usageRateMore.openDialog()
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,17 +44,21 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<EquipUsageRateMore ref="equipUsageRateMore" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TitleBox from '../TitleBox'
|
||||
import { getUsageStatisticsApi } from '@/api/wsScreen'
|
||||
import EquipUsageRateMore from '@/views/home/components/provincial/Dialog/EquipUsageRateMore.vue'
|
||||
|
||||
export default {
|
||||
name: 'Bottom2',
|
||||
components: {
|
||||
TitleBox,
|
||||
EquipUsageRateMore
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -96,7 +100,7 @@ export default {
|
|||
}
|
||||
},
|
||||
handleMore() {
|
||||
console.log('🚀 ~ methods.handleMore:')
|
||||
this.$refs.equipUsageRateMore.openDialog()
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -90,17 +90,22 @@
|
|||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 单位装备配置 -->
|
||||
<UnitEquipConfig ref="unitEquipConfig" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUnitEquipmentConfigurationApi } from '@/api/wsScreen/index'
|
||||
import TitleBox from '../TitleBox'
|
||||
import UnitEquipConfig from '@/views/home/components/provincial/Dialog/UnitEquipConfig'
|
||||
|
||||
export default {
|
||||
name: 'Center1',
|
||||
components: {
|
||||
TitleBox,
|
||||
UnitEquipConfig
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -124,7 +129,7 @@ export default {
|
|||
}
|
||||
},
|
||||
handleMore() {
|
||||
console.log('🚀 ~ methods.handleMore:')
|
||||
this.$refs.unitEquipConfig.openDialog()
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,17 +69,21 @@
|
|||
</table>
|
||||
<el-empty v-if="tableData.length == 0" :image-size="110" description="暂无数据"></el-empty>
|
||||
</div>
|
||||
|
||||
<ProEquipMore ref="proEquipMore" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TitleBox from '../TitleBox'
|
||||
import { getEquipmentUseApi, getVoltageLevelApi } from '@/api/wsScreen'
|
||||
import ProEquipMore from '@/views/home/components/provincial/Dialog/ProEquipMore.vue'
|
||||
|
||||
export default {
|
||||
name: 'Center2',
|
||||
components: {
|
||||
TitleBox,
|
||||
ProEquipMore
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -136,7 +140,7 @@ export default {
|
|||
this.getList()
|
||||
},
|
||||
handleMore() {
|
||||
console.log('🚀 ~ methods.handleMore:')
|
||||
this.$refs.proEquipMore.openDialog()
|
||||
},
|
||||
rowStyle(index) {
|
||||
let background = ''
|
||||
|
|
|
|||
|
|
@ -0,0 +1,517 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-if="dialogVisible"
|
||||
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 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%"
|
||||
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>
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-if="dialogVisible"
|
||||
v-loading="isLoading"
|
||||
:visible.sync="dialogVisible"
|
||||
width="60%"
|
||||
:modal="false"
|
||||
class="dlg-box"
|
||||
>
|
||||
<div>
|
||||
<!-- 自定义title -->
|
||||
<i class="close-btn" @click="dialogVisible = false" />
|
||||
<div class="dlg-title">{{ title }}</div>
|
||||
|
||||
<div ref="category" style="height: 650px"></div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { getStatByTypeAndAgeByUsageRateApi, getStatByTypeAndAgeByTurnoverRateApi } from '@/api/wsScreen'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
dialogVisible: false,
|
||||
title: '',
|
||||
unit: '',
|
||||
categories: [],
|
||||
line: [], // 线路
|
||||
substation: [], // 变电
|
||||
cable: [], // 电缆
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openDialog(type) {
|
||||
if (type == 1) {
|
||||
this.title = '装备在用率'
|
||||
this.unit = '%'
|
||||
} else {
|
||||
this.title = '装备周转率'
|
||||
this.unit = '次'
|
||||
}
|
||||
this.dialogVisible = true
|
||||
this.getInfo(type)
|
||||
},
|
||||
async getInfo(type) {
|
||||
try {
|
||||
let res = null
|
||||
if (type == 1) {
|
||||
res = await getStatByTypeAndAgeByUsageRateApi()
|
||||
} else {
|
||||
res = await getStatByTypeAndAgeByTurnoverRateApi()
|
||||
}
|
||||
if (!res.data || res.data.length == 0) return
|
||||
this.categories = res.data.map((item) => item.month)
|
||||
this.line = res.data.map((item) => item.lineCount)
|
||||
this.substation = res.data.map((item) => item.substationCount)
|
||||
this.cable = res.data.map((item) => item.cableCount)
|
||||
this.$nextTick(() => {
|
||||
this.initLineChart()
|
||||
})
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ getInfo ~ error:', error)
|
||||
}
|
||||
},
|
||||
initLineChart() {
|
||||
const chartDom = this.$refs.category
|
||||
if (!chartDom) return
|
||||
|
||||
const myChart = echarts.init(chartDom)
|
||||
|
||||
const categories = this.categories
|
||||
|
||||
// 三条折线的假数据
|
||||
const data1 = this.line
|
||||
const data2 = this.substation
|
||||
const data3 = this.cable
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: ['线路', '变电', '电缆'],
|
||||
textStyle: { color: '#fff' },
|
||||
top: 10,
|
||||
right: 10,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: categories,
|
||||
axisLine: { lineStyle: { color: '#ccc' } },
|
||||
splitLine: { show: false },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: `单位：${this.unit}`,
|
||||
axisLine: { show: false },
|
||||
splitLine: { show: false },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '线路',
|
||||
data: data1,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
lineStyle: { width: 2, color: '#4facfe' },
|
||||
label: { show: true, position: 'top', color: '#fff', fontSize: 12 },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(0, 90, 170, 0.8)' },
|
||||
{ offset: 1, color: 'rgba(0, 180, 255, 0.05)' },
|
||||
]),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '电缆',
|
||||
data: data3,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
lineStyle: { width: 2, color: '#43e97b' },
|
||||
label: { show: true, position: 'top', color: '#fff', fontSize: 12 },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(255, 140, 0, 0.8)' },
|
||||
{ offset: 1, color: 'rgba(255, 200, 0, 0.05)' },
|
||||
]),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '变电',
|
||||
data: data2,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
lineStyle: { width: 2, color: '#ffae00' },
|
||||
label: { show: true, position: 'top', color: '#fff', fontSize: 12 },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(0, 150, 80, 0.8)' },
|
||||
{ offset: 1, color: 'rgba(0, 255, 130, 0.05)' },
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
myChart.setOption(option)
|
||||
window.addEventListener('resize', () => myChart.resize())
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dlg-box {
|
||||
.close-btn {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.dlg-title {
|
||||
margin-top: -25px;
|
||||
margin-bottom: 45px;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,220 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-if="dialogVisible"
|
||||
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 @submit.native.prevent>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
:popper-append-to-body="false"
|
||||
>
|
||||
<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%"
|
||||
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 == 'status'">
|
||||
<span v-if="row.status == 1">在库</span>
|
||||
<span v-if="row.status == 2">自用</span>
|
||||
<span v-if="row.status == 3">共享</span>
|
||||
<span v-if="row.status == 4">退役</span>
|
||||
<span v-if="row.status == 5">维修</span>
|
||||
</template>
|
||||
<template v-slot="{ row }" v-else-if="/^feature(Item|Value)\d+$/.test(column.prop)">
|
||||
<span>
|
||||
{{ getFeatureValue(row, column.prop) }}
|
||||
</span>
|
||||
</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/index.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
dialogVisible: false,
|
||||
showSearch: true,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
status: '', // 状态
|
||||
},
|
||||
equipList: [
|
||||
{ label: '全网省', value: 1 },
|
||||
{ label: '合肥市', value: 2 },
|
||||
],
|
||||
statusList: [
|
||||
{ label: '在库', value: 1 },
|
||||
{ label: '自用', value: 2 },
|
||||
{ label: '共享', value: 3 },
|
||||
{ label: '退役', value: 4 },
|
||||
{ label: '维修', value: 5 },
|
||||
],
|
||||
|
||||
tableColumns: [
|
||||
{ label: '施工装备', prop: 'major' },
|
||||
{ label: '型号', prop: 'specificationModel' },
|
||||
{ label: '数量', prop: 'count' },
|
||||
{ label: '设备编码', prop: 'code' },
|
||||
{ label: '特征项1', prop: 'featureItem1' },
|
||||
{ label: '特征值1', prop: 'featureValue1' },
|
||||
{ label: '特征项1', prop: 'featureItem2' },
|
||||
{ label: '特征值2', prop: 'featureValue2' },
|
||||
{ label: '特征项2', prop: 'featureItem3' },
|
||||
{ label: '特征值3', prop: 'featureValue3' },
|
||||
{ label: '特征项4', prop: 'featureItem4' },
|
||||
{ label: '特征值4', prop: 'featureValue4' },
|
||||
{ label: '特征项5', prop: 'featureItem5' },
|
||||
{ label: '特征值5', prop: 'featureValue5' },
|
||||
{ label: '特征项6', prop: 'featureItem6' },
|
||||
{ label: '特征值6', prop: 'featureValue6' },
|
||||
{ label: '特征项7', prop: 'featureItem7' },
|
||||
{ label: '特征值7', prop: 'featureValue7' },
|
||||
{ label: '特征项8', prop: 'featureItem8' },
|
||||
{ label: '特征值8', prop: 'featureValue8' },
|
||||
{ label: '特征项9', prop: 'featureItem9' },
|
||||
{ label: '特征值9', prop: 'featureValue9' },
|
||||
{ label: '产权单位', prop: 'propertyUnit' },
|
||||
{ label: '资产原值(万元)', prop: 'originalValue' },
|
||||
{ label: '出厂日期', prop: 'productionDate' },
|
||||
{ label: '使用项目', prop: 'usingProject' },
|
||||
// { label: 'vlook的状态', prop: 'vlookStatus' },
|
||||
{ label: '状态', prop: 'status' },
|
||||
{ label: '下次维保日期', prop: 'nextMaintenanceDate' },
|
||||
{ label: '生产厂家', prop: 'manufacturer' },
|
||||
],
|
||||
tableList: [],
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.dialogVisible = true
|
||||
this.getList()
|
||||
},
|
||||
async getList() {
|
||||
try {
|
||||
// 获取设备列表
|
||||
const res = await getDeviceListAPI(this.queryParams)
|
||||
this.tableList = res.data?.rows || []
|
||||
this.total = res.data?.total || 0
|
||||
} catch (error) {
|
||||
this.$message.error('获取设备列表失败：' + (error.message || '未知错误'))
|
||||
console.error(error)
|
||||
}
|
||||
},
|
||||
getFeatureValue(row, prop) {
|
||||
const match = prop.match(/feature(Item|Value)(\d+)/)
|
||||
if (!match) return '-'
|
||||
|
||||
const type = match[1] // 'Item' or 'Value'
|
||||
const index = Number(match[2]) - 1
|
||||
const list = row.propertyVoList || []
|
||||
|
||||
if (!list[index]) return '-'
|
||||
|
||||
return type === 'Item' ? list[index].propertyName : list[index].propertyValue
|
||||
},
|
||||
// 查询
|
||||
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>
|
||||
.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,115 @@
|
|||
<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-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"
|
||||
>
|
||||
</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 { getUsageStatisticsDetailsApi } from '@/api/wsScreen'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
dialogVisible: false,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
|
||||
tableColumns: [
|
||||
{ label: '装备名称', prop: 'name' },
|
||||
{ label: '在用率 (%)', prop: 'proportion' },
|
||||
{ label: '周转率 (次/年)', prop: 'turnoverRate' },
|
||||
],
|
||||
tableList: [],
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.getList()
|
||||
this.dialogVisible = true
|
||||
},
|
||||
async getList() {
|
||||
try {
|
||||
const res = await getUsageStatisticsDetailsApi({ ...this.queryParams })
|
||||
this.tableList = res.rows || []
|
||||
this.total = res.total || 0
|
||||
} catch (err) {
|
||||
console.log('🚀 ~ err:', err)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dlg-box {
|
||||
.close-btn {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.dlg-title {
|
||||
margin-top: -25px;
|
||||
margin-bottom: 45px;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-if="dialogVisible"
|
||||
v-loading="isLoading"
|
||||
:visible.sync="dialogVisible"
|
||||
width="80%"
|
||||
:modal="false"
|
||||
class="dlg-box"
|
||||
>
|
||||
<div>
|
||||
<!-- 自定义title -->
|
||||
<i class="close-btn" @click="dialogVisible = false" />
|
||||
<div class="dlg-title">工程在用装备情况</div>
|
||||
|
||||
<!-- 表单 -->
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent>
|
||||
<el-form-item label="工程名称" prop="proName">
|
||||
<el-input v-model="queryParams.proName" clearable placeholder="请输入" />
|
||||
</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-table
|
||||
v-loading="isLoading"
|
||||
:data="tableList"
|
||||
stripe
|
||||
highlight-current-row
|
||||
height="546"
|
||||
style="width: 100%"
|
||||
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
|
||||
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getEquipmentDetailsApi } from '@/api/wsScreen'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
dialogVisible: false,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
proName: '', // 装备类型
|
||||
},
|
||||
tableColumns: [
|
||||
{ label: '工程名称', prop: 'proName' },
|
||||
{ label: '在用装备数量（台）', prop: 'inUser' },
|
||||
{ label: '类型', prop: 'projectTypeName' },
|
||||
{ label: '电压等级（kV）', prop: 'voltage' },
|
||||
{ label: '规模（拆单公里）', prop: 'scale' },
|
||||
{ label: '百公里线路装备使用情况', prop: 'usage' },
|
||||
],
|
||||
tableList: [],
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.getList()
|
||||
this.dialogVisible = true
|
||||
},
|
||||
async getList() {
|
||||
try {
|
||||
const res = await getEquipmentDetailsApi({ ...this.queryParams })
|
||||
this.tableList = res.rows || []
|
||||
this.total = res.total || 0
|
||||
} catch (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()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dlg-box {
|
||||
.close-btn {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.dlg-title {
|
||||
margin-top: -25px;
|
||||
margin-bottom: 45px;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-if="dialogVisible"
|
||||
v-loading="isLoading"
|
||||
:visible.sync="dialogVisible"
|
||||
width="50%"
|
||||
:modal="false"
|
||||
class="dlg-box"
|
||||
>
|
||||
<div>
|
||||
<!-- 自定义title -->
|
||||
<i class="close-btn" @click="dialogVisible = false" />
|
||||
<div class="dlg-title">总价值</div>
|
||||
|
||||
<div ref="category" style="height: 600px"></div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
dialogVisible: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.dialogVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.initLineChart()
|
||||
})
|
||||
},
|
||||
initLineChart() {
|
||||
const chartDom = this.$refs.category
|
||||
if (!chartDom) return
|
||||
|
||||
const myChart = echarts.init(chartDom)
|
||||
|
||||
// 造点假数据
|
||||
const categories = ['2020', '2021', '2022', '2023', '2024', '2025']
|
||||
const data = [520, 680, 750, 820, 910, 1050]
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: categories,
|
||||
axisLine: {
|
||||
lineStyle: { color: '#ccc' }, // x轴线
|
||||
},
|
||||
splitLine: { show: false }, // 去掉竖向分割线
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '单位：万元',
|
||||
axisLine: {
|
||||
show: false, // 去掉 y 轴线
|
||||
},
|
||||
splitLine: {
|
||||
show: false, // 去掉横向分割线
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '总价值',
|
||||
data: data,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
areaStyle: { opacity: 0.3 },
|
||||
lineStyle: { width: 2 },
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
label: {
|
||||
show: true, // 开启显示
|
||||
position: 'top', // 在点的上方
|
||||
color: '#fff', // 文字颜色（你背景是深色）
|
||||
fontSize: 12,
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(0, 90, 170, 0.8)' }, // 上方深色
|
||||
{ offset: 1, color: 'rgba(0, 180, 255, 0.05)' }, // 下方更浅
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
myChart.setOption(option)
|
||||
window.addEventListener('resize', () => myChart.resize())
|
||||
},
|
||||
},
|
||||
}
|
||||
</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% 100%;
|
||||
// height: 800px;
|
||||
// color: #fff;
|
||||
// }
|
||||
// ::v-deep .el-dialog__header {
|
||||
// display: none;
|
||||
// }
|
||||
// .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,127 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-if="dialogVisible"
|
||||
v-loading="isLoading"
|
||||
:visible.sync="dialogVisible"
|
||||
width="80%"
|
||||
: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%"
|
||||
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 === 'price'">
|
||||
<span>{{ row.price || 0 }}</span>
|
||||
</template>
|
||||
</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>
|
||||
import { getStatByTypeAndAgeByConfigurationApi } from '@/api/wsScreen'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
dialogVisible: false,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
tableColumns: [
|
||||
{ label: '单位名称', prop: 'name' },
|
||||
{ label: '装备价值（万元）', prop: 'price' },
|
||||
{ label: '装备数量', prop: 'count' },
|
||||
{ label: '线路数量（台）', prop: 'lineCount' },
|
||||
{ label: '变电数量（台）', prop: 'substationCount' },
|
||||
{ label: '电缆数量（台）', prop: 'cableCount' },
|
||||
{ label: '配置率', prop: 'configRate' },
|
||||
{ label: '线路配置率', prop: 'lineConfigRate' },
|
||||
{ label: '变电配置率', prop: 'subStationConfigRate' },
|
||||
{ label: '电缆配置率', prop: 'cableConfigRate' },
|
||||
],
|
||||
tableList: [],
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.dialogVisible = true
|
||||
this.getList()
|
||||
},
|
||||
async getList() {
|
||||
try {
|
||||
const res = await getStatByTypeAndAgeByConfigurationApi()
|
||||
console.log('🚀 ~ getList ~ res:', res)
|
||||
this.tableList = res.data
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ getList ~ error:', 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>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-if="dialogVisible"
|
||||
v-loading="isLoading"
|
||||
:visible.sync="dialogVisible"
|
||||
width="60%"
|
||||
: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%"
|
||||
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"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<!-- <pagination
|
||||
|
||||
:total="88"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/> -->
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDeptEquipmentApi } from '@/api/wsScreen'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
dialogVisible: false,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
|
||||
tableColumns: [
|
||||
{ label: '单位名称', prop: 'name' },
|
||||
{ label: '在用率 (%)', prop: 'proportion' },
|
||||
{ label: '周转率 (次/年)', prop: 'turnoverRate' },
|
||||
],
|
||||
tableList: [],
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.getList()
|
||||
this.dialogVisible = true
|
||||
},
|
||||
async getList() {
|
||||
try {
|
||||
const res = await getDeptEquipmentApi()
|
||||
console.log('🚀 ~ 各单位装备在用率情况 ~ res:', res)
|
||||
this.tableList = res.data || []
|
||||
} catch (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()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dlg-box {
|
||||
.close-btn {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.dlg-title {
|
||||
margin-top: -25px;
|
||||
margin-bottom: 45px;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 6.4 KiB |
|
|
@ -16,7 +16,7 @@
|
|||
<img src="@/assets/images/total-num.png" class="img-pos" alt="" />
|
||||
</div>
|
||||
<!-- 右 -->
|
||||
<div class="top-item">
|
||||
<div class="top-item" @click="openTotalPrice">
|
||||
<div class="item-left">
|
||||
<div class="item-title">总价值</div>
|
||||
<div>
|
||||
|
|
@ -99,17 +99,26 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 全量装备 -->
|
||||
<AllEquip ref="allEquip" />
|
||||
<!-- 总价值 -->
|
||||
<TotalPriceMore ref="totalPriceMore" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getTotalEquipmentApi, getEquipmentClassificationApi } from '@/api/wsScreen'
|
||||
import TitleBox from '../TitleBox'
|
||||
import AllEquip from '@/views/home/components/provincial/Dialog/AllEquip'
|
||||
import TotalPriceMore from '@/views/home/components/provincial/Dialog/TotalPriceMore'
|
||||
|
||||
export default {
|
||||
name: 'Top1',
|
||||
components: {
|
||||
TitleBox,
|
||||
AllEquip,
|
||||
TotalPriceMore,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -150,7 +159,10 @@ export default {
|
|||
mounted() {},
|
||||
methods: {
|
||||
handleMore() {
|
||||
console.log('🚀 ~ methods.handleMore:')
|
||||
this.$refs.allEquip.openDialog()
|
||||
},
|
||||
openTotalPrice() {
|
||||
this.$refs.totalPriceMore.openDialog()
|
||||
},
|
||||
async getInfo() {
|
||||
try {
|
||||
|
|
@ -205,6 +217,7 @@ export default {
|
|||
justify-content: space-between;
|
||||
|
||||
.top-item {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
width: 50%;
|
||||
padding: 12px;
|
||||
|
|
|
|||
|
|
@ -96,8 +96,11 @@ export default {
|
|||
const option = {
|
||||
tooltip: {
|
||||
show: true,
|
||||
backgroundColor: 'transparent',
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
borderWidth: 0,
|
||||
padding: 0, // 👈 关键 1：干掉外壳内边距
|
||||
extraCssText: 'box-shadow:none;border-radius:0;', // 👈 关键 2：干掉阴影 & 圆角
|
||||
|
||||
formatter: function (e) {
|
||||
let n = e.name
|
||||
let res = ''
|
||||
|
|
@ -105,76 +108,64 @@ export default {
|
|||
// console.log('🚀 ~ 提示数据 ~ data:', data)
|
||||
if (data.cityName === n) {
|
||||
res =
|
||||
"<div style='width: 330px;height: 285px; background: url(" +
|
||||
"<div style='width: 260px;height: 285px; background: url(" +
|
||||
require('./Map/assets/img/dialog.png') +
|
||||
") no-repeat;background-size:100% 100%;'>" +
|
||||
"<div style='width: 300px;height: 34px;display: flex;align-items: center;text-shadow:0px 3px 6px #001441; padding-left: 30px;font-family: DS-TITLE;color:#FFF;font-size:22px;padding-top: 10px;'>" +
|
||||
"<div style='width: 260px;height: 34px;display: flex;align-items: center;text-shadow:0px 3px 6px #001441; padding-left: 30px;font-family: DS-TITLE;color:#FFF;font-size:22px;padding-top: 10px;'>" +
|
||||
data.deptAbbreviation +
|
||||
'</div>' +
|
||||
"<div style='margin-top:10px;margin-bottom:5px;width: 300px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
|
||||
require('./Map/assets/img/map-item-row.png') +
|
||||
"<div style='margin-top:10px;margin-bottom:5px;width: 260px;height: 25px;display: flex;align-items:center;font-family:Source Han Sans CN;font-size: 16px;color: #666;background: url(" +
|
||||
") no-repeat;background-size:100%;margin-left:20px'>" +
|
||||
"<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
|
||||
'<div>装备价值：' +
|
||||
'</div>' +
|
||||
"<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1);'>" +
|
||||
"<div style='font-family: OPPOSans;margin-left: 10px;color: #666; font-size: 18px'>" +
|
||||
data.totalValue +
|
||||
" <span style='color:#FFF;font-size:14px'> 万元</span>" +
|
||||
" <span style='color:#666;font-size:14px'> 万元</span>" +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
"<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
|
||||
require('./Map/assets/img/map-item-row.png') +
|
||||
"<div style='width: 260px;margin-top:10px;height: 25px;display: flex;align-items:center;font-family:Source Han Sans CN;font-size: 16px;color: #666;background: url(" +
|
||||
") no-repeat;background-size:100%;margin-left:20px'>" +
|
||||
"<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
|
||||
'<div>装备数量：' +
|
||||
'</div>' +
|
||||
"<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
|
||||
"<div style='font-family: OPPOSans;margin-left: 10px;color: #666'; font-size: 18px>" +
|
||||
data.totalEquipmentQuantity +
|
||||
"<span style='color:#FFF;font-size:14px'> 台</span>" +
|
||||
"<span style='color:#666;font-size:14px'> 台</span>" +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
"<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
|
||||
require('./Map/assets/img/map-item-row.png') +
|
||||
"<div style='width: 260px;margin-top:10px;height: 25px;display: flex;align-items:center;font-family:Source Han Sans CN;font-size: 16px;color: #666;background: url(" +
|
||||
") no-repeat;background-size:100%;margin-left:20px'>" +
|
||||
"<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
|
||||
'<div>配置率：' +
|
||||
'</div>' +
|
||||
"<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
|
||||
"<div style='font-family: OPPOSans;margin-left: 10px;color: #666'; font-size: 18px>" +
|
||||
data.configRate +
|
||||
"<span style='color:#FFF;font-size:14px'> %</span>" +
|
||||
"<span style='color:#666;font-size:14px'> %</span>" +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
"<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
|
||||
require('./Map/assets/img/map-item-row.png') +
|
||||
"<div style='width: 260px;margin-top:10px;height: 25px;display: flex;align-items:center;font-family:Source Han Sans CN;font-size: 16px;color: #666;background: url(" +
|
||||
") no-repeat;background-size:100%;margin-left:20px'>" +
|
||||
"<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
|
||||
'<div>线路数量：' +
|
||||
'</div>' +
|
||||
"<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
|
||||
"<div style='font-family: OPPOSans;margin-left: 10px;color: #666'; font-size: 18px>" +
|
||||
data.lineNum +
|
||||
"<span style='color:#FFF;font-size:14px'> 台</span>" +
|
||||
"<span style='color:#666;font-size:14px'> 台</span>" +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
"<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
|
||||
require('./Map/assets/img/map-item-row.png') +
|
||||
"<div style='width: 260px;margin-top:10px;height: 25px;display: flex;align-items:center;font-family:Source Han Sans CN;font-size: 16px;color: #666;background: url(" +
|
||||
") no-repeat;background-size:100%;margin-left:20px'>" +
|
||||
"<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
|
||||
'<div>变电数量：' +
|
||||
'</div>' +
|
||||
"<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
|
||||
"<div style='font-family: OPPOSans;margin-left: 10px;color: #666'; font-size: 18px>" +
|
||||
data.substationNum +
|
||||
"<span style='color:#FFF;font-size:14px'> 台</span>" +
|
||||
"<span style='color:#666;font-size:14px'> 台</span>" +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
"<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
|
||||
require('./Map/assets/img/map-item-row.png') +
|
||||
"<div style='width: 260px;margin-top:10px;height: 25px;display: flex;align-items:center;font-family:Source Han Sans CN;font-size: 16px;color: #666;background: url(" +
|
||||
") no-repeat;background-size:100%;margin-left:20px'>" +
|
||||
"<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
|
||||
'<div>电缆数量：' +
|
||||
'</div>' +
|
||||
"<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
|
||||
"<div style='font-family: OPPOSans;margin-left: 10px;color: #666'; font-size: 18px>" +
|
||||
data.cableNum +
|
||||
"<span style='color:#FFF;font-size:14px'> 台</span>" +
|
||||
"<span style='color:#666;font-size:14px'> 台</span>" +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
|
|
@ -306,41 +297,42 @@ export default {
|
|||
symbol: 'circle',
|
||||
symbolSize: 11,
|
||||
coordinateSystem: 'geo3D',
|
||||
tooltip: { show: false },
|
||||
label: {
|
||||
show: false,
|
||||
position: 'top', // 先指定一个基准位置（如 'top'）
|
||||
offset: [0, -10], // 向上偏移 10px（x 方向 0，y 方向 -10）
|
||||
// position: 'top', // 先指定一个基准位置（如 'top'）
|
||||
// offset: [0, -10], // 向上偏移 10px（x 方向 0，y 方向 -10）
|
||||
// triggerEvent: true,
|
||||
formatter: (params) => {
|
||||
// console.log('🚀 ~ initChart ~ params:', params)
|
||||
const val = params.data.value || []
|
||||
let unit = ''
|
||||
if (this.btnIndex === 1) unit = '万元'
|
||||
else if (this.btnIndex === 2) unit = '台'
|
||||
else if (this.btnIndex === 3) unit = '%'
|
||||
return val.length
|
||||
? `{val|${val[2]} ${unit}}\n{name|${params.data.deptAbbreviation}}`
|
||||
: `{name|${params.data.deptAbbreviation}}`
|
||||
},
|
||||
rich: {
|
||||
val: {
|
||||
backgroundColor: { image: labelBg },
|
||||
height: 28,
|
||||
minWidth: 70,
|
||||
lineHeight: 28,
|
||||
padding: [0, 10],
|
||||
align: 'center',
|
||||
verticalAlign: 'middle',
|
||||
color: '#fff',
|
||||
fontSize: 23,
|
||||
},
|
||||
name: {
|
||||
color: '#fff',
|
||||
fontFamily: 'DS-TITLE',
|
||||
fontSize: 21,
|
||||
padding: [6, 0, 0, 0],
|
||||
},
|
||||
},
|
||||
// formatter: (params) => {
|
||||
// // console.log('🚀 ~ initChart ~ params:', params)
|
||||
// const val = params.data.value || []
|
||||
// let unit = ''
|
||||
// if (this.btnIndex === 1) unit = '万元'
|
||||
// else if (this.btnIndex === 2) unit = '台'
|
||||
// else if (this.btnIndex === 3) unit = '%'
|
||||
// return val.length
|
||||
// ? `{val|${val[2]} ${unit}}\n{name|${params.data.deptAbbreviation}}`
|
||||
// : `{name|${params.data.deptAbbreviation}}`
|
||||
// },
|
||||
// rich: {
|
||||
// val: {
|
||||
// backgroundColor: { image: labelBg },
|
||||
// height: 28,
|
||||
// minWidth: 70,
|
||||
// lineHeight: 28,
|
||||
// padding: [0, 10],
|
||||
// align: 'center',
|
||||
// verticalAlign: 'middle',
|
||||
// color: '#fff',
|
||||
// fontSize: 23,
|
||||
// },
|
||||
// name: {
|
||||
// color: '#fff',
|
||||
// fontFamily: 'DS-TITLE',
|
||||
// fontSize: 21,
|
||||
// padding: [6, 0, 0, 0],
|
||||
// },
|
||||
// },
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(217, 94, 0, 1)',
|
||||
|
|
|
|||
|
|
@ -34,10 +34,10 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="bottom-box">
|
||||
<div class="bt-1">
|
||||
<div class="bt-1" @click="openDialogEquip(1)">
|
||||
<Gauge :value="proportion" />
|
||||
</div>
|
||||
<div class="bt-2">
|
||||
<div class="bt-2" @click="openDialogEquip(2)">
|
||||
<div class="img-box">
|
||||
<img src="@/assets/images/top3-4.png" flt="contain" alt="" />
|
||||
</div>
|
||||
|
|
@ -48,6 +48,8 @@
|
|||
<div class="name">周转率</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<EquipItemMore ref="equipItemMore" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -55,12 +57,14 @@
|
|||
import TitleBox from '../TitleBox'
|
||||
import Gauge from './Gauge'
|
||||
import { getProjectEquipmentApi } from '@/api/wsScreen'
|
||||
import EquipItemMore from '@/views/home/components/provincial/Dialog/EquipItemMore.vue'
|
||||
|
||||
export default {
|
||||
name: 'Top3',
|
||||
components: {
|
||||
TitleBox,
|
||||
Gauge,
|
||||
EquipItemMore,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -90,6 +94,9 @@ export default {
|
|||
handleMore() {
|
||||
console.log('🚀 ~ methods.handleMore:')
|
||||
},
|
||||
openDialogEquip(type) {
|
||||
this.$refs.equipItemMore.openDialog(type)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -146,6 +153,10 @@ export default {
|
|||
height: 203px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.bt-1,
|
||||
.bt-2 {
|
||||
cursor: pointer;
|
||||
}
|
||||
.img-box {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,218 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
:title="isEdit ? '编辑' : '新增'"
|
||||
:visible.sync="dialogVisible"
|
||||
width="70%"
|
||||
append-to-body
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
||||
<el-form-item label="字段编码" prop="fieldCode">
|
||||
<el-input v-model="form.fieldCode" placeholder="请输入字段编码" maxlength="20" :disabled="form.isSystem=='1'" />
|
||||
</el-form-item>
|
||||
<el-form-item label="字段名称" prop="fieldName">
|
||||
<el-input v-model="form.fieldName" placeholder="请输入字段名称" maxlength="20" :disabled="form.isSystem=='1'" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="字段类型" prop="fieldType">
|
||||
<el-select v-model="form.fieldType " placeholder="请选择字段类型" style="width: 100%" :disabled="form.isSystem=='1'">
|
||||
<el-option label="输入框" value="INPUT" />
|
||||
<el-option label="时间框" value="DATE" />
|
||||
<el-option label="选择框" value="SELECT" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="预定义值" prop="fieldValue" v-if="form.fieldType == 'SELECT'" >
|
||||
<el-input
|
||||
v-model="form.fieldValue"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入预定义选项，用逗号分隔（仅下拉选择/多选类型需要）"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
:disabled="form.isSystem=='1'"
|
||||
/>
|
||||
<div class="form-tip">多个选项用逗号分隔，例如：选项1,选项2,选项3</div>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="是否必填" prop="isRequired">
|
||||
<el-radio-group v-model="form.isRequired">
|
||||
<el-radio label="1">必填</el-radio>
|
||||
<el-radio label="0">选填</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status" :disabled="form.isSystem=='1'">
|
||||
<el-radio label="1">启用</el-radio>
|
||||
<el-radio label="0">停用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
||||
</span>
|
||||
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addProcess, updateProcess, getProcessDetail } from '@/api/system/ledger'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'LedgerDialog',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
processData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
isEdit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
nodeDialogVisible: false,
|
||||
currentNode: {},
|
||||
currentNodeIndex: -1,
|
||||
form: {
|
||||
id: '',
|
||||
fieldCode: '',
|
||||
fieldName: '',
|
||||
fieldType: '',
|
||||
fieldValue: '',
|
||||
isRequired: '1',
|
||||
status: '1',
|
||||
isSystem:'0'
|
||||
},
|
||||
rules: {
|
||||
fieldCode: [{ required: true, message: '请输入字段编码', trigger: 'blur' }],
|
||||
fieldName: [{ required: true, message: '请输入字段名称', trigger: 'blur' }],
|
||||
fieldType: [{ required: true, message: '请选择字段类型', trigger: 'blur' }],
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(val) {
|
||||
this.dialogVisible = val
|
||||
if (val && this.isEdit) {
|
||||
this.loadProcessDetail()
|
||||
} else if (val) {
|
||||
this.form = {
|
||||
id: '',
|
||||
fieldCode: '',
|
||||
fieldName: '',
|
||||
fieldType: '',
|
||||
fieldValue: '',
|
||||
isRequired: '1',
|
||||
status: '1',
|
||||
isSystem:'0'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadProcessDetail() {
|
||||
getProcessDetail(this.processData.id).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.form = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
handleAddNode() {
|
||||
this.currentNode = {
|
||||
nodeOrder: this.form.nodeList.length + 1,
|
||||
nodeName: '',
|
||||
approverType: '1',
|
||||
approverIds: '',
|
||||
approveMode: '1',
|
||||
autoPass: '0'
|
||||
}
|
||||
this.currentNodeIndex = -1
|
||||
this.nodeDialogVisible = true
|
||||
},
|
||||
handleEditNode(index) {
|
||||
this.currentNode = JSON.parse(JSON.stringify(this.form.nodeList[index]))
|
||||
this.currentNodeIndex = index
|
||||
this.nodeDialogVisible = true
|
||||
},
|
||||
handleDeleteNode(index) {
|
||||
this.$confirm('确定删除该节点吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.form.nodeList.splice(index, 1)
|
||||
this.$message.success('删除成功')
|
||||
}).catch(() => {})
|
||||
},
|
||||
handleNodeSuccess(node) {
|
||||
if (this.currentNodeIndex === -1) {
|
||||
this.form.nodeList.push(node)
|
||||
} else {
|
||||
this.$set(this.form.nodeList, this.currentNodeIndex, node)
|
||||
}
|
||||
this.nodeDialogVisible = false
|
||||
},
|
||||
handleSubmit() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (!valid) return
|
||||
|
||||
if (this.form.fieldType == 'SELECT' && !this.form.fieldValue) {
|
||||
this.$message.warning('下拉选择必须设置预定义选项')
|
||||
return
|
||||
}
|
||||
|
||||
if(this.form.fieldType != 'SELECT'){
|
||||
this.form.fieldValue = ''
|
||||
}
|
||||
|
||||
const submitFn = this.isEdit ? updateProcess : addProcess
|
||||
submitFn(this.form).then(() => {
|
||||
this.$message.success(this.isEdit ? '编辑成功' : '新增成功')
|
||||
this.$emit('success')
|
||||
})
|
||||
})
|
||||
},
|
||||
handleClose() {
|
||||
this.$emit('update:visible', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.el-button--text{
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #2CBAB2;
|
||||
line-height: 22px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.el-button--primary{
|
||||
background-color: #2CBAB2;
|
||||
border-color: #2CBAB2;
|
||||
}
|
||||
|
||||
::v-deep .el-button--primary{
|
||||
background-color: #2CBAB2;
|
||||
border-color: #2CBAB2;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,220 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
title="查看"
|
||||
:visible.sync="dialogVisible"
|
||||
width="70%"
|
||||
append-to-body
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
||||
<el-form-item label="字段编码" prop="fieldCode">
|
||||
<el-input v-model="form.fieldCode" placeholder="请输入字段编码" maxlength="20" />
|
||||
</el-form-item>
|
||||
<el-form-item label="字段名称" prop="fieldName">
|
||||
<el-input v-model="form.fieldName" placeholder="请输入字段名称" maxlength="20" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="字段类型" prop="fieldType">
|
||||
<el-select v-model="form.fieldType " placeholder="请选择字段类型" :disabled="isEdit" style="width: 100%">
|
||||
<el-option label="输入框" value="INPUT" />
|
||||
<el-option label="时间框" value="DATE" />
|
||||
<el-option label="选择框" value="SELECT" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="预定义值" prop="fieldValue" v-if="form.fieldType == 'SELECT'">
|
||||
<el-input
|
||||
v-model="form.fieldValue"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入预定义选项，用逗号分隔（仅下拉选择/多选类型需要）"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
/>
|
||||
<div class="form-tip">多个选项用逗号分隔，例如：选项1,选项2,选项3</div>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="是否必填" prop="isRequired">
|
||||
<el-radio-group v-model="form.isRequired">
|
||||
<el-radio label="1">必填</el-radio>
|
||||
<el-radio label="0">选填</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio label="1">启用</el-radio>
|
||||
<el-radio label="0">停用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="是否系统内置字段" prop="isSystem">
|
||||
<el-radio-group v-model="form.isSystem">
|
||||
<el-radio label="1">是</el-radio>
|
||||
<el-radio label="0">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<!-- <el-button type="primary" @click="handleSubmit">确定</el-button>-->
|
||||
</span>
|
||||
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addProcess, updateProcess, getProcessDetail } from '@/api/system/ledger'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'Detail',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
processData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
isEdit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
nodeDialogVisible: false,
|
||||
currentNode: {},
|
||||
currentNodeIndex: -1,
|
||||
form: {
|
||||
id: '',
|
||||
fieldCode: '',
|
||||
fieldName: '',
|
||||
fieldType: '',
|
||||
fieldValue: '',
|
||||
isRequired: '1',
|
||||
status: '1',
|
||||
isSystem:'0'
|
||||
},
|
||||
rules: {
|
||||
fieldCode: [{ required: true, message: '请输入字段编码', trigger: 'blur' }],
|
||||
fieldName: [{ required: true, message: '请输入字段名称', trigger: 'blur' }],
|
||||
fieldType: [{ required: true, message: '请选择字段类型', trigger: 'blur' }],
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(val) {
|
||||
this.dialogVisible = val
|
||||
if (val && this.isEdit) {
|
||||
this.loadProcessDetail()
|
||||
} else if (val) {
|
||||
this.form = {
|
||||
id: '',
|
||||
fieldCode: '',
|
||||
fieldName: '',
|
||||
fieldType: '',
|
||||
fieldValue: '',
|
||||
isRequired: '1',
|
||||
status: '1',
|
||||
isSystem:'0'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadProcessDetail() {
|
||||
getProcessDetail(this.processData.id).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.form = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
handleAddNode() {
|
||||
this.currentNode = {
|
||||
nodeOrder: this.form.nodeList.length + 1,
|
||||
nodeName: '',
|
||||
approverType: '1',
|
||||
approverIds: '',
|
||||
approveMode: '1',
|
||||
autoPass: '0'
|
||||
}
|
||||
this.currentNodeIndex = -1
|
||||
this.nodeDialogVisible = true
|
||||
},
|
||||
handleEditNode(index) {
|
||||
this.currentNode = JSON.parse(JSON.stringify(this.form.nodeList[index]))
|
||||
this.currentNodeIndex = index
|
||||
this.nodeDialogVisible = true
|
||||
},
|
||||
handleDeleteNode(index) {
|
||||
this.$confirm('确定删除该节点吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.form.nodeList.splice(index, 1)
|
||||
this.$message.success('删除成功')
|
||||
}).catch(() => {})
|
||||
},
|
||||
handleNodeSuccess(node) {
|
||||
if (this.currentNodeIndex === -1) {
|
||||
this.form.nodeList.push(node)
|
||||
} else {
|
||||
this.$set(this.form.nodeList, this.currentNodeIndex, node)
|
||||
}
|
||||
this.nodeDialogVisible = false
|
||||
},
|
||||
handleSubmit() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (!valid) return
|
||||
|
||||
if (this.form.fieldType == 'SELECT' && !this.form.fieldValue.trim()) {
|
||||
this.$message.warning('下拉选择必须设置预定义选项')
|
||||
return
|
||||
}
|
||||
|
||||
const submitFn = this.isEdit ? updateProcess : addProcess
|
||||
submitFn(this.form).then(() => {
|
||||
this.$message.success(this.isEdit ? '编辑成功' : '新增成功')
|
||||
this.$emit('success')
|
||||
})
|
||||
})
|
||||
},
|
||||
handleClose() {
|
||||
this.$emit('update:visible', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.el-button--text{
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #2CBAB2;
|
||||
line-height: 22px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.el-button--primary{
|
||||
background-color: #2CBAB2;
|
||||
border-color: #2CBAB2;
|
||||
}
|
||||
|
||||
::v-deep .el-button--primary{
|
||||
background-color: #2CBAB2;
|
||||
border-color: #2CBAB2;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,293 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索表单 -->
|
||||
<el-card class="box-card" style="margin-bottom: 20px">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
|
||||
<el-form-item label="字段名称" prop="fieldName">
|
||||
<el-input v-model="queryParams.fieldName" placeholder="请输入字段名称" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态" prop="status" label-width="50px">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable >
|
||||
<el-option label="启用" value="1" />
|
||||
<el-option label="停用" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="float:right">
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery" size="mini">查询</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery" size="mini">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 流程列表 -->
|
||||
<el-card class="content-box">
|
||||
<!-- 操作按钮 -->
|
||||
<el-row style="float:right;margin-bottom: 10px;text-align: right;">
|
||||
<el-button type="primary" size="small" @click="handleAdd">新增</el-button>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableList"
|
||||
border
|
||||
stripe
|
||||
class="my-table"
|
||||
>
|
||||
<el-table-column align="center" label="序号" type="index" width="60"/>
|
||||
<el-table-column prop="fieldCode" align="center" label="字段编码" min-width="100" />
|
||||
<el-table-column prop="fieldName" align="center" label="字段名称" min-width="100" />
|
||||
<el-table-column prop="fieldValue" align="center" label="字段绑定值" min-width="100" show-overflow-tooltip />
|
||||
<el-table-column prop="fieldType" align="center" label="字段类型" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ getBusinessTypeLabel(scope.row.fieldType) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="isRequired" align="center" label="是否必填" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.isRequired == '1' ? 'success' : 'danger'">
|
||||
{{ scope.row.isRequired == '1' ? '必填' : '不必填' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="status" align="center" label="状态" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status == '1' ? 'success' : 'danger'">
|
||||
{{ scope.row.status == '1' ? '启用' : '停用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" align="center" label="创建时间" width="180" />
|
||||
<el-table-column align="center" label="操作" width="160" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button type="text" @click="handleView(scope.row)">查看</el-button>
|
||||
<el-button type="text" @click="handleDeleteOne(scope.row)" style="color: #FF5129;" v-if="scope.row.isSystem=='0' ">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
:current-page="queryParams.pageNum"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="queryParams.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@size-change="handlePageSizeChange"
|
||||
@current-change="handlePageChange"
|
||||
style="margin-top: 20px; text-align: right"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<!-- 编辑/新增对话框 -->
|
||||
<ledger-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
:process-data="currentProcess"
|
||||
:is-edit="isEdit"
|
||||
@success="handleDialogSuccess"
|
||||
/>
|
||||
|
||||
<!-- 查看对话框 -->
|
||||
<detail
|
||||
:visible.sync="dialogVisibleDetail"
|
||||
:process-data="currentProcess"
|
||||
:is-edit="isEdit"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getProcessList, deleteProcess } from '@/api/system/ledger'
|
||||
import LedgerDialog from './components/LedgerDialog'
|
||||
import Detail from './detail'
|
||||
|
||||
export default {
|
||||
name: 'Ledger',
|
||||
components: {
|
||||
LedgerDialog,Detail
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
tableList: [],
|
||||
total: 0,
|
||||
multipleSelection: [],
|
||||
dialogVisible: false,
|
||||
dialogVisibleDetail: false,
|
||||
isEdit: false,
|
||||
currentProcess: {},
|
||||
queryParams: {
|
||||
fieldName: '',
|
||||
status: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.loading = true
|
||||
getProcessList(this.queryParams)
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
this.tableList = res.rows || []
|
||||
this.total = res.total || 0
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
resetQuery() {
|
||||
this.queryParams = {
|
||||
fieldName: '',
|
||||
status: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
handlePageChange(pageNum) {
|
||||
this.queryParams.pageNum = pageNum
|
||||
this.getList()
|
||||
},
|
||||
handlePageSizeChange(pageSize) {
|
||||
this.queryParams.pageSize = pageSize
|
||||
this.getList()
|
||||
},
|
||||
handleSelectionChange(selection) {
|
||||
this.multipleSelection = selection
|
||||
},
|
||||
handleAdd() {
|
||||
this.isEdit = false
|
||||
this.currentProcess = {}
|
||||
this.dialogVisible = true
|
||||
},
|
||||
handleEdit(row) {
|
||||
this.isEdit = true
|
||||
this.currentProcess = JSON.parse(JSON.stringify(row))
|
||||
this.dialogVisible = true
|
||||
},
|
||||
handleView(row) {
|
||||
this.currentProcess = JSON.parse(JSON.stringify(row))
|
||||
this.dialogVisibleDetail = true
|
||||
this.isEdit = true
|
||||
},
|
||||
handleDelete() {
|
||||
const ids = this.multipleSelection.map(item => item.id).join(',')
|
||||
this.$confirm('确定删除选中的流程吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteProcess(ids).then(() => {
|
||||
this.$message.success('删除成功')
|
||||
this.getList()
|
||||
})
|
||||
}).catch(() => {})
|
||||
},
|
||||
handleDeleteOne(row) {
|
||||
this.$confirm('确定删除吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteProcess(row.id).then(() => {
|
||||
this.$message.success('删除成功')
|
||||
this.getList()
|
||||
})
|
||||
}).catch(() => {})
|
||||
},
|
||||
handleDialogSuccess() {
|
||||
this.dialogVisible = false
|
||||
this.getList()
|
||||
},
|
||||
getBusinessTypeLabel(type) {
|
||||
const map = {
|
||||
'SELECT': '选择框',
|
||||
'INPUT': '输入框',
|
||||
'DATE': '时间框',
|
||||
}
|
||||
return map[type] || type
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.box-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.content-box {
|
||||
border-radius: 8px;
|
||||
//height: calc(100vh - 240px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
::v-deep .el-card__body {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
height: 100% !important;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-button--primary{
|
||||
background-color: #2CBAB2;
|
||||
border-color: #2CBAB2;
|
||||
}
|
||||
|
||||
.el-button--danger{
|
||||
color: #FFF;
|
||||
background-color: #FF5129;
|
||||
border-color: #FF5129;
|
||||
}
|
||||
|
||||
.el-tag.el-tag--success {
|
||||
// background-color: #f0f9eb;
|
||||
// border-color: #e1f3d8;
|
||||
color: #34E2C7;
|
||||
background-color:rgba(52,226,199,0.1);
|
||||
background: rgba(52,226,199,0.1);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
border: 1px solid #34E2C7;
|
||||
}
|
||||
|
||||
.el-tag.el-tag--danger {
|
||||
color: #FF5129 ;
|
||||
background-color: rgba(255,81,41,0.1);
|
||||
background: rgba(255,81,41,0.1);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
border: 1px solid #FF5129;
|
||||
}
|
||||
|
||||
.el-button--text{
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #2CBAB2;
|
||||
line-height: 22px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue