bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

大屏

This commit is contained in:
bb_pan 2025-10-16 16:37:41 +08:00
parent 08316be6f2
commit 278a2da67f
10 changed files with 302 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/api/wsScreen/index.js
View File

@ -127,3 +127,57 @@ export const getProListApi = (data = {}) => {
data,
})
}
// 变电装备统计分析-装备年限
export const getStatByTypeAndAgeDetailsApi = (data = {}) => {
return request({
url: '/material-mall/largeScreen/statByTypeAndAgeDetails',
method: 'get',
params: data,
})
}
// 变电装备统计分析-装备价值
export const getStatByTypeAndAgeByEquipmentApi = (data = {}) => {
return request({
url: '/material-mall/largeScreen/statByTypeAndAgeByEquipment',
method: 'get',
params: data,
})
}
// 变电装备统计分析-地市装备
export const getStatByTypeAndAgeByCityApi = (data = {}) => {
return request({
url: '/material-mall/largeScreen/statByTypeAndAgeByCity',
method: 'get',
params: data,
})
}
// 单位装备配置-列表
export const getStatByTypeAndAgeByConfigurationApi = (data = {}) => {
return request({
url: '/material-mall/largeScreen/statByTypeAndAgeByConfiguration',
method: 'get',
params: data,
})
}
// 装备在用率
export const getStatByTypeAndAgeByUsageRateApi = (data = {}) => {
return request({
url: '/material-mall/largeScreen/statByTypeAndAgeByUsageRate',
method: 'get',
params: data,
})
}
// 装备周转率
export const getStatByTypeAndAgeByTurnoverRateApi = (data = {}) => {
return request({
url: '/material-mall/largeScreen/statByTypeAndAgeByTurnoverRate',
method: 'get',
params: data,
})
}

94
src/views/screen/wsScreen/components/left/AllEquip.vue
View File

@ -34,8 +34,8 @@
<el-option v-for="item in deptNameList" :key="item.code" :label="item.name" :value="item.code" />
</el-select>
</el-form-item>
<el-form-item label="产权单位" prop="companyName">
<el-select v-model="queryParams.companyName" placeholder="请选择" clearable style="width: 240px">
<el-form-item label="产权单位" prop="propertyUnit">
<el-select v-model="queryParams.propertyUnit" placeholder="请选择" clearable style="width: 240px">
<el-option
v-for="item in companyNameList"
:key="item.deptId"
@ -44,9 +44,9 @@
/>
</el-select>
</el-form-item>
<el-form-item label="工程专业" prop="proType">
<el-form-item label="专业" prop="major">
<el-select
v-model="queryParams.proType"
v-model="queryParams.major"
placeholder="请选择"
clearable
style="width: 240px"
@ -64,17 +64,17 @@
style="width: 240px"
/>
</el-form-item>
<el-form-item label="装备名称" prop="deviceName">
<el-input v-model="queryParams.deviceName" placeholder="请输入" clearable style="width: 240px" />
<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="devModel">
<el-input v-model="queryParams.devModel" placeholder="请输入" clearable style="width: 240px" />
<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="identifyCode">
<el-input v-model="queryParams.identifyCode" placeholder="请输入" clearable style="width: 240px" />
<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 style="width: 240px">
@ -86,7 +86,7 @@
<el-option
v-for="item in onProjectList"
:key="item.proCode"
:label="item.proName"
:label="item.usingProject"
:value="item.proCode"
/>
</el-select>
@ -108,17 +108,17 @@
style="width: 240px"
/>
</el-form-item>
<el-form-item label="使用年限" prop="workingHours">
<el-select v-model="queryParams.workingHours" placeholder="请选择" clearable style="width: 240px">
<el-form-item label="使用年限" prop="maxServiceLifeYears">
<el-select v-model="queryParams.maxServiceLifeYears" placeholder="请选择" clearable 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="buyPrice">
<el-input v-model="queryParams.buyPrice" placeholder="请输入" clearable style="width: 240px" />
<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="nextCheckTime">
<el-form-item label="下次检测日期" prop="nextMaintenanceDate">
<el-date-picker
v-model="queryParams.nextCheckTime"
v-model="queryParams.nextMaintenanceDate"
type="date"
placeholder="请选择"
clearable
@ -157,7 +157,7 @@
stripe
highlight-current-row
style="width: 100%"
:height="600"
:height="550"
class="table-container"
>
<el-table-column
@ -183,17 +183,17 @@
</template>
</el-table-column>
<!-- 操作 -->
<el-table-column label="操作" align="center" width="130">
<!-- <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-column> -->
</el-table>
<!-- 分页 -->
<pagination
v-show="total > 0"
:total="88"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
@ -218,19 +218,19 @@ export default {
pageNum: 1,
pageSize: 10,
deptName: '', // 装备范围
companyName: '', // 地市公司
deviceName: '', // 装备名称
propertyUnit: '', // 地市公司
name: '', // 装备名称
deviceSeries: '', // 装备系列
code: '', // 装备编号
changeStatus: '', // 装备状态
onProject: '', // 所在项目
purchaseDate: '', // 采购日期
productionDate: '', // 出厂日期
workingHours: '', // 使用年限
companyName: '', // 产权单位
maxServiceLifeYears: '', // 使用年限
propertyUnit: '', // 产权单位
brand: '', // 生产厂家
buyPrice: '', // 资产原值
nextCheckTime: '', // 下次检测日期
originalValue: '', // 资产原值
nextMaintenanceDate: '', // 下次检测日期
featureItem: '', // 特征项
featureValue: '', // 特征值
},
@ -269,26 +269,26 @@ export default {
],
tableColumns: [
{ label: '公司名称', prop: 'companyName' },
{ label: '产权单位', prop: 'companyName' },
{ label: '工程专业', prop: 'proType' },
{ label: '主工序', prop: 'mainGx' },
{ label: '子工序', prop: 'childGx' },
{ label: '装备大类', prop: 'devCategory' },
{ label: '装备小类', prop: 'devSubcategory' },
{ label: '类型分支', prop: 'devName' },
{ label: '装备名称', prop: 'deviceName' },
{ label: '规格型号', prop: 'devModel' },
{ 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: 'unitName' },
{ label: '所在项目', prop: 'proName' },
{ label: '使用到期时间', prop: 'buyPrice' },
{ label: '装备原始编码', prop: 'identifyCode' },
{ label: '计量单位', prop: 'unit' },
{ label: '所在项目', prop: 'usingProject' },
{ label: '使用到期时间', prop: 'expirationTime' },
{ label: '装备原始编码', prop: 'originalCode' },
{ label: '出厂日期', prop: 'productionDate' },
{ label: '生产厂家', prop: 'brand' },
{ label: '资产原值', prop: 'buyPrice' },
{ label: '下次维保日期', prop: 'nextCheckTime' },
{ label: '使用年限', prop: 'workingHours' },
{ label: '生产厂家', prop: 'manufacturer' },
{ label: '资产原值', prop: 'originalValue' },
{ label: '下次维保日期', prop: 'nextMaintenanceDate' },
{ label: '最大使用年限 (年)', prop: 'maxServiceLifeYears' },
{ label: '特征项', prop: 'featureItem' },
{ label: '特征值', prop: 'featureValue' },
],
@ -329,10 +329,12 @@ export default {
},
// 拼接特征项
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(',')
},
// 装备范围
@ -380,7 +382,7 @@ export default {
this.getCompanyNameList(val)
} else {
this.companyNameList = []
this.queryParams.companyName = ''
this.queryParams.propertyUnit = ''
}
},
// 地市公司

38
src/views/screen/wsScreen/components/left/BottomItem.vue
View File

@ -4,18 +4,44 @@
<script>
import * as echarts from 'echarts'
import { getStatByTypeAndAgeByCityApi } from '@/api/wsScreen/index'
export default {
name: 'EChartsCompareBars',
props: {
type: {
type: [String, Number],
default: '',
},
},
data() {
return {
chart: null,
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
seriesA: [120, 200, 150, 80, 70, 110, 130],
seriesB: [90, 160, 100, 60, 50, 80, 95],
categories: [],
seriesA: [],
seriesB: [],
}
},
mounted() {
this.getInfo()
window.addEventListener('resize', this.resize)
},
methods: {
async getInfo() {
try {
const res = await getStatByTypeAndAgeByCityApi({ type: this.type })
console.log('🚀 ~ 地市装备 ~ res:', res)
if (!res.data || res.data.length == 0) return
this.categories = res.data.map((item) => item.name)
this.seriesA = res.data.map((item) => item.useCount)
this.seriesB = res.data.map((item) => item.count)
this.$nextTick(() => {
this.initChart()
})
} catch (error) {
console.log('err', error)
}
},
buildGradient(colorFrom) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colorFrom },
@ -108,10 +134,6 @@ export default {
if (this.chart) this.chart.resize()
},
},
mounted() {
this.initChart()
window.addEventListener('resize', this.resize)
},
beforeDestroy() {
window.removeEventListener('resize', this.resize)
if (this.chart) {
@ -124,7 +146,7 @@ export default {
<style scoped>
.chart-container {
width: 1400px;
width: 100%;
height: 280px;
/* color: #76fbc4; */
}

18
src/views/screen/wsScreen/components/left/EquipItemMore.vue
View File

@ -4,7 +4,7 @@
v-if="dialogVisible"
v-loading="isLoading"
:visible.sync="dialogVisible"
width="36%"
width="60%"
:modal="false"
class="dlg-box"
>
@ -16,19 +16,19 @@
<el-col :span="9" :offset="0">
<div class="left box">
<div class="title" style="margin-bottom: 15px">装备年限</div>
<LeftItem />
<LeftItem :type="type" />
</div>
</el-col>
<el-col :span="15" :offset="0">
<div class="right box">
<div class="title">装备价值</div>
<RightItem />
<RightItem :type="type" />
</div>
</el-col>
<el-col :span="24" :offset="0">
<div class="bottom box">
<div class="title">地市装备</div>
<BottomItem />
<BottomItem :type="type" />
</div>
</el-col>
</el-row>
@ -48,14 +48,18 @@ export default {
return {
isLoading: false,
dialogVisible: false,
type: '',
}
},
created() {},
methods: {
openDialog() {
this.dialogVisible = true
openDialog(type) {
console.log('🚀 ~ openDialog ~ :', type)
this.type = type
setTimeout(() => {
this.dialogVisible = true
}, 100)
},
getList() {},
},
}
</script>

87
src/views/screen/wsScreen/components/left/EquipStatusMore.vue
View File

@ -11,15 +11,10 @@
<div>
<!-- 自定义title -->
<i class="close-btn" @click="dialogVisible = false" />
<div class="dlg-title">全量装备</div>
<div class="dlg-title">装备状态</div>
<!-- 表单 -->
<el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent>
<el-form-item label="施工装备" prop="equip">
<el-select v-model="queryParams.equip" placeholder="请选择" clearable style="width: 240px">
<el-option v-for="item in equipList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 240px">
<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
@ -61,6 +56,18 @@
: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>
@ -78,6 +85,7 @@
</template>
<script>
import { getDeviceListAPI } from '@/api/EquipmentLedger/index.js'
export default {
data() {
return {
@ -87,7 +95,6 @@ export default {
queryParams: {
pageNum: 1,
pageSize: 10,
equip: '', // 施工装备
status: '', // 状态
},
equipList: [
@ -95,34 +102,43 @@ export default {
{ label: '合肥市', value: 2 },
],
statusList: [
{ label: '全网省', value: 1 },
{ label: '合肥市', value: 2 },
{ label: '在库', value: 1 },
{ label: '自用', value: 2 },
{ label: '共享', value: 3 },
{ label: '退役', value: 4 },
{ label: '维修', value: 5 },
],
tableColumns: [
{ label: '施工装备', prop: 'equip' },
{ label: '型号', prop: 'equipType' },
{ label: '数量', prop: 'equipNum' },
{ label: '设备编码', prop: 'equipCode' },
{ label: '特征项1', prop: 'feature1' },
{ label: '施工装备', prop: 'major' },
{ label: '型号', prop: 'specificationModel' },
{ label: '数量', prop: 'count' },
{ label: '设备编码', prop: 'code' },
{ label: '特征项1', prop: 'featureItem1' },
{ label: '特征值1', prop: 'featureValue1' },
{ label: '特征项1', prop: 'feature1' },
{ label: '特征项1', prop: 'featureItem2' },
{ label: '特征值2', prop: 'featureValue2' },
{ label: '特征项2', prop: 'feature2' },
{ label: '特征项2', prop: 'featureItem3' },
{ label: '特征值3', prop: 'featureValue3' },
{ label: '特征项4', prop: 'feature4' },
{ label: '特征项4', prop: 'featureItem4' },
{ label: '特征值4', prop: 'featureValue4' },
{ label: '特征项5', prop: 'feature5' },
{ label: '特征项5', prop: 'featureItem5' },
{ label: '特征值5', prop: 'featureValue5' },
{ label: '特征项6', prop: 'feature6' },
{ 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: 'unitPrice' },
{ label: '资产原值（元）', prop: 'originalValue' },
{ label: '出厂日期', prop: 'productionDate' },
{ label: '所在项目', prop: 'usefulLife' },
{ label: 'vlook的状态', prop: 'vlookStatus' },
{ label: '使用项目', prop: 'usingProject' },
// { label: 'vlook的状态', prop: 'vlookStatus' },
{ label: '状态', prop: 'status' },
{ label: '下次检验日期', prop: 'nextCheckDate' },
{ label: '下次维保日期', prop: 'nextMaintenanceDate' },
{ label: '生产厂家', prop: 'manufacturer' },
],
tableList: [],
@ -133,8 +149,31 @@ export default {
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
},
getList() {},
// 查询
handleQuery() {
this.queryParams.pageNum = 1

50
src/views/screen/wsScreen/components/left/LeftItem.vue
View File

@ -8,7 +8,7 @@
</div>
<div class="left-item">
<div class="left-tip">装备价值 <span>（亿元）</span></div>
<div class="number">{{ query.price || 0 }}</div>
<div class="number">{{ (query.price / 100000000).toFixed(4) || 0 }}</div>
</div>
</div>
<div>
@ -22,40 +22,26 @@
<script>
import * as echarts from 'echarts'
import { getStatByTypeAndAgeDetailsApi } from '@/api/wsScreen'
export default {
props: {
title: {
type: String,
type: {
type: [String, Number],
default: '',
},
state: {
type: Object,
default: () => {
return {
num: 0,
price: 0,
}
},
},
// pieValues: {
// type: Array,
// default: () => [], // 只有 value
// },
},
data() {
return {
query: {},
query: {
num: 0,
price: 0,
},
pieValues: [121, 222, 333]
}
},
mounted() {
console.log('🚀 ~ mounted ~ this.state:', this.state)
console.log('state-->', this.pieValues)
setTimeout(() => {
this.query = this.state
this.initPieChart()
}, 300)
this.getInfo()
},
computed: {
pieData() {
@ -68,6 +54,24 @@ export default {
},
},
methods: {
async getInfo() {
try {
console.log('🚀 ~ 装备年限 ~ res:', this.type)
const res = await getStatByTypeAndAgeDetailsApi({ type: this.type })
if (!res.data) return
this.query.num = res.data[0].num
this.query.price = res.data[0].price || 0
this.pieValues[0] = res.data[0].five
this.pieValues[1] = res.data[0].fiveOrTen
this.pieValues[2] = res.data[0].ten
this.$nextTick(() => {
this.initPieChart()
})
console.log('🚀 ~ getInfo ~ res:', res)
} catch (error) {
console.log('🚀 ~ getInfo ~ error:', error)
}
},
initPieChart() {
const chartDom = this.$refs.pieChart
// console.log('🚀 ~ initPieChart ~ chartDom:', chartDom)

21
src/views/screen/wsScreen/components/left/RightItem.vue
View File

@ -6,27 +6,33 @@
<script>
import * as echarts from 'echarts'
import { getEquipmentStatusApi } from '@/api/wsScreen/index'
import { getStatByTypeAndAgeByEquipmentApi } from '@/api/wsScreen/index'
export default {
props: {
type: {
type: [String, Number],
default: '',
},
},
data() {
return {
chartData: [],
}
},
mounted() {
this.getList()
this.getInfo()
},
methods: {
async getList() {
async getInfo() {
try {
const res = await getEquipmentStatusApi()
const res = await getStatByTypeAndAgeByEquipmentApi({ type: this.type })
console.log('🚀 ~ 装备状态 ~ res:', res)
if (!res.data) return
this.chartData = res.data.map((item) => {
return {
...item,
value: item.num,
value: item.price,
}
})
this.$nextTick(() => {
@ -97,8 +103,7 @@ export default {
fontSize: 12,
color: '#ccc',
formatter: (params) => {
const proportion = this.chartData[params.dataIndex].proportion
return `${params.value}/${proportion}%`
return `${params.value}`
},
},
data: yData,
@ -138,7 +143,7 @@ export default {
<style lang="scss" scoped>
.chart-container {
width: 700px; /* 宽度 */
width: 1500px; /* 宽度 */
height: 209px; /* 高度 */
margin: 0 auto;
}

31
src/views/screen/wsScreen/components/left/UnitEquipConfig.vue
View File

@ -37,8 +37,8 @@
:prop="column.prop"
align="center"
>
<template v-slot="{ row }" v-if="column.prop === 'equipPrice'">
<span>{{ (row.equipPrice / 100000000).toFixed(4) }}</span>
<template v-slot="{ row }" v-if="column.prop === 'price'">
<span>{{ row.price ? (row.price / 100000000).toFixed(4) : 0 }}</span>
</template>
</el-table-column>
</el-table>
@ -57,6 +57,8 @@
</template>
<script>
import { getStatByTypeAndAgeByConfigurationApi } from '@/api/wsScreen'
export default {
data() {
return {
@ -67,12 +69,12 @@ export default {
pageSize: 10,
},
tableColumns: [
{ label: '单位名称', prop: 'unitName' },
{ label: '装备价值（亿元）', prop: 'equipPrice' },
{ label: '装备数量', prop: 'equipNum' },
{ label: '线路数量（台）', prop: 'lineNum' },
{ label: '变电数量（台）', prop: 'subStationNum' },
{ label: '电缆数量（台）', prop: 'cableNum' },
{ 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' },
@ -86,8 +88,17 @@ export default {
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)
}
},
getList() {},
},
}
</script>
@ -100,8 +111,6 @@ export default {
::v-deep .el-dialog .el-dialog__body {
background-image: url('../../img/unit-config-dialog.png');
background-size: 100% 100%;
// 以宽度为准
background-size: 100% auto;
color: #fff;
}
::v-deep .el-dialog__header {

10
src/views/screen/wsScreen/components/left/index.vue
View File

@ -16,13 +16,13 @@
<div class="item-box">
<el-row :gutter="20">
<el-col :span="8" :offset="0">
<EquipItem title="线路装备" :state="state1" :pieValues="list1" @openDialog="openEquipItemMore" />
<EquipItem title="线路装备" :state="state1" :pieValues="list1" @openDialog="openEquipItemMore(5474)" />
</el-col>
<el-col :span="8" :offset="0">
<EquipItem title="变电装备" :state="state2" :pieValues="list2" @openDialog="openEquipItemMore" />
<EquipItem title="变电装备" :state="state2" :pieValues="list2" @openDialog="openEquipItemMore(5080)" />
</el-col>
<el-col :span="8" :offset="0">
<EquipItem title="电缆装备" :state="state3" :pieValues="list3" @openDialog="openEquipItemMore" />
<EquipItem title="电缆装备" :state="state3" :pieValues="list3" @openDialog="openEquipItemMore(5010)" />
</el-col>
</el-row>
</div>
@ -201,8 +201,8 @@ export default {
openSystemEquip() {
this.$refs.systemEquip.openDialog()
},
openEquipItemMore() {
this.$refs.equipItemMore.openDialog()
openEquipItemMore(type) {
this.$refs.equipItemMore.openDialog(type)
},
openRemarkMore() {
this.$refs.remarkMore.openDialog()

39
src/views/screen/wsScreen/components/right/EquipItemMore.vue
View File

@ -21,6 +21,7 @@
<script>
import * as echarts from 'echarts'
import { getStatByTypeAndAgeByUsageRateApi, getStatByTypeAndAgeByTurnoverRateApi } from '@/api/wsScreen'
export default {
// props: {
@ -39,6 +40,10 @@ export default {
dialogVisible: false,
title: '',
unit: '',
categories: [],
line: [], // 线路
substation: [], // 变电
cable: [], // 电缆
}
},
methods: {
@ -51,9 +56,27 @@ export default {
this.unit = '次'
}
this.dialogVisible = true
this.$nextTick(() => {
this.initLineChart()
})
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
@ -61,12 +84,12 @@ export default {
const myChart = echarts.init(chartDom)
const categories = ['2020', '2021', '2022', '2023', '2024', '2025']
const categories = this.categories
// 三条折线的假数据
const data1 = Array.from({ length: 6 }, () => Math.floor(Math.random() * 1000 + 500))
const data2 = Array.from({ length: 6 }, () => Math.floor(Math.random() * 800 + 300))
const data3 = Array.from({ length: 6 }, () => Math.floor(Math.random() * 600 + 200))
const data1 = this.line
const data2 = this.substation
const data3 = this.cable
const option = {
tooltip: {
@ -157,7 +180,7 @@ export default {
::v-deep .el-dialog .el-dialog__body {
background-image: url('../../img/right-dialog.png');
background-size: 100% auto;
background-size: 100% 100%;
color: #fff;
}
::v-deep .el-dialog__header {