This commit is contained in:
parent
9426aea36f
commit
fb472c72a7
|
|
@ -0,0 +1,74 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 数据总览
|
||||
// /getDeviceNum
|
||||
export function getDeviceNumAll(query) {
|
||||
return request({
|
||||
url: '/material-mall/index/getDeviceNum',
|
||||
method: 'get',
|
||||
params: query,
|
||||
})
|
||||
}
|
||||
|
||||
// 使用情况
|
||||
export function getUseDeviceNum(query) {
|
||||
return request({
|
||||
url: '/material-mall/index/getUseDeviceNum',
|
||||
method: 'get',
|
||||
params: query,
|
||||
})
|
||||
}
|
||||
|
||||
// 实时事件
|
||||
export function getReal(query) {
|
||||
return request({
|
||||
url: '/material-mall/index/getReal',
|
||||
method: 'get',
|
||||
params: query,
|
||||
})
|
||||
}
|
||||
|
||||
// 装备对比
|
||||
export function getDeviceByDept(query) {
|
||||
return request({
|
||||
url: '/material-mall/index/getDeviceByDept',
|
||||
method: 'get',
|
||||
params: query,
|
||||
})
|
||||
}
|
||||
|
||||
// 数量
|
||||
export function getDeviceNumByMonth(query) {
|
||||
return request({
|
||||
url: '/material-mall/index/getDeviceNumByMonth',
|
||||
method: 'get',
|
||||
params: query,
|
||||
})
|
||||
}
|
||||
|
||||
// 告警
|
||||
export function getMaQc(query) {
|
||||
return request({
|
||||
url: '/material-mall/index/getMaQc',
|
||||
method: 'get',
|
||||
params: query,
|
||||
})
|
||||
}
|
||||
|
||||
// 待办
|
||||
export function getApprover(query) {
|
||||
return request({
|
||||
url: '/material-mall/index/getApprover',
|
||||
method: 'get',
|
||||
params: query,
|
||||
})
|
||||
}
|
||||
|
||||
// 共享
|
||||
export function getShare(query) {
|
||||
return request({
|
||||
url: '/material-mall/index/getShare',
|
||||
method: 'get',
|
||||
params: query,
|
||||
})
|
||||
}
|
||||
|
|
@ -68,7 +68,7 @@ export const constantRoutes = [
|
|||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/index_2'),
|
||||
component: () => import('@/views/home/index'),
|
||||
name: 'Index',
|
||||
meta: { title: '首页', icon: 'dashboard', affix: true }
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,598 @@
|
|||
<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: 280px"></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">
|
||||
<div class="item-box">
|
||||
<div class="num">{{ errData.maintainExpireMonthNum }}</div>
|
||||
<div>一个月内维保到期数量</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-item">
|
||||
<div class="item-box">
|
||||
<div class="num">{{ errData.maintainOverdueNum }}</div>
|
||||
<div>维保已超期数量</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content-item">
|
||||
<div class="item-box">
|
||||
<div class="num">{{ errData.useYearExpireMonthNum }}</div>
|
||||
<div>一年内使用年限到期</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-item">
|
||||
<div class="item-box">
|
||||
<div class="num">{{ errData.useYearOverdueNum }}</div>
|
||||
<div>已超最大使用年限</div>
|
||||
</div>
|
||||
</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; cursor: pointer"
|
||||
@click="handleEvent(item)"
|
||||
>
|
||||
<div style="width: 65%">
|
||||
<span>{{ index + 1 }}. </span>
|
||||
<span
|
||||
>您有一个单号为<span>{{ item.code }}</span
|
||||
>的"{{ item.businessName }}"单据待审核
|
||||
</span>
|
||||
</div>
|
||||
<div>{{ item.createTime }}</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="top">
|
||||
<div class="top-item">
|
||||
<el-card class="card-box">
|
||||
<div class="title">
|
||||
<i class="el-icon-copy-document icon-tip" />
|
||||
<span>当月出库数量</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content-item content-item2">
|
||||
<div class="item-box">
|
||||
<div class="num2">{{ numData.selfUseApplyNum }}</div>
|
||||
<div>本月自用申请数量</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-item content-item2">
|
||||
<div class="item-box">
|
||||
<div class="num2">{{ numData.selfUseAuditNum }}</div>
|
||||
<div>本月自用审核数量</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-item content-item2">
|
||||
<div class="item-box">
|
||||
<div class="num2">{{ numData.selfUseOutNum }}</div>
|
||||
<div>本月自用出库数量</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content-item content-item2">
|
||||
<div class="item-box">
|
||||
<div class="num2">{{ shareData.buyerNum }}</div>
|
||||
<div>本月申请共享数量</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-item content-item2">
|
||||
<div class="item-box">
|
||||
<div class="num2">{{ shareData.sellerNum }}</div>
|
||||
<div>本月共享订单数量</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-item content-item2">
|
||||
<div class="item-box">
|
||||
<div class="num2">{{ shareData.toolNum }}</div>
|
||||
<div>本月共享出库数量</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<div class="top-item">
|
||||
<el-card class="card-box">
|
||||
<div class="title">
|
||||
<i class="el-icon-set-up icon-tip" />
|
||||
<span>当月退库数量</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content-item content-item2">
|
||||
<div class="item-box">
|
||||
<div class="num2">{{ numData.returnApplyNum }}</div>
|
||||
<div>本月退库申请数量</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-item content-item2">
|
||||
<div class="item-box">
|
||||
<div class="num2">{{ numData.returnAuditApplyNum }}</div>
|
||||
<div>本月退库审核数量</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content-item content-item2">
|
||||
<div class="item-box">
|
||||
<div class="num2">{{ numData.returnAuditStoreNum }}</div>
|
||||
<div>本月退库入库数量</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-item content-item2">
|
||||
<div class="item-box">
|
||||
<div class="num2">{{ numData.returnAuditRepairNum }}</div>
|
||||
<div>本月退库维修数量</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<div class="top-item">
|
||||
<el-card class="card-box">
|
||||
<div class="title">
|
||||
<i class="el-icon-setting icon-tip" />
|
||||
<span>当月维修数量</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content-item content-item2">
|
||||
<div class="item-box">
|
||||
<div class="num2">{{ numData.repairPendingNum }}</div>
|
||||
<div>本月待维修数量</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-item content-item2">
|
||||
<div class="item-box">
|
||||
<div class="num2">{{ numData.repairQualifiedNum }}</div>
|
||||
<div>本月维修合格数量</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content-item content-item2">
|
||||
<div class="item-box">
|
||||
<div class="num2">{{ numData.repairRetireNum }}</div>
|
||||
<div>本月维修退役数量</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="" style="flex: 1"> </div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { getDeviceNumAll, getDeviceNumByMonth, getMaQc, getApprover, getShare } from '@/api/basic/home'
|
||||
|
||||
export default {
|
||||
name: 'MunicipalCompany',
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
dataAll: {},
|
||||
toolTotal: 60,
|
||||
equipTotal: 50,
|
||||
activeTab: true,
|
||||
errData: {},
|
||||
shareData: {},
|
||||
eventList: [],
|
||||
timer: null,
|
||||
speed: 30,
|
||||
numData: {
|
||||
selfUseApplyNum: 0, // 自用申请数
|
||||
selfUseAuditNum: 0, // 自用审核数
|
||||
selfUseOutNum: 0, // 自用出库数
|
||||
returnApplyNum: 0, // 退库申请数
|
||||
returnAuditApplyNum: 0, // 退库审核数
|
||||
returnAuditStoreNum: 0, // 退库入库数
|
||||
returnAuditRepairNum: 0, // 退库维修数
|
||||
repairPendingNum: 0, // 待维修数
|
||||
repairQualifiedNum: 0, // 维修合格数
|
||||
repairRetireNum: 0, // 维修合格数
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getEventList()
|
||||
this.getDataAll()
|
||||
this.getNumData()
|
||||
this.getErrData()
|
||||
this.getShareData()
|
||||
},
|
||||
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 getEventList() {
|
||||
try {
|
||||
const res = await getApprover()
|
||||
this.eventList = res.data
|
||||
this.startScroll()
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ error:', error)
|
||||
}
|
||||
},
|
||||
handleEvent(item) {
|
||||
console.log('🚀 ~ item:', item)
|
||||
let url = ''
|
||||
if (item.businessName == '设备出库') {
|
||||
url = '/business/addAudit'
|
||||
} else if (item.businessName == '设备退库') {
|
||||
url = '/business/warehouse/auditDetails'
|
||||
} else if (item.businessName == '设备维修') {
|
||||
url = '/equipment/repair/approval-detail'
|
||||
} else if (item.businessName == '设备退役') {
|
||||
this.$router.push({
|
||||
name: 'RetireApplyAuditDetail',
|
||||
params: { id: item.id },
|
||||
query: { taskInfo: JSON.stringify(item) },
|
||||
})
|
||||
}
|
||||
if (item.businessName == '设备退役') return
|
||||
this.$router.push({
|
||||
path: url,
|
||||
query: {
|
||||
id: item.id,
|
||||
isEdit: true,
|
||||
},
|
||||
})
|
||||
},
|
||||
async getShareData() {
|
||||
try {
|
||||
const res = await getShare()
|
||||
this.shareData = res.data
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ error:', error)
|
||||
}
|
||||
},
|
||||
async getNumData() {
|
||||
try {
|
||||
const res = await getDeviceNumByMonth()
|
||||
this.numData = res.data
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ error:', error)
|
||||
}
|
||||
},
|
||||
async getErrData() {
|
||||
try {
|
||||
const res = await getMaQc()
|
||||
this.errData = 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()
|
||||
},
|
||||
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.name)
|
||||
const equipTotals = this.tableList.map((item) => item.equipTotal)
|
||||
const toolTotals = this.tableList.map((item) => item.toolTotal)
|
||||
|
||||
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 = 6 // 每行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: 380px;
|
||||
}
|
||||
.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: 140px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(180deg, #fff7f7 0%, #fff 60%);
|
||||
box-shadow: 0 0 0.5px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
|
||||
|
||||
.item-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #75787d;
|
||||
font-size: 13px;
|
||||
}
|
||||
.num {
|
||||
margin-bottom: 10px;
|
||||
font-size: 21px;
|
||||
color: red;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
.content-item2 {
|
||||
background: linear-gradient(180deg, #e8f9f3 0%, #fff 60.1%);
|
||||
box-shadow: 0 0 0.5px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
.num2 {
|
||||
margin-bottom: 10px;
|
||||
font-size: 21px;
|
||||
color: #54a798;
|
||||
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>
|
||||
|
|
@ -0,0 +1,496 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<div>
|
||||
<component ref="" :is="isShowComponent" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProvincialCompany from './components/ProvincialCompany'
|
||||
import MunicipalCompany from './components/MunicipalCompany'
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {
|
||||
ProvincialCompany,
|
||||
MunicipalCompany,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShowComponent: 'ProvincialCompany',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const deptName = sessionStorage.getItem('deptName')
|
||||
// 如果 deptName 包含 省公司 则显示ProvincialCompany 否则 显示 MunicipalCompany
|
||||
this.isShowComponent = deptName.includes('省公司') ? 'ProvincialCompany' : 'MunicipalCompany'
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -38,9 +38,9 @@ module.exports = {
|
|||
// target: `http://localhost:18080`,
|
||||
// target: `http://192.168.0.96:28080`,//马
|
||||
// target: `http://192.168.0.110:18080`,//洪
|
||||
target: `http://127.0.0.1:28080`,//阮
|
||||
// target: `http://192.168.0.41:28080`,//蒋
|
||||
// target: `http://36.33.26.201:17788/proxyApi`, //测试
|
||||
// target: `http://192.168.0.14:19190/prod-api`, //测试
|
||||
target: `http://36.33.26.201:21999/prod-api`, //测试
|
||||
// target: `http://192.168.137.1:18080`,//
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue