|
|
|
|
@ -5,20 +5,25 @@
|
|
|
|
|
<div v-for="item in topObj">
|
|
|
|
|
<div class="label">{{ item.label }}</div>
|
|
|
|
|
<div class="value">
|
|
|
|
|
{{ item.value }}
|
|
|
|
|
{{ item.value }} <span style="font-size: 0.2rem;">{{item.unit?item.unit:''}}</span>
|
|
|
|
|
<!-- <CountUp :end="item.value" :duration="6" ref="count" /> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="jscC-center">
|
|
|
|
|
<div class="jscC-center-left" >
|
|
|
|
|
<Pie3DChart :data="upList"></Pie3DChart>
|
|
|
|
|
<!-- <div class="jscC-center-left-title">物资数量统计</div> -->
|
|
|
|
|
<!-- <div class="jscC-center-left-content"> -->
|
|
|
|
|
<!-- <div v-for="item in upList">
|
|
|
|
|
<div class="jscC-center-top">
|
|
|
|
|
<div class="jscC-center-left-title">年度物资动态</div>
|
|
|
|
|
<WarehouseTable></WarehouseTable>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <Pie3DChart :data="upList"></Pie3DChart> -->
|
|
|
|
|
<div class="jscC-center-left-title">重要防汛物资</div>
|
|
|
|
|
<div class="jscC-center-left-content">
|
|
|
|
|
<div v-for="item in upList">
|
|
|
|
|
<img :src="item.img" alt="">
|
|
|
|
|
<span>{{item.name}}：</span>
|
|
|
|
|
<span>{{item.total}}{{item.unit?item.unit:''}}</span>
|
|
|
|
|
</div> -->
|
|
|
|
|
<span>{{item.value}}{{item.unit?item.unit:''}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <Pie3DChart :data="upList"></Pie3DChart> -->
|
|
|
|
|
<!-- <span
|
|
|
|
|
v-for="item in Object.keys(chartDataMap)"
|
|
|
|
|
@ -28,7 +33,7 @@
|
|
|
|
|
>
|
|
|
|
|
{{ item }}
|
|
|
|
|
</span> -->
|
|
|
|
|
<!-- </div> -->
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <Bar3DChart></Bar3DChart> -->
|
|
|
|
|
<!-- <fenleiChart :chart-data="chartData" /> -->
|
|
|
|
|
</div>
|
|
|
|
|
@ -56,17 +61,21 @@
|
|
|
|
|
import Bar3DChart from '../jsc/components/barChart.vue'
|
|
|
|
|
import fenleiChart from '../jsc/components/fenleiChart.vue'
|
|
|
|
|
import Pie3DChart from '../jsc/components/pieChart.vue'
|
|
|
|
|
import echartsMap from './components/mapChart.vue'
|
|
|
|
|
import echartsMap from './components/mapChart.vue'
|
|
|
|
|
import WarehouseTable from './components/WarehouseTable.vue'
|
|
|
|
|
|
|
|
|
|
import {
|
|
|
|
|
fenleiCharts,
|
|
|
|
|
homeCharts
|
|
|
|
|
homeCharts,
|
|
|
|
|
|
|
|
|
|
} from '@/api/charts.js'
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
Bar3DChart,
|
|
|
|
|
Pie3DChart,
|
|
|
|
|
echartsMap,
|
|
|
|
|
fenleiChart
|
|
|
|
|
fenleiChart,
|
|
|
|
|
WarehouseTable
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
@ -84,11 +93,13 @@ export default {
|
|
|
|
|
topObj: [{
|
|
|
|
|
label: '仓库数量',
|
|
|
|
|
value: 0,
|
|
|
|
|
id: 'cangku_count'
|
|
|
|
|
id: 'cangku_count',
|
|
|
|
|
unit:'间'
|
|
|
|
|
}, {
|
|
|
|
|
label: '物资种类',
|
|
|
|
|
value: 0,
|
|
|
|
|
id: 'wuzizhonglei_count'
|
|
|
|
|
id: 'wuzizhonglei_count',
|
|
|
|
|
unit:'类'
|
|
|
|
|
},
|
|
|
|
|
// {
|
|
|
|
|
// label: '本月出库',
|
|
|
|
|
@ -100,22 +111,35 @@ export default {
|
|
|
|
|
// id: 'ruku_month_count'
|
|
|
|
|
// },
|
|
|
|
|
{
|
|
|
|
|
label: '应急调度次数',
|
|
|
|
|
value: 0,
|
|
|
|
|
id: 'yingjidiaodu_count'
|
|
|
|
|
}, {
|
|
|
|
|
label: '装备总数',
|
|
|
|
|
label: '本年度市级调度',
|
|
|
|
|
value: 0,
|
|
|
|
|
id: 'shebei_count'
|
|
|
|
|
id: 'yingjidiaodu_count',
|
|
|
|
|
unit:'次'
|
|
|
|
|
}, {
|
|
|
|
|
label: '盘点',
|
|
|
|
|
label: '队伍数量',
|
|
|
|
|
value: 0,
|
|
|
|
|
id: 'pan_count'
|
|
|
|
|
id: 'shebei_count',
|
|
|
|
|
unit:'个'
|
|
|
|
|
}, {
|
|
|
|
|
label: '维护',
|
|
|
|
|
label: '队伍出动人次',
|
|
|
|
|
value: 0,
|
|
|
|
|
id: 'weihu_count'
|
|
|
|
|
}],
|
|
|
|
|
id: 'shebei_count',
|
|
|
|
|
unit:'人次'
|
|
|
|
|
}
|
|
|
|
|
// {
|
|
|
|
|
// label: '装备总数',
|
|
|
|
|
// value: 0,
|
|
|
|
|
// id: 'shebei_count'
|
|
|
|
|
// }, {
|
|
|
|
|
// label: '盘点',
|
|
|
|
|
// value: 0,
|
|
|
|
|
// id: 'pan_count'
|
|
|
|
|
// }, {
|
|
|
|
|
// label: '维护',
|
|
|
|
|
// value: 0,
|
|
|
|
|
// id: 'weihu_count'
|
|
|
|
|
// },
|
|
|
|
|
],
|
|
|
|
|
bottomObj: [{
|
|
|
|
|
label: '库存管理',
|
|
|
|
|
path: '/views/inventorys'
|
|
|
|
|
@ -159,7 +183,16 @@ export default {
|
|
|
|
|
}, {
|
|
|
|
|
id: 'weihu',
|
|
|
|
|
value: '维护'
|
|
|
|
|
}]
|
|
|
|
|
}],
|
|
|
|
|
imgList:{
|
|
|
|
|
'袋类':require("@/assets/dailei.jpg"),
|
|
|
|
|
'排水类':require('@/assets/beng.jpg'),
|
|
|
|
|
'土工布类':require('@/assets/tugongbu.jpg'),
|
|
|
|
|
'动力及照明类':require('@/assets/zhaoming.jpg'),
|
|
|
|
|
'移动泵车':require('@/assets/bengche.jpg'),
|
|
|
|
|
'桩类':require('@/assets/zhuanglei.jpg'),
|
|
|
|
|
'砂石类':require('@/assets/shashi.jpg'),
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
@ -180,7 +213,6 @@ export default {
|
|
|
|
|
|
|
|
|
|
this.calculateScreenSize()
|
|
|
|
|
window.addEventListener('resize', this.calculateScreenSize)
|
|
|
|
|
this.startAutoSwitch()
|
|
|
|
|
},
|
|
|
|
|
beforeRouteLeave(to, from, next) {
|
|
|
|
|
this.$store.dispatch('app/toggleSideBar')
|
|
|
|
|
@ -208,18 +240,10 @@ export default {
|
|
|
|
|
this.xData.push(item.value)
|
|
|
|
|
this.yData.push(home.rate[item.id])
|
|
|
|
|
})
|
|
|
|
|
console.log(this.xData, this.yData)
|
|
|
|
|
//
|
|
|
|
|
// this.apiData = res.fenleiLevel1
|
|
|
|
|
// this.chartDataMap = this.convertFenleiToChartDataMap(this.apiData)
|
|
|
|
|
// let arr = []
|
|
|
|
|
// res.upList.map(item=>{
|
|
|
|
|
// arr.push({
|
|
|
|
|
// name:item.name,
|
|
|
|
|
// value:item.total,
|
|
|
|
|
// unit:item.unit
|
|
|
|
|
// })
|
|
|
|
|
// })
|
|
|
|
|
console.log(this.xData, this.yData)
|
|
|
|
|
res.upList.map(item=>{
|
|
|
|
|
item.img = this.imgList[item.name]
|
|
|
|
|
})
|
|
|
|
|
this.upList = this.mergeAndRename(res.upList)
|
|
|
|
|
console.log("this.upList",this.upList)
|
|
|
|
|
},
|
|
|
|
|
@ -228,30 +252,31 @@ export default {
|
|
|
|
|
let pumpTotal = 0; // 排水类总和
|
|
|
|
|
let mobilePumpTotal = 0; // 移动泵车总和
|
|
|
|
|
let pumpUnit = ""; // 排水类的单位
|
|
|
|
|
|
|
|
|
|
let pumpImg = this.imgList['排水类']
|
|
|
|
|
// 第一步：遍历数组，处理常规项并统计特殊项
|
|
|
|
|
arr.forEach(item => {
|
|
|
|
|
const { name, total, unit } = item;
|
|
|
|
|
const { name, total, unit, img } = item;
|
|
|
|
|
const value = total;
|
|
|
|
|
|
|
|
|
|
if (name === "排水类") {
|
|
|
|
|
pumpTotal += value;
|
|
|
|
|
// 记录排水类的unit（假设所有排水类unit相同）
|
|
|
|
|
if (!pumpUnit) pumpUnit = unit;
|
|
|
|
|
|
|
|
|
|
} else if (name === "移动泵车") {
|
|
|
|
|
mobilePumpTotal += value;
|
|
|
|
|
// 正常处理移动泵车，加入结果集
|
|
|
|
|
if (resultMap.has(name)) {
|
|
|
|
|
resultMap.get(name).value += value;
|
|
|
|
|
} else {
|
|
|
|
|
resultMap.set(name, { name, value, unit });
|
|
|
|
|
resultMap.set(name, { name, value, unit,img });
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
// 常规项处理
|
|
|
|
|
if (resultMap.has(name)) {
|
|
|
|
|
resultMap.get(name).value += value;
|
|
|
|
|
} else {
|
|
|
|
|
resultMap.set(name, { name, value, unit });
|
|
|
|
|
resultMap.set(name, { name, value, unit,img });
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
@ -259,84 +284,12 @@ export default {
|
|
|
|
|
// 第二步：计算泵类值并添加到结果集
|
|
|
|
|
if (pumpTotal > 0) {
|
|
|
|
|
const finalPumpValue = pumpTotal - mobilePumpTotal;
|
|
|
|
|
resultMap.set("泵", { name: "泵", value: finalPumpValue, unit: pumpUnit });
|
|
|
|
|
resultMap.set("泵", { name: "泵", value: finalPumpValue, unit: pumpUnit,img:pumpImg });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return Array.from(resultMap.values());
|
|
|
|
|
},
|
|
|
|
|
// 处理分类数据
|
|
|
|
|
convertFenleiToChartDataMap(fenleiLevel1) {
|
|
|
|
|
const chartDataMap = {}
|
|
|
|
|
this.typeList = []
|
|
|
|
|
fenleiLevel1.forEach(level1 => {
|
|
|
|
|
const level1Name = level1.value
|
|
|
|
|
// 一级
|
|
|
|
|
this.typeList.push(level1Name)
|
|
|
|
|
const level1Arr = [{
|
|
|
|
|
value: level1.details.reduce((sum, d) => sum + (d.total_count || 0), 0), // 或自定义总数
|
|
|
|
|
name: level1Name
|
|
|
|
|
}]
|
|
|
|
|
|
|
|
|
|
// 二级
|
|
|
|
|
const level2Arr = []
|
|
|
|
|
// 三级
|
|
|
|
|
const level3Arr = [];
|
|
|
|
|
|
|
|
|
|
(level1.details || []).forEach(level2 => {
|
|
|
|
|
// 二级 value 为其所有 inventorys 的 total_count 之和
|
|
|
|
|
let level2Value = 0;
|
|
|
|
|
(level2.inventorys || []).forEach(inv => {
|
|
|
|
|
level2Value += Number(inv.total_count) || 0
|
|
|
|
|
})
|
|
|
|
|
// 如果没有三级，直接用 total_count 字段
|
|
|
|
|
if (level2Value === 0) level2Value = level2.total_count || 0
|
|
|
|
|
|
|
|
|
|
level2Arr.push({
|
|
|
|
|
value: level2Value,
|
|
|
|
|
name: level2.value
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 三级
|
|
|
|
|
(level2.inventorys || []).forEach(inv => {
|
|
|
|
|
level3Arr.push({
|
|
|
|
|
value: inv.total_count,
|
|
|
|
|
name: inv.jiliangdanwei,
|
|
|
|
|
parent: level2.value
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
chartDataMap[level1Name] = {
|
|
|
|
|
level1: level1Arr,
|
|
|
|
|
level2: level2Arr,
|
|
|
|
|
level3: level3Arr
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
return chartDataMap
|
|
|
|
|
},
|
|
|
|
|
// 启动自动切换
|
|
|
|
|
startAutoSwitch() {
|
|
|
|
|
clearInterval(this.autoTimer)
|
|
|
|
|
let idx = this.typeList.indexOf(this.activeType)
|
|
|
|
|
this.autoTimer = setInterval(() => {
|
|
|
|
|
idx = (idx + 1) % this.typeList.length
|
|
|
|
|
this.activeType = this.typeList[idx]
|
|
|
|
|
}, 5000) // 10秒
|
|
|
|
|
},
|
|
|
|
|
// 停止自动切换，并在20秒后恢复
|
|
|
|
|
stopAutoSwitchAndResumeLater() {
|
|
|
|
|
clearInterval(this.autoTimer)
|
|
|
|
|
clearTimeout(this.resumeTimer)
|
|
|
|
|
this.resumeTimer = setTimeout(() => {
|
|
|
|
|
this.startAutoSwitch()
|
|
|
|
|
}, 10000) // 20秒
|
|
|
|
|
},
|
|
|
|
|
// 按钮点击事件
|
|
|
|
|
handleTypeClick(type) {
|
|
|
|
|
this.activeType = type
|
|
|
|
|
this.stopAutoSwitchAndResumeLater()
|
|
|
|
|
},
|
|
|
|
|
setRem() {
|
|
|
|
|
// 默认使用100px作为基准大小
|
|
|
|
|
const baseSize = 100
|
|
|
|
|
@ -430,7 +383,7 @@ export default {
|
|
|
|
|
|
|
|
|
|
// flex-wrap: wrap;
|
|
|
|
|
&-left {
|
|
|
|
|
|
|
|
|
|
// height: 400px;
|
|
|
|
|
&-title {
|
|
|
|
|
color: #6dcde6;
|
|
|
|
|
text-align: center;
|
|
|
|
|
@ -440,12 +393,21 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
&-content{
|
|
|
|
|
width: 450px;
|
|
|
|
|
height: 400px;
|
|
|
|
|
display:flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
&>div{
|
|
|
|
|
text-align: center;
|
|
|
|
|
flex-basis: 50%;
|
|
|
|
|
text-align: left;
|
|
|
|
|
margin:10px 0;
|
|
|
|
|
color:#fff;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
&>img{
|
|
|
|
|
width:30px;
|
|
|
|
|
height:30px;
|
|
|
|
|
margin-right:10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.custom-btn {
|
|
|
|
|
|
lynn
3 months ago
