首页优化
This commit is contained in:
parent
e014815b65
commit
825ec9d58a
|
|
@ -42,10 +42,11 @@ export const getProjectEquipmentApi = () => {
|
|||
}
|
||||
|
||||
// 各单位装备在用率情况
|
||||
export const getDeptEquipmentApi = () => {
|
||||
export const getDeptEquipmentApi = (data) => {
|
||||
return request({
|
||||
url: '/material-mall/provinceScreen/getDeptEquipment',
|
||||
method: 'get',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 560 B After Width: | Height: | Size: 619 B |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
|
|
@ -218,7 +218,7 @@ export default {
|
|||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
right: '3%',
|
||||
left: '41%',
|
||||
top: 'center',
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@ export default {
|
|||
.center-1,
|
||||
.center-2 {
|
||||
width: 928px;
|
||||
height: 390px;
|
||||
height: 405px;
|
||||
padding: 24px;
|
||||
background: rgba(255, 255, 255, 0.91);
|
||||
border-radius: 5px;
|
||||
|
|
|
|||
|
|
@ -2,12 +2,16 @@
|
|||
<div>
|
||||
<div class="title-box">
|
||||
<div class="title-text">
|
||||
{{ titleText }}
|
||||
<span>{{ titleText }}</span>
|
||||
<div v-if="showTab" class="tabs">
|
||||
<span class="tab" :class="{ active: active == 1 }" @click="handleActive(1)">在用率</span>
|
||||
<span class="tab" :class="{ active: active == 2 }" @click="handleActive(2)">周转率</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="title-more" @click="handleMore">
|
||||
<span class="more-text">更多</span>
|
||||
<img src="@/assets/images/more.png" style="width: 14px; height: 14px" alt="" />
|
||||
<img src="@/assets/images/more.png" style="width: 16px; height: 16px" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -20,14 +24,24 @@ export default {
|
|||
type: String,
|
||||
default: '',
|
||||
},
|
||||
showTab: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
active: 1,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleMore() {
|
||||
this.$emit('handleMore')
|
||||
},
|
||||
handleActive(index) {
|
||||
this.active = index
|
||||
this.$emit('handleTab', index)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -43,9 +57,10 @@ export default {
|
|||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
// align-items: flex-start;
|
||||
}
|
||||
|
||||
|
||||
.title-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -67,4 +82,22 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
.tabs {
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.tab {
|
||||
cursor: pointer;
|
||||
margin-right: 15px;
|
||||
height: 18px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #3f3f3f;
|
||||
|
||||
&.active {
|
||||
color: #2cbab2;
|
||||
border-bottom: 2px solid #2cbab2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<TitleBox titleText="各单位在用率情况" @handleMore="handleMore" />
|
||||
<TitleBox titleText="各单位在用率情况" @handleMore="handleMore" :showTab="true" @handleTab="handleTab" />
|
||||
<div>
|
||||
<table cellspacing="0" cellpadding="8" style="width: 100%; text-align: center">
|
||||
<!-- 双层表头 -->
|
||||
|
|
@ -9,8 +9,8 @@
|
|||
<tr>
|
||||
<th>排名</th>
|
||||
<th>单位名称</th>
|
||||
<th>在用率</th>
|
||||
<th>周转率</th>
|
||||
<th v-if="showTab == 1" @click="handleSort(1)">在用率<i class="el-icon-sort" style="color: #2cbab2" /></th>
|
||||
<th v-if="showTab == 2" @click="handleSort(2)">周转率<i class="el-icon-sort" style="color: #2cbab2" /></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
|
|
@ -32,8 +32,8 @@
|
|||
</el-tooltip>
|
||||
</td>
|
||||
|
||||
<td class="num">{{ row.proportion }}%</td>
|
||||
<td>
|
||||
<td v-if="showTab == 1" class="num">{{ row.proportion }}%</td>
|
||||
<td v-if="showTab == 2">
|
||||
<span class="num">{{ row.turnoverRate }}</span> <span style="font-size: 14px">次/年</span></td
|
||||
>
|
||||
</tr>
|
||||
|
|
@ -60,15 +60,26 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
showTab: 1,
|
||||
sort1: 'proportion_asc',
|
||||
sort2: 'turnoverRate_asc',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleSort(tab) {
|
||||
if (tab === 1) {
|
||||
this.sort1 = this.sort1 === 'proportion_asc' ? 'proportion_desc' : 'proportion_asc'
|
||||
} else {
|
||||
this.sort2 = this.sort2 === 'turnoverRate_asc' ? 'turnoverRate_desc' : 'turnoverRate_asc'
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
async getList() {
|
||||
try {
|
||||
const res = await getDeptEquipmentApi()
|
||||
const res = await getDeptEquipmentApi({ sort: this.showTab === 1 ? this.sort1 : this.sort2 })
|
||||
console.log('🚀 ~ 各单位装备在用率情况 ~ res:', res)
|
||||
this.tableData = res.data || []
|
||||
if (this.tableData.length > 5) {
|
||||
|
|
@ -115,6 +126,9 @@ export default {
|
|||
handleMore() {
|
||||
this.$refs.usageRateMore.openDialog()
|
||||
},
|
||||
handleTab(tab) {
|
||||
this.showTab = tab
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<TitleBox titleText="装备在用率统计" @handleMore="handleMore" />
|
||||
<TitleBox titleText="装备在用率统计" @handleMore="handleMore" :showTab="true" @handleTab="handleTab" />
|
||||
|
||||
<div class="topView">
|
||||
<div style="height: 100%; display: flex; align-items: center; justify-content: space-between">
|
||||
<div class="tabs">
|
||||
<div class="topTab" :class="{ active: tabIndex == 0 }" @click="changTab(0)">总体</div>
|
||||
<div class="topTab" :class="{ active: tabIndex == 1 }" @click="changTab(1)">线路</div>
|
||||
<div class="topTab" :class="{ active: tabIndex == 2 }" @click="changTab(2)">变电</div>
|
||||
|
|
@ -15,10 +15,11 @@
|
|||
<div class="bottom-box">
|
||||
<div class="bottom-item" v-for="(item, index) in tableList" :key="index">
|
||||
<div class="item-top-title">
|
||||
<img v-if="index == 0" src="@/assets/images/nb-1.png" style="width: 27px; height: 31px" alt="" />
|
||||
<img v-if="index == 1" src="@/assets/images/nb-2.png" style="width: 27px; height: 31px" alt="" />
|
||||
<img v-if="index == 2" src="@/assets/images/nb-3.png" style="width: 27px; height: 31px" alt="" />
|
||||
<img v-if="index == 3" src="@/assets/images/nb-4.png" style="width: 27px; height: 31px" alt="" />
|
||||
<img v-if="index == 0" src="@/assets/images/hgnb-1.png" style="width: 27px; height: 31px" alt="" />
|
||||
<img v-if="index == 1" src="@/assets/images/hgnb-2.png" style="width: 27px; height: 31px" alt="" />
|
||||
<img v-if="index == 2" src="@/assets/images/hgnb-3.png" style="width: 27px; height: 31px" alt="" />
|
||||
<img v-if="index == 3" src="@/assets/images/hgnb-4.png" style="width: 27px; height: 31px" alt="" />
|
||||
<img v-if="index == 4" src="@/assets/images/hgnb-5.png" style="width: 27px; height: 31px" alt="" />
|
||||
<span>{{ item.name || '-' }}</span>
|
||||
</div>
|
||||
<div class="img-box">
|
||||
|
|
@ -26,14 +27,15 @@
|
|||
<img v-if="index == 1" src="@/assets/images/nb-img-2.png" flt="contain" alt="" />
|
||||
<img v-if="index == 2" src="@/assets/images/nb-img-3.png" flt="contain" alt="" />
|
||||
<img v-if="index == 3" src="@/assets/images/nb-img-4.png" flt="contain" alt="" />
|
||||
<img v-if="index == 4" src="@/assets/images/nb-img-5.png" flt="contain" alt="" />
|
||||
</div>
|
||||
<div class="bt-content">
|
||||
<div class="bt-content-item">
|
||||
<div class="bt-content-item" v-if="showTab == 1">
|
||||
<span class="dot"></span>
|
||||
<span style="margin-right: 10px">在用率</span>
|
||||
<span class="num">{{ item.proportion || 0 }}%</span>
|
||||
</div>
|
||||
<div class="bt-content-item">
|
||||
<div class="bt-content-item" v-if="showTab == 2">
|
||||
<span class="dot"></span>
|
||||
<span style="margin-right: 10px">周转率</span>
|
||||
<span class="num"
|
||||
|
|
@ -58,12 +60,13 @@ export default {
|
|||
name: 'Bottom2',
|
||||
components: {
|
||||
TitleBox,
|
||||
EquipUsageRateMore
|
||||
EquipUsageRateMore,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabIndex: 0,
|
||||
tableList: [],
|
||||
showTab: 1,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -89,8 +92,8 @@ export default {
|
|||
}
|
||||
const res = await getUsageStatisticsApi({ type })
|
||||
if (!res.data) return
|
||||
if (res.data.length > 4) {
|
||||
this.tableList = res.data.slice(0, 4)
|
||||
if (res.data.length > 5) {
|
||||
this.tableList = res.data.slice(0, 5)
|
||||
} else {
|
||||
this.tableList = res.data
|
||||
}
|
||||
|
|
@ -102,6 +105,9 @@ export default {
|
|||
handleMore() {
|
||||
this.$refs.equipUsageRateMore.openDialog()
|
||||
},
|
||||
handleTab(tab) {
|
||||
this.showTab = tab
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -123,18 +129,27 @@ export default {
|
|||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.tabs {
|
||||
padding: 6px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #dcfafa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.topTab {
|
||||
margin-right: 10px;
|
||||
width: 60px;
|
||||
height: 24px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #cccccc;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
.active {
|
||||
background: #2cbab2;
|
||||
color: #fff;
|
||||
background: #fff;
|
||||
color: #2cbab2;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -160,6 +175,8 @@ export default {
|
|||
}
|
||||
|
||||
.item-top-title {
|
||||
height: 36px;
|
||||
margin-bottom: 15px;
|
||||
padding-right: 5px;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
|
|
@ -175,7 +192,7 @@ export default {
|
|||
}
|
||||
|
||||
.bt-content {
|
||||
margin-top: 20px;
|
||||
margin-top: 30px;
|
||||
padding: 0 20px;
|
||||
.dot {
|
||||
width: 6px;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,13 @@
|
|||
<el-table-column prop="deptName" label="单位名称" min-width="110" />
|
||||
|
||||
<!-- 装备价值 -->
|
||||
<el-table-column prop="totalValue" label="装备价值（万元）" width="90">
|
||||
<el-table-column prop="totalValue" label="装备价值（万元）" width="90" sortable>
|
||||
<template #header>
|
||||
<span>
|
||||
装备价值（万元）
|
||||
<i class="el-icon-sort" style="color: #2cbab2"/>
|
||||
</span>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<span class="num num-color">
|
||||
{{ scope.row.totalValue || 0 }}
|
||||
|
|
@ -29,7 +35,13 @@
|
|||
|
||||
<!-- 装备数量（台） -->
|
||||
<el-table-column label="装备数量（台）">
|
||||
<el-table-column prop="totalEquipmentQuantity" label="总数" width="70">
|
||||
<el-table-column prop="totalEquipmentQuantity" label="总数" width="70" sortable>
|
||||
<template #header>
|
||||
<span>
|
||||
总数
|
||||
<i class="el-icon-sort" style="color: #2cbab2"/>
|
||||
</span>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<span class="num num-color">
|
||||
{{ scope.row.totalEquipmentQuantity }}
|
||||
|
|
@ -58,7 +70,13 @@
|
|||
|
||||
<!-- 配置率 -->
|
||||
<el-table-column label="配置率">
|
||||
<el-table-column prop="configRate" label="总数" width="70">
|
||||
<el-table-column prop="configRate" label="总数" width="70" sortable>
|
||||
<template #header>
|
||||
<span>
|
||||
总数
|
||||
<i class="el-icon-sort" style="color: #2cbab2"/>
|
||||
</span>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<span class="num num-color">
|
||||
{{ scope.row.configRate }}
|
||||
|
|
@ -147,4 +165,8 @@ export default {
|
|||
.table-sty ::v-deep .el-table__cell {
|
||||
padding: 7px 0;
|
||||
}
|
||||
/* 干掉原来的三角形 */
|
||||
::v-deep .caret-wrapper {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="center-box">
|
||||
<TitleBox titleText="工程在用装备情况" @handleMore="handleMore" style="margin-bottom: 10px"/>
|
||||
<TitleBox titleText="工程在用装备情况" @handleMore="handleMore" style="margin-bottom: 25px" />
|
||||
|
||||
<el-select
|
||||
class="select-box"
|
||||
|
|
@ -12,13 +12,13 @@
|
|||
filterable
|
||||
size="mini"
|
||||
@change="changeProCode"
|
||||
style="width: 316px"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"/>
|
||||
<el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
|
||||
<div class="topView">
|
||||
<div style="height: 100%; display: flex; align-items: center; justify-content: space-between">
|
||||
<div class="tabs">
|
||||
<div class="topTab" :class="{ active: tabIndex == '线路' }" @click="changTab('线路')">线路</div>
|
||||
<div class="topTab" :class="{ active: tabIndex == '变电' }" @click="changTab('变电')">变电</div>
|
||||
<div class="topTab" :class="{ active: tabIndex == '电缆' }" @click="changTab('电缆')">电缆</div>
|
||||
|
|
@ -41,35 +41,48 @@
|
|||
<table cellspacing="0" cellpadding="8" style="width: 100%; text-align: center; font-size: 14px">
|
||||
<!-- 双层表头 -->
|
||||
<thead>
|
||||
<!-- 第一行：跨列合并 -->
|
||||
<tr>
|
||||
<th>排名</th>
|
||||
<th style="width: 260px">工程名称</th>
|
||||
<th>在用装备数（台）</th>
|
||||
<th>规模（拆单公里）</th>
|
||||
<th>百公里线路装备使用情况</th>
|
||||
</tr>
|
||||
<!-- 第一行：跨列合并 -->
|
||||
<tr>
|
||||
<th>排名</th>
|
||||
<th>工程名称</th>
|
||||
<th @click="handleSort">在用装备数（台）<i class="el-icon-sort" style="color: #2cbab2"/></th>
|
||||
<th>电压等级(kV)</th>
|
||||
<th>规模（拆单公里）</th>
|
||||
<th>百公里线路装备使用情况</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<!-- 表体：使用 v-for 渲染数据 -->
|
||||
<tbody>
|
||||
<tr v-for="(row, index) in tableData" :key="index" class="row-sty" :style="rowStyle(index)">
|
||||
<td class="index-num" style="width: 50px" :style="indexStyle(index)">NO0{{ index + 1 }}</td>
|
||||
<td style="width: 260px; text-align: left">
|
||||
<tr v-for="(row, index) in tableData" :key="index" class="row-sty" :style="rowStyle(index)">
|
||||
<td class="index-num" style="width: 50px" :style="indexStyle(index)">NO0{{ index + 1 }}</td>
|
||||
<!-- <td style="width: 230px; text-align: left">
|
||||
<span class="pro-name" :title="row.projectName">
|
||||
{{ row.projectName }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="num" style="width: 140px">{{ row.inUser }}</td>
|
||||
<td class="num" style="width: 140px">{{ row.scale }}</td>
|
||||
<td class="num" style="width: 190px">{{ row.usage }}</td>
|
||||
</tr>
|
||||
</td> -->
|
||||
<td style="width: 200px">
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="row.projectName"
|
||||
placement="top"
|
||||
>
|
||||
<div class="name-cell">
|
||||
<span class="ellipsis">{{ row.projectName }}</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</td>
|
||||
<td class="num" style="width: 140px">{{ row.inUser }}</td>
|
||||
<td class="num" style="width: 140px">{{ row.voltage }}</td>
|
||||
<td class="num" style="width: 140px">{{ row.scale }}</td>
|
||||
<td class="num" style="width: 190px">{{ row.usage }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<el-empty v-if="tableData.length == 0" :image-size="110" description="暂无数据"></el-empty>
|
||||
</div>
|
||||
|
||||
<ProEquipMore ref="proEquipMore"/>
|
||||
<ProEquipMore ref="proEquipMore" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -82,7 +95,7 @@ export default {
|
|||
name: 'Center2',
|
||||
components: {
|
||||
TitleBox,
|
||||
ProEquipMore
|
||||
ProEquipMore,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -92,7 +105,8 @@ export default {
|
|||
proNum: 0,
|
||||
equipNum: 0,
|
||||
tabIndex: '线路',
|
||||
tableData: []
|
||||
tableData: [],
|
||||
sort: 'asc',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -100,6 +114,10 @@ export default {
|
|||
this.getProList()
|
||||
},
|
||||
methods: {
|
||||
handleSort() {
|
||||
this.sort = this.sort === 'asc' ? 'desc' : 'asc'
|
||||
this.getList()
|
||||
},
|
||||
changTab(type) {
|
||||
if (this.tabIndex === type) {
|
||||
return
|
||||
|
|
@ -113,7 +131,8 @@ export default {
|
|||
try {
|
||||
const params = {
|
||||
type: this.tabIndex,
|
||||
proCode: this.proCode
|
||||
proCode: this.proCode,
|
||||
sort: this.sort
|
||||
}
|
||||
const res = await getEquipmentUseApi(params)
|
||||
this.tableData = res.data.equipmentUse || []
|
||||
|
|
@ -156,7 +175,7 @@ export default {
|
|||
return {
|
||||
background,
|
||||
height: '40px', // 👈 统一行高
|
||||
borderRadius: '5px'
|
||||
borderRadius: '5px',
|
||||
}
|
||||
},
|
||||
indexStyle(index) {
|
||||
|
|
@ -172,10 +191,10 @@ export default {
|
|||
}
|
||||
|
||||
return {
|
||||
color
|
||||
color,
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -185,8 +204,8 @@ export default {
|
|||
|
||||
.select-box {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 98px;
|
||||
top: 29px;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -249,19 +268,27 @@ td:last-child {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.tabs {
|
||||
padding: 6px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #dcfafa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.topTab {
|
||||
margin-right: 10px;
|
||||
width: 60px;
|
||||
height: 24px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #cccccc;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #2cbab2;
|
||||
color: #fff;
|
||||
background: #fff;
|
||||
color: #2cbab2;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -282,4 +309,17 @@ td:last-child {
|
|||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
.name-cell {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center; // ✅ 垂直居中
|
||||
justify-content: center; // 如果你想左对齐就删掉
|
||||
.ellipsis {
|
||||
max-width: 180px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
|
|
@ -1,9 +1,20 @@
|
|||
<template>
|
||||
<div>
|
||||
<div style="position: relative">
|
||||
<div class="top-btns">
|
||||
<div class="btn" :class="{ active: btnIndex == 1 }" @click="handleBtn(1)">总价值数</div>
|
||||
<!-- <div class="btn" :class="{ active: btnIndex == 1 }" @click="handleBtn(1)">总价值数</div>
|
||||
<div class="btn" :class="{ active: btnIndex == 2 }" @click="handleBtn(2)">在库装备数</div>
|
||||
<div class="btn" :class="{ active: btnIndex == 3 }" @click="handleBtn(3)">机械化率</div>
|
||||
<div class="btn" :class="{ active: btnIndex == 3 }" @click="handleBtn(3)">机械化率</div> -->
|
||||
<div
|
||||
class="btn"
|
||||
:class="{ active: btnIndex == item.id }"
|
||||
v-for="(item, index) in btnList"
|
||||
:key="item.id"
|
||||
@click="handleBtn(item.id)"
|
||||
>
|
||||
<div class="num">{{ equipData[item.key] || 0 }}<span v-if="item.id == 4">%</span></div>
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<img v-show="btnIndex == item.id" src="@/assets/images/top2-icon.png" class="icon" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-box">
|
||||
<div class="echarts" id="mapChart"></div>
|
||||
|
|
@ -12,7 +23,12 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getUnitEquipmentConfigurationApi, getEquipmentNumberApi, getMechanizationRateApi } from '@/api/wsScreen'
|
||||
import {
|
||||
getUnitEquipmentConfigurationApi,
|
||||
getEquipmentNumberApi,
|
||||
getMechanizationRateApi,
|
||||
getTotalEquipmentApi,
|
||||
} from '@/api/wsScreen'
|
||||
import * as echarts from 'echarts'
|
||||
import 'echarts-gl'
|
||||
|
||||
|
|
@ -25,6 +41,18 @@ export default {
|
|||
return {
|
||||
btnIndex: 1,
|
||||
cityData: [],
|
||||
btnList: [
|
||||
{ id: 1, name: '总价值(万元)', key: 'totalPrice' },
|
||||
{ id: 2, name: '装备总量(台)', key: 'total' },
|
||||
{ id: 3, name: '配置率(分)', key: 'configuration' },
|
||||
{ id: 4, name: '机械化率', key: 'mechanization' },
|
||||
],
|
||||
equipData: {
|
||||
totalPrice: 0, // 总价值
|
||||
total: 0, // 装备总数
|
||||
configuration: 0, // 配置率
|
||||
mechanization: 0, // 机械化率
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -39,6 +67,11 @@ export default {
|
|||
},
|
||||
async getInfo() {
|
||||
try {
|
||||
const { data } = await getTotalEquipmentApi()
|
||||
this.equipData.total = data.totalEquipmentQuantity || 0
|
||||
this.equipData.totalPrice = data.totalValue || 0
|
||||
this.equipData.configuration = data.configuration || 0
|
||||
this.equipData.mechanization = data.mechanization || 0
|
||||
let res = null
|
||||
if (this.btnIndex == 1) {
|
||||
res = await getUnitEquipmentConfigurationApi()
|
||||
|
|
@ -53,8 +86,9 @@ export default {
|
|||
value,
|
||||
}
|
||||
})
|
||||
} else if (this.btnIndex == 2) {
|
||||
res = await getEquipmentNumberApi()
|
||||
} else {
|
||||
// res = await getEquipmentNumberApi()
|
||||
res = await getUnitEquipmentConfigurationApi()
|
||||
if (!res.data) return
|
||||
res.data = res.data.filter((item) => item.location)
|
||||
this.cityData = res.data.map((item) => {
|
||||
|
|
@ -64,11 +98,9 @@ export default {
|
|||
return {
|
||||
...item,
|
||||
value,
|
||||
deptName: item.name,
|
||||
// deptName: item.name,
|
||||
}
|
||||
})
|
||||
} else if (this.btnIndex == 3) {
|
||||
res = await getMechanizationRateApi()
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
console.log('🚀 ~ 地图数据 ~ this.cityData:', this.cityData)
|
||||
|
|
@ -100,75 +132,40 @@ export default {
|
|||
borderWidth: 0,
|
||||
padding: 0, // 👈 关键 1：干掉外壳内边距
|
||||
extraCssText: 'box-shadow:none;border-radius:0;', // 👈 关键 2：干掉阴影 & 圆角
|
||||
position: function (point, params, dom, rect, size) {
|
||||
const tooltipWidth = size.contentSize[0]
|
||||
const tooltipHeight = size.contentSize[1]
|
||||
const viewHeight = size.viewSize[1]
|
||||
|
||||
formatter: function (e) {
|
||||
let x = point[0] - tooltipWidth / 2
|
||||
let y = 0
|
||||
|
||||
if (point[1] < viewHeight / 2) {
|
||||
// 👆 地图上半部分 → tooltip 显示在鼠标下方（靠顶部）
|
||||
y = point[1] + 10
|
||||
} else {
|
||||
// 👇 地图下半部分 → tooltip 显示在鼠标上方（靠底部）
|
||||
y = point[1] - tooltipHeight - 10
|
||||
}
|
||||
|
||||
return [x, y]
|
||||
},
|
||||
formatter: (e) => {
|
||||
let n = e.name
|
||||
let res = ''
|
||||
arr.forEach((data) => {
|
||||
// console.log('🚀 ~ 提示数据 ~ data:', data)
|
||||
if (data.cityName === n) {
|
||||
res =
|
||||
"<div style='width: 260px;height: 285px; background: url(" +
|
||||
require('./Map/assets/img/dialog.png') +
|
||||
") no-repeat;background-size:100% 100%;'>" +
|
||||
"<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: 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>装备价值：' +
|
||||
'</div>' +
|
||||
"<div style='font-family: OPPOSans;margin-left: 10px;color: #666; font-size: 18px'>" +
|
||||
data.totalValue +
|
||||
" <span style='color:#666;font-size:14px'> 万元</span>" +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
"<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>装备数量：' +
|
||||
'</div>' +
|
||||
"<div style='font-family: OPPOSans;margin-left: 10px;color: #666'; font-size: 18px>" +
|
||||
data.totalEquipmentQuantity +
|
||||
"<span style='color:#666;font-size:14px'> 台</span>" +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
"<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>配置率：' +
|
||||
'</div>' +
|
||||
"<div style='font-family: OPPOSans;margin-left: 10px;color: #666'; font-size: 18px>" +
|
||||
data.configRate +
|
||||
"<span style='color:#666;font-size:14px'> %</span>" +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
"<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>线路数量：' +
|
||||
'</div>' +
|
||||
"<div style='font-family: OPPOSans;margin-left: 10px;color: #666'; font-size: 18px>" +
|
||||
data.lineNum +
|
||||
"<span style='color:#666;font-size:14px'> 台</span>" +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
"<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>变电数量：' +
|
||||
'</div>' +
|
||||
"<div style='font-family: OPPOSans;margin-left: 10px;color: #666'; font-size: 18px>" +
|
||||
data.substationNum +
|
||||
"<span style='color:#666;font-size:14px'> 台</span>" +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
"<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>电缆数量：' +
|
||||
'</div>' +
|
||||
"<div style='font-family: OPPOSans;margin-left: 10px;color: #666'; font-size: 18px>" +
|
||||
data.cableNum +
|
||||
"<span style='color:#666;font-size:14px'> 台</span>" +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
// console.log('🚀 ~ 提示数据 ~ data:', data)
|
||||
if (data.cityName === '合肥市') {
|
||||
const hefeiList = arr.filter((item) => item.cityName === '合肥市')
|
||||
res =
|
||||
"<div style='display:flex;'>" +
|
||||
this.renderOneCompany(hefeiList[0], this.btnIndex) +
|
||||
this.renderOneCompany(hefeiList[1], this.btnIndex) +
|
||||
'</div>'
|
||||
} else {
|
||||
res = this.renderOneCompany(data, this.btnIndex)
|
||||
}
|
||||
}
|
||||
})
|
||||
return res
|
||||
|
|
@ -335,10 +332,11 @@ export default {
|
|||
// },
|
||||
// },
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(217, 94, 0, 1)',
|
||||
},
|
||||
zlevel: 1,
|
||||
// 红点样式
|
||||
// itemStyle: {
|
||||
// color: 'rgba(217, 94, 0, 1)',
|
||||
// },
|
||||
// zlevel: 1,
|
||||
},
|
||||
],
|
||||
graphic: {
|
||||
|
|
@ -394,27 +392,126 @@ export default {
|
|||
})
|
||||
return myChart
|
||||
},
|
||||
renderOneCompany(data, btnIndex) {
|
||||
if (btnIndex == 1) {
|
||||
return (
|
||||
"<div style='width:260px;background:url(" +
|
||||
require('./Map/assets/img/dialog-2.png') +
|
||||
") no-repeat;background-size:100% 100%;margin-right:-10px;padding-bottom:30px'>" +
|
||||
"<div style='height:34px;display:flex;align-items:center;padding-left:10px;color:#fff;font-size:17px'>" +
|
||||
data.deptName +
|
||||
'</div>' +
|
||||
this.renderItem('装备价值', data.totalValue, '万元') +
|
||||
'</div>'
|
||||
)
|
||||
}
|
||||
|
||||
if (btnIndex == 2) {
|
||||
return (
|
||||
"<div style='width:260px;background:url(" +
|
||||
require('./Map/assets/img/dialog.png') +
|
||||
") no-repeat;background-size:100% 100%;margin-right:-10px;padding-bottom:30px'>" +
|
||||
"<div style='height:34px;display:flex;align-items:center;padding-left:10px;color:#fff;font-size:17px'>" +
|
||||
data.deptName +
|
||||
'</div>' +
|
||||
this.renderItem('装备总量', data.totalEquipmentQuantity, '台') +
|
||||
this.renderItem('线路数量', data.lineNum, '台') +
|
||||
this.renderItem('变电数量', data.substationNum, '台') +
|
||||
this.renderItem('电缆数量', data.cableNum, '台') +
|
||||
'</div>'
|
||||
)
|
||||
}
|
||||
|
||||
if (btnIndex == 3) {
|
||||
return (
|
||||
"<div style='width:260px;background:url(" +
|
||||
require('./Map/assets/img/dialog.png') +
|
||||
") no-repeat;background-size:100% 100%;margin-right:-10px;padding-bottom:30px'>" +
|
||||
"<div style='height:34px;display:flex;align-items:center;padding-left:10px;color:#fff;font-size:17px'>" +
|
||||
data.deptName +
|
||||
'</div>' +
|
||||
this.renderItem('总配置率', data.configRate, '分') +
|
||||
this.renderItem('线路设备配置率', data.valueA, '分') +
|
||||
this.renderItem('变电设备配置率', data.valueB, '分') +
|
||||
this.renderItem('电缆设备配置率', data.valueC, '分') +
|
||||
'</div>'
|
||||
)
|
||||
}
|
||||
|
||||
if (btnIndex == 4) {
|
||||
return (
|
||||
"<div style='width:260px;background:url(" +
|
||||
require('./Map/assets/img/dialog-2.png') +
|
||||
") no-repeat;background-size:100% 100%;margin-right:-10px;padding-bottom:30px'>" +
|
||||
"<div style='height:34px;display:flex;align-items:center;padding-left:10px;color:#fff;font-size:17px'>" +
|
||||
data.deptName +
|
||||
'</div>' +
|
||||
this.renderItem('机械化率', data.mechanization, '%') +
|
||||
'</div>'
|
||||
)
|
||||
}
|
||||
},
|
||||
renderItem(label, value, unit) {
|
||||
return (
|
||||
"<div style='width:260px;margin-top:10px;height:25px;display:flex;align-items:center;font-size:12px;color:#666;margin-left:20px'>" +
|
||||
'<div>' +
|
||||
label +
|
||||
'：</div>' +
|
||||
"<div style='margin-left:10px;font-size:16px'>" +
|
||||
(value || 0) +
|
||||
"<span style='font-size:12px'> " +
|
||||
unit +
|
||||
'</span>' +
|
||||
'</div></div>'
|
||||
)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.num {
|
||||
font-family: OPPOSans;
|
||||
font-size: 24px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.name {
|
||||
margin-top: 6px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
}
|
||||
.icon {
|
||||
width: 56px;
|
||||
height: 54px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.top-btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
|
||||
.btn {
|
||||
margin-right: 24px;
|
||||
height: 30px;
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
width: 168px;
|
||||
height: 80px;
|
||||
background: #fff;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
margin-bottom: 16px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: #3f3f3f;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #2cbab2;
|
||||
border-bottom: 2px solid #2cbab2;
|
||||
color: #fff;
|
||||
background: linear-gradient(90deg, #00d2be 0%, #4eacff 100%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -429,4 +526,42 @@ export default {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// 多选框
|
||||
.circle-checkbox {
|
||||
position: absolute;
|
||||
right: -30px;
|
||||
bottom: -10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* 圆圈外框 */
|
||||
.circle-checkbox .el-checkbox__inner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* 选中状态背景 */
|
||||
.circle-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background-color: #3bc6c1;
|
||||
border-color: #3bc6c1;
|
||||
}
|
||||
|
||||
/* 中间的“点” */
|
||||
.circle-checkbox .el-checkbox__inner::after {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 3.6px;
|
||||
top: 3.6px;
|
||||
transform: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue