497 lines
13 KiB
Vue
497 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<div class="app-container">
|
|||
|
|
<div class="top">
|
|||
|
|
<div class="top-item">
|
|||
|
|
<el-card class="card-box">
|
|||
|
|
<div class="title">
|
|||
|
|
<i class="el-icon-pie-chart icon-tip" />
|
|||
|
|
<span>数据总览</span>
|
|||
|
|
</div>
|
|||
|
|
<!-- 饼图 -->
|
|||
|
|
<div style="display: flex; justify-content: center">
|
|||
|
|
<div ref="chartRef" style="width: 490px; height: 270px"></div>
|
|||
|
|
</div>
|
|||
|
|
<div style="display: flex; justify-content: space-between; margin-top: 15px">
|
|||
|
|
<div class="left-tip">平台设备总数：{{ dataAll.totalSum }}</div>
|
|||
|
|
<div class="left-tip">装备总数：{{ dataAll.maNum }}</div>
|
|||
|
|
<div class="left-tip">工具总数：{{ dataAll.toolNum }}</div>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- -->
|
|||
|
|
<div class="top-item">
|
|||
|
|
<el-card class="card-box">
|
|||
|
|
<div class="title">
|
|||
|
|
<i class="el-icon-bangzhu icon-tip" />
|
|||
|
|
<span>使用情况</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="content">
|
|||
|
|
<div class="content-item" style="background: #f3fbf8">
|
|||
|
|
<div class="line" style="background: #79d1b8" />
|
|||
|
|
<div class="item-box">
|
|||
|
|
<div>在库数量</div>
|
|||
|
|
<div class="num">{{ useData.availableNum }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content-item" style="background: #f2f6fe">
|
|||
|
|
<div class="line" style="background: #9dbefa" />
|
|||
|
|
<div class="item-box">
|
|||
|
|
<div>自用数量</div>
|
|||
|
|
<div class="num">{{ useData.inNum }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content-item" style="background: #f3fbf8">
|
|||
|
|
<div class="line" style="background: #79d1b8" />
|
|||
|
|
<div class="item-box">
|
|||
|
|
<div>共享数量</div>
|
|||
|
|
<div class="num">{{ useData.shareNum }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content">
|
|||
|
|
<div class="content-item" style="background: #fdf1ea">
|
|||
|
|
<div class="line" style="background: #f2ab7f" />
|
|||
|
|
<div class="item-box">
|
|||
|
|
<div>维修数量</div>
|
|||
|
|
<div class="num">{{ useData.repairNum }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content-item" style="background: #fbedeb">
|
|||
|
|
<div class="line" style="background: #e56d74" />
|
|||
|
|
<div class="item-box">
|
|||
|
|
<div>退役数量</div>
|
|||
|
|
<div class="num">{{ useData.scrapNum }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="flex: 1"></div>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="top-item">
|
|||
|
|
<el-card class="card-box">
|
|||
|
|
<div class="title">
|
|||
|
|
<i class="el-icon-date icon-tip" />
|
|||
|
|
<span>实时事件</span>
|
|||
|
|
</div>
|
|||
|
|
<!-- 滚动列表 -->
|
|||
|
|
<div class="scroll-wrapper" ref="wrap" @mouseenter="pause" @mouseleave="resume">
|
|||
|
|
<ul class="scroll-list" ref="list">
|
|||
|
|
<li v-for="(item, index) in eventList" :key="item.id" :class="{ odd: index % 2 === 1 }">
|
|||
|
|
<div style="display: flex; align-items: center; justify-content: space-between">
|
|||
|
|
<div style="width: 65%">
|
|||
|
|
<span>{{ index + 1 }}. </span>
|
|||
|
|
<span>{{ item.deptAbbreviation }} </span>
|
|||
|
|
<span>{{ item.applyUser }} </span>
|
|||
|
|
<span>{{ item.businessName }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div>{{ item.applyTime }}</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="bottom">
|
|||
|
|
<el-card class="card-box2">
|
|||
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px">
|
|||
|
|
<div class="title">
|
|||
|
|
<i class="el-icon-reading icon-tip" />
|
|||
|
|
<span>装备对比</span>
|
|||
|
|
</div>
|
|||
|
|
<div style="display: flex; justify-content: space-between; align-items: center">
|
|||
|
|
<el-button type="primary" size="mini" @click="handleActive">图表分析</el-button>
|
|||
|
|
<i class="el-icon-download icon-tip" style="margin-left: 10px; cursor: pointer" @click="handleExport" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-table
|
|||
|
|
v-if="activeTab"
|
|||
|
|
v-loading="isLoading"
|
|||
|
|
:data="tableList"
|
|||
|
|
highlight-current-row
|
|||
|
|
border
|
|||
|
|
stripe
|
|||
|
|
style="width: 100%"
|
|||
|
|
>
|
|||
|
|
<el-table-column type="index" width="55" label="序号" align="center" />
|
|||
|
|
<el-table-column
|
|||
|
|
v-for="(column, index) in tableColumns"
|
|||
|
|
show-overflow-tooltip
|
|||
|
|
:key="index"
|
|||
|
|
:label="column.label"
|
|||
|
|
:prop="column.prop"
|
|||
|
|
align="center"
|
|||
|
|
>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
<!-- 柱状图 -->
|
|||
|
|
<div v-else ref="barRef" style="width: 100%; height: 340px; margin-top: 20px"></div>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import * as echarts from 'echarts'
|
|||
|
|
import { getDeviceNumAll, getUseDeviceNum, getReal, getDeviceByDept } from '@/api/basic/home'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'ProvincialCompany',
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
isLoading: false,
|
|||
|
|
toolTotal: 60,
|
|||
|
|
equipTotal: 50,
|
|||
|
|
activeTab: true,
|
|||
|
|
dataAll: {
|
|||
|
|
maNum: 0,
|
|||
|
|
maPercent: 0,
|
|||
|
|
toolNum: 0,
|
|||
|
|
toolPercent: 0,
|
|||
|
|
totalSum: 0,
|
|||
|
|
},
|
|||
|
|
useData: {
|
|||
|
|
availableNum: 0,
|
|||
|
|
inNum: 0,
|
|||
|
|
repairNum: 0,
|
|||
|
|
scrapNum: 0,
|
|||
|
|
shareNum: 0,
|
|||
|
|
},
|
|||
|
|
eventList: [],
|
|||
|
|
timer: null,
|
|||
|
|
speed: 30,
|
|||
|
|
|
|||
|
|
tableColumns: [
|
|||
|
|
{ label: '公司名称', prop: 'companyName' },
|
|||
|
|
{ label: '装备总数', prop: 'maNum' },
|
|||
|
|
{ label: '装备总价值', prop: 'maCost' },
|
|||
|
|
{ label: '工具总数', prop: 'toolNum' },
|
|||
|
|
{ label: '编码工具总数', prop: 'toolCodeNum' },
|
|||
|
|
{ label: '数量工具总数', prop: 'toolNoCodeNum' },
|
|||
|
|
],
|
|||
|
|
tableList: [],
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.getDataAll()
|
|||
|
|
this.getUseData()
|
|||
|
|
this.getEventList()
|
|||
|
|
this.getList()
|
|||
|
|
},
|
|||
|
|
beforeDestroy() {
|
|||
|
|
clearInterval(this.timer)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
async getDataAll() {
|
|||
|
|
try {
|
|||
|
|
const res = await getDeviceNumAll()
|
|||
|
|
this.dataAll = res.data
|
|||
|
|
this.initChart()
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log('🚀 ~ error:', error)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async getUseData() {
|
|||
|
|
try {
|
|||
|
|
const res = await getUseDeviceNum()
|
|||
|
|
this.useData = res.data
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log('🚀 ~ error:', error)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async getEventList() {
|
|||
|
|
try {
|
|||
|
|
const res = await getReal()
|
|||
|
|
this.eventList = res.data
|
|||
|
|
this.startScroll()
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log('🚀 ~ error:', error)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async getList() {
|
|||
|
|
try {
|
|||
|
|
const res = await getDeviceByDept()
|
|||
|
|
this.tableList = res.data
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log('🚀 ~ error:', error)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleActive() {
|
|||
|
|
this.activeTab = !this.activeTab
|
|||
|
|
if (!this.activeTab) {
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.initBarChart()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
startScroll() {
|
|||
|
|
const wrap = this.$refs.wrap
|
|||
|
|
|
|||
|
|
this.timer = setInterval(() => {
|
|||
|
|
wrap.scrollTop++
|
|||
|
|
|
|||
|
|
// 如果滚到底部，则跳回 0，实现无缝滚动
|
|||
|
|
if (wrap.scrollTop >= wrap.scrollHeight - wrap.clientHeight) {
|
|||
|
|
wrap.scrollTop = 0
|
|||
|
|
}
|
|||
|
|
}, this.speed)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
pause() {
|
|||
|
|
clearInterval(this.timer)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
resume() {
|
|||
|
|
this.startScroll()
|
|||
|
|
},
|
|||
|
|
handleExport() {
|
|||
|
|
this.download('material-mall/index/export', {}, `装备对比_${new Date().getTime()}.xlsx`)
|
|||
|
|
},
|
|||
|
|
initChart() {
|
|||
|
|
const chartDom = this.$refs.chartRef
|
|||
|
|
const chart = echarts.init(chartDom)
|
|||
|
|
|
|||
|
|
const option = {
|
|||
|
|
legend: {
|
|||
|
|
orient: 'horizontal',
|
|||
|
|
bottom: 0,
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 14,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '数量',
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['20%', '65%'],
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'outside',
|
|||
|
|
formatter: (params) => {
|
|||
|
|
return `{a|${params.percent}%}\n{b|${params.name}}`
|
|||
|
|
},
|
|||
|
|
rich: {
|
|||
|
|
a: {
|
|||
|
|
fontSize: 16,
|
|||
|
|
fontWeight: 'bold',
|
|||
|
|
lineHeight: 20,
|
|||
|
|
},
|
|||
|
|
b: {
|
|||
|
|
fontSize: 12,
|
|||
|
|
color: '#666',
|
|||
|
|
lineHeight: 18,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: [
|
|||
|
|
{ value: this.dataAll.maNum, name: '装备总数' },
|
|||
|
|
{ value: this.dataAll.toolNum, name: '工具总数' },
|
|||
|
|
],
|
|||
|
|
emphasis: {
|
|||
|
|
itemStyle: {
|
|||
|
|
shadowBlur: 10,
|
|||
|
|
shadowOffsetX: 0,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
chart.setOption(option)
|
|||
|
|
},
|
|||
|
|
initBarChart() {
|
|||
|
|
const barDom = this.$refs.barRef
|
|||
|
|
const barChart = echarts.init(barDom)
|
|||
|
|
|
|||
|
|
const companyNames = this.tableList.map((item) => item.companyName)
|
|||
|
|
const equipTotals = this.tableList.map((item) => item.maNum)
|
|||
|
|
const toolTotals = this.tableList.map((item) => item.toolNum)
|
|||
|
|
|
|||
|
|
const option = {
|
|||
|
|
tooltip: { trigger: 'axis' },
|
|||
|
|
|
|||
|
|
legend: {
|
|||
|
|
top: 0,
|
|||
|
|
right: 20,
|
|||
|
|
data: ['装备总数', '工具总数'],
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
right: '3%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
containLabel: true,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: companyNames,
|
|||
|
|
|
|||
|
|
axisLabel: {
|
|||
|
|
fontSize: 13,
|
|||
|
|
interval: 0, // 强制全部显示
|
|||
|
|
lineHeight: 16,
|
|||
|
|
formatter: function (name) {
|
|||
|
|
const maxLen = 3 // 每行6字符，可调整
|
|||
|
|
if (name.length <= maxLen) return name
|
|||
|
|
const rows = Math.ceil(name.length / maxLen)
|
|||
|
|
let res = ''
|
|||
|
|
for (let i = 0; i < rows; i++) {
|
|||
|
|
res += name.substring(i * maxLen, (i + 1) * maxLen) + '\n'
|
|||
|
|
}
|
|||
|
|
return res
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
name: '数量（个）',
|
|||
|
|
nameTextStyle: { fontSize: 14 },
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '装备总数',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 35,
|
|||
|
|
barGap: '0%', // ← 两个柱子紧贴
|
|||
|
|
barCategoryGap: '0%', // ← 类目间无空隙
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#5470C6',
|
|||
|
|
borderRadius: [4, 4, 0, 0],
|
|||
|
|
},
|
|||
|
|
data: equipTotals,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '工具总数',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 35,
|
|||
|
|
barGap: '0%',
|
|||
|
|
barCategoryGap: '0%',
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#91CC75',
|
|||
|
|
borderRadius: [4, 4, 0, 0],
|
|||
|
|
},
|
|||
|
|
data: toolTotals,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
barChart.setOption(option)
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.app-container {
|
|||
|
|
background: #f2f2f2;
|
|||
|
|
}
|
|||
|
|
.top {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
gap: 20px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
.top-item {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
.left-tip {
|
|||
|
|
font-size: 13px;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
padding: 3px 10px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
color: #75787d;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.card-box {
|
|||
|
|
width: 100%;
|
|||
|
|
border-radius: 15px;
|
|||
|
|
height: 360px;
|
|||
|
|
}
|
|||
|
|
.card-box2 {
|
|||
|
|
width: 100%;
|
|||
|
|
border-radius: 15px;
|
|||
|
|
min-height: 430px;
|
|||
|
|
}
|
|||
|
|
.title {
|
|||
|
|
font-weight: 900;
|
|||
|
|
}
|
|||
|
|
.icon-tip {
|
|||
|
|
margin-right: 10px;
|
|||
|
|
font-weight: 900;
|
|||
|
|
}
|
|||
|
|
::v-deep .card-box {
|
|||
|
|
padding: 0 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
width: 100%;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
display: flex;
|
|||
|
|
gap: 20px;
|
|||
|
|
|
|||
|
|
.content-item {
|
|||
|
|
flex: 1;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
height: 90px;
|
|||
|
|
/* background: #f3fbf8; */
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.line {
|
|||
|
|
width: 4px;
|
|||
|
|
height: 90px;
|
|||
|
|
/* background: #79d1b8; */
|
|||
|
|
}
|
|||
|
|
.item-box {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
color: #75787d;
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
.num {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
font-size: 20px;
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: 800;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scroll-wrapper {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
height: 300px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scroll-list {
|
|||
|
|
padding: 0;
|
|||
|
|
margin: 0;
|
|||
|
|
list-style: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scroll-list li {
|
|||
|
|
padding: 8px 12px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
transition: background 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 隔行背景色 */
|
|||
|
|
.scroll-list li.odd {
|
|||
|
|
background-color: #ebf8f3;
|
|||
|
|
}
|
|||
|
|
</style>
|