master
lion 10 months ago
parent 989fb7de6c
commit ba3d5d7890

@ -32,7 +32,12 @@
</xy-table>
</div>
</div>
<button v-if="currentArea" @click="resetToFullMap" style="position:absolute;top:10px;left:10px;z-index:10;">返回全图</button>
<div style="position:absolute;top:10px;left:10px;z-index:10;display:flex;flex-direction:column;gap:8px;">
<button v-if="currentArea" @click="resetToFullMap">返回全图</button>
<button v-if="shibenjiWarehouseCount !== null" @click="loadShibenjiWarehouse" style="background-color:#1890ff;color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;">
市本级({{ shibenjiWarehouseCount }})
</button>
</div>
</div>
</template>
@ -67,6 +72,8 @@ export default {
wuziTotal:0,
cangkuObj:{},
warehouseData: [], // 仓库数量数据
shibenjiWarehouseCount: null, // 市本级仓库数量
shibenjiAreaId: null, // 市本级区域ID
table: [{
label: '序号',
type: 'index',
@ -561,7 +568,13 @@ export default {
formatter: '{b}',
position: 'top',
color: 'orange',
fontSize: 12
fontSize: 12,
triggerEvent: true // 允许标签触发事件
},
emphasis: {
label: {
show: true
}
}
}
],
@ -577,9 +590,23 @@ export default {
// 重新绑定地图点击事件
this.myChart.off('click');
this.myChart.on('click', params => {
if (params.seriesType === 'scatter') {
this.getWuzi(params.data);
} else if (params.componentType === 'series' && params.seriesType === 'map') {
// 优先处理仓库点位点击(包括图标和标签)
if (params.seriesName === '仓库点位') {
// 如果点击的是标签,需要通过 dataIndex 获取数据
if (params.dataIndex !== undefined && params.dataIndex !== null) {
const warehouseData = this.warehousePoints[params.dataIndex]
if (warehouseData) {
this.getWuzi(warehouseData)
return // 阻止后续处理
}
} else if (params.data) {
// 如果点击的是图标,直接使用 data
this.getWuzi(params.data)
return // 阻止后续处理
}
}
// 处理地图区域点击
if (params.componentType === 'series' && params.seriesType === 'map') {
const areaName = params.name;
const areaObj = this.streetNameList.find(item => item.name === areaName);
if (areaObj) {
@ -709,7 +736,17 @@ export default {
},
updateWarehouseData(warehouseData) {
// 更新仓库数量数据
this.warehouseData = warehouseData;
this.warehouseData = warehouseData
// 查找市本级的数据
const shibenjiInfo = warehouseData.find(w => w.name === '市本级')
if (shibenjiInfo) {
this.shibenjiWarehouseCount = shibenjiInfo.warehouseCount || 0
this.shibenjiAreaId = shibenjiInfo.id || null
} else {
this.shibenjiWarehouseCount = null
this.shibenjiAreaId = null
}
// 更新地图上的区域标签,显示仓库数量
const updatedStreetList = this.streetNameList.map(street => {
@ -769,6 +806,168 @@ export default {
});
}
},
async loadShibenjiWarehouse() {
// 加载市本级的仓库数据并放大地图
if (!this.shibenjiAreaId) {
if (this.$message) {
this.$message.warning('未找到市本级区域ID')
}
return
}
// 设置当前区域,用于显示"返回全图"按钮
this.currentArea = {
name: '市本级',
id: this.shibenjiAreaId
}
// 调用加载仓库数据的方法
await this.loadWarehouseWithoutZoom(this.shibenjiAreaId)
},
async loadWarehouseWithoutZoom(areaId) {
// 加载仓库数据并放大地图
console.log('加载市本级仓库数据,区域ID:', areaId);
// 1. 获取仓库点位数据
const warehouseList = await this.getList(areaId);
console.log('获取到的仓库列表:', warehouseList);
// 2. 生成点位
this.warehousePoints = (warehouseList || []).map(item => {
const jingdu = Number(item.jingdu);
const weidu = Number(item.weidu);
// 验证坐标数据
if (isNaN(jingdu) || isNaN(weidu) || jingdu === 0 || weidu === 0) {
console.warn('仓库坐标无效:', item.cangkumingcheng, '经度:', item.jingdu, '纬度:', item.weidu);
return null;
}
return {
name: item.cangkumingcheng,
value: [jingdu, weidu],
id: item.id,
item: item
};
}).filter(point => point !== null); // 过滤掉无效的坐标点
console.log('生成的仓库点位:', this.warehousePoints);
console.log('有效仓库点位数量:', this.warehousePoints.length);
// 3. 计算仓库点位的中心点,用于设置地图中心
let centerCoord = [120.585294, 31.299758] // 默认苏州中心点
let zoomLevel = 3.5 // 默认缩放级别
if (this.warehousePoints.length > 0) {
// 计算所有仓库点位的中心点
const validPoints = this.warehousePoints.filter(p => p.value && p.value.length === 2)
if (validPoints.length > 0) {
const sumLng = validPoints.reduce((sum, p) => sum + p.value[0], 0)
const sumLat = validPoints.reduce((sum, p) => sum + p.value[1], 0)
centerCoord = [sumLng / validPoints.length, sumLat / validPoints.length]
// 根据仓库数量调整缩放级别
if (validPoints.length === 1) {
zoomLevel = 4
} else if (validPoints.length <= 3) {
zoomLevel = 3.5
} else {
zoomLevel = 3
}
}
}
// 4. 添加仓库点位并设置地图的center和zoom
this.myChart.setOption({
series: [
{
name: '区域',
type: 'map',
map: 'GX',
geoIndex: 0,
markPoint: {
symbol: '',
symbolSize: [10, 10],
symbolOffset: [0, 0],
label: {
position: 'center',
color: '#333',
textAlign: 'center',
padding: [5, 10],
borderRadius: 20,
borderWidth: 1,
borderColor: '#096dd9',
backgroundColor: '#fff',
formatter(val) {
return val.data.name
}
},
data: this.streetNameList
}
},
{
name: '仓库点位',
type: 'scatter',
coordinateSystem: 'geo',
data: this.warehousePoints,
symbol: 'pin',
symbolSize: [16, 20],
itemStyle: { color: 'orange' },
label: {
show: true,
formatter: '{b}',
position: 'top',
color: 'orange',
fontSize: 12,
triggerEvent: true // 允许标签触发事件
},
emphasis: {
label: {
show: true
}
}
}
],
geo: {
center: centerCoord,
zoom: zoomLevel
}
});
// 强制刷新地图
this.myChart.resize();
// 重新绑定地图点击事件
this.myChart.off('click');
this.myChart.on('click', params => {
// 优先处理仓库点位点击(包括图标和标签)
if (params.seriesName === '仓库点位') {
// 如果点击的是标签,需要通过 dataIndex 获取数据
if (params.dataIndex !== undefined && params.dataIndex !== null) {
const warehouseData = this.warehousePoints[params.dataIndex]
if (warehouseData) {
this.getWuzi(warehouseData)
return // 阻止后续处理
}
} else if (params.data) {
// 如果点击的是图标,直接使用 data
this.getWuzi(params.data)
return // 阻止后续处理
}
}
// 处理地图区域点击
if (params.componentType === 'series' && params.seriesType === 'map') {
const areaName = params.name;
const areaObj = this.streetNameList.find(item => item.name === areaName);
if (areaObj) {
this.currentArea = areaObj;
this.zoomToArea(areaObj);
}
} else if (params.componentType === 'geo') {
this.resetToFullMap();
}
});
},
async getWuzi(cangku) {
console.log("warehouseId",cangku)
this.cangkuObj = cangku.item

@ -642,6 +642,22 @@ export default {
}
})
this.upListByFloodMaterials = mergedFlood
// 处理仓库数量数据,传递给地图组件
if (home.teamArea && Array.isArray(home.teamArea)) {
const warehouseData = home.teamArea.map(item => ({
name: item.value,
warehouseCount: item.materialstorages_total || 0,
id: item.id || item.quyu_id || null // 包含区域ID
}))
// 通过ref调用地图组件的方法更新数据
this.$nextTick(() => {
if (this.$refs.echartsMap && this.$refs.echartsMap.updateWarehouseData) {
this.$refs.echartsMap.updateWarehouseData(warehouseData)
}
})
}
// this.startAutoSwitch()
},
mergeAndRename(arr) {

@ -65,8 +65,8 @@
<i class="el-icon-arrow-right" @click="nextArea"></i>
</div>
<div class="materials-grid">
<template v-for="(item,index) in areaMaterials">
<div class="material-item" v-if="item.value != '桩类'">
<template v-for="item in areaMaterials">
<div class="material-item" v-if="item.value != '桩类'" :key="item.value">
<!-- 四个角的三角形 -->
<div class="corner top-left"></div>
<div class="corner top-right"></div>
@ -261,7 +261,8 @@ export default {
// 处理仓库数量数据,传递给地图组件
const warehouseData = home.teamArea.map(item => ({
name: item.value,
warehouseCount: item.materialstorages_total || 0
warehouseCount: item.materialstorages_total || 0,
id: item.id || item.quyu_id || null // 包含区域ID
}))
// 通过ref调用地图组件的方法更新数据

File diff suppressed because it is too large Load Diff

@ -4,26 +4,26 @@
<script>
import * as echarts from 'echarts'
export default {
props: {
lineDataX: {
type: Array,
default: {}
},
lineDataY: {
type: Array,
default: []
},
rotate: {
type: Number,
default: 0
},
color: {
type: Array,
default: () => {
return ['#0077CC', '#333']
}
}
export default {
props: {
lineDataX: {
type: Array,
default: {}
},
lineDataY: {
type: Array,
default: []
},
rotate: {
type: Number,
default: 0
},
color: {
type: Array,
default: () => {
return ['#0077CC', '#333']
}
}
},
data() {
return {
@ -33,7 +33,42 @@ export default {
mounted() {
this.initEchartsMap()
},
watch: {
lineDataX: {
handler() {
if (this.myChart) {
this.updateChart()
}
},
deep: true
},
lineDataY: {
handler() {
if (this.myChart) {
this.updateChart()
}
},
deep: true
},
rotate() {
if (this.myChart) {
this.updateChart()
}
}
},
methods: {
updateChart() {
const option = {
xAxis: [{
axisLabel: {
rotate: this.rotate
},
data: this.lineDataX
}],
series: this.lineDataY
}
this.myChart.setOption(option)
},
initEchartsMap() {
this.myChart = echarts.init(this.$refs['chartsDOM'])
var option = {
@ -57,9 +92,9 @@ export default {
axisTick: {
alignWithLabel: true
},
axisLabel: {
show: true,
interval: 0,
axisLabel: {
show: true,
interval: 0,
rotate: this.rotate,
textStyle: {
show: true,
@ -68,15 +103,15 @@ export default {
}
}],
yAxis: [{
type: 'value',
axisLabel: {
textStyle: {
show: true,
color: this.color[1]
}
type: 'value',
axisLabel: {
textStyle: {
show: true,
color: this.color[1]
}
}
}],
series: this.lineDataY
series: this.lineDataY
// [{
// name: '数量',
// type: 'bar',
@ -95,4 +130,4 @@ export default {
</script>
<style>
</style>
</style>

@ -6,19 +6,19 @@
</div>
<div class="wrap" :style="{'height':mapHeight+'px'}">
<div>
<el-date-picker
v-model="dateRange"
value-format="yyyy-MM-dd"
type="daterange"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right"
@change="changeDate"
<el-date-picker
v-model="dateRange"
value-format="yyyy-MM-dd"
type="daterange"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right"
@change="changeDate"
/>
</div>
<echartsLine v-if="showCharts" ref="echartsLine1" :line-data-x="monthX" :line-data-y="monthY" />
<echartsLine v-if="showCharts" ref="echartsLine1" :line-data-x="monthX" :line-data-y="monthY" :rotate="xAxisRotate" />
</div>
</div>
</template>
@ -36,54 +36,61 @@ export default {
return {
mapHeight: 0,
monthX: [],
monthY: [{
name: '领用',
type: 'bar',
data: []
}, {
name: '处置',
type: 'bar',
data: []
}, {
name: '应急',
type: 'bar',
data: []
monthY: [{
name: '领用',
type: 'bar',
data: []
}, {
name: '处置',
type: 'bar',
data: []
}, {
name: '应急',
type: 'bar',
data: []
}],
showCharts: false,
start_time: '',
end_time: '',
dateRange: [],
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}]
end_time: '',
dateRange: [],
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}]
}
}
}
},
computed: {
// 根据 x 轴数据量动态计算旋转角度
xAxisRotate() {
// 当 x 轴数据超过 10 个时,设置旋转角度为 60 度
return this.monthX.length > 10 ? 60 : 0
}
},
created() {
this.initHeight()
this.initHeight()
},
methods: {
initHeight() {
@ -91,45 +98,45 @@ export default {
this.mapHeight = winHeight - 150
console.log(winHeight)
this.start_time = this.recentTime(-14, 'yyyy-MM-dd')
this.end_time = this.getNowDate()
this.end_time = this.getNowDate()
this.dateRange = [this.start_time, this.end_time]
this.getCharts()
},
changeDate(e) {
var that = this
this.dateRange = e
that.start_time = e[0]
that.end_time = e[1]
this.getCharts()
},
changeDate(e) {
var that = this
this.dateRange = e
that.start_time = e[0]
that.end_time = e[1]
this.getCharts()
},
async getCharts() {
this.monthX = []
this.monthY = [{
name: '领用',
type: 'bar',
data: []
}, {
name: '处置',
type: 'bar',
data: []
}, {
name: '应急',
type: 'bar',
data: []
}],
this.monthX = []
this.monthY = [{
name: '领用',
type: 'bar',
data: []
}, {
name: '处置',
type: 'bar',
data: []
}, {
name: '应急',
type: 'bar',
data: []
}],
this.showCharts = false
const res = await outboundsCharts({
start_time: this.start_time,
end_time: this.end_time
})
for (var m of res) {
this.monthX.push(m.date.split('-')[1] + '-' + m.date.split('-')[2])
for (var k of m.detail) {
for (var j of this.monthY) {
if (k.rukuleixing == j.name) {
j.data.push(k.total)
}
}
this.monthX.push(m.date.split('-')[1] + '-' + m.date.split('-')[2])
for (var k of m.detail) {
for (var j of this.monthY) {
if (k.rukuleixing == j.name) {
j.data.push(k.total)
}
}
}
}
this.showCharts = true
@ -183,8 +190,8 @@ export default {
<style>
.wrap {
width: 100%;
background-color: #fff;
width: 100%;
background-color: #fff;
padding:15px;
}
</style>
</style>

@ -6,19 +6,19 @@
</div>
<div class="wrap" :style="{'height':mapHeight+'px'}">
<div>
<el-date-picker
v-model="dateRange"
value-format="yyyy-MM-dd"
type="daterange"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right"
@change="changeDate"
<el-date-picker
v-model="dateRange"
value-format="yyyy-MM-dd"
type="daterange"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right"
@change="changeDate"
/>
</div>
<echartsLine v-if="showCharts" ref="echartsLine1" :line-data-x="monthX" :line-data-y="monthY" />
<echartsLine v-if="showCharts" ref="echartsLine1" :line-data-x="monthX" :line-data-y="monthY" :rotate="xAxisRotate" />
</div>
</div>
</template>
@ -36,54 +36,61 @@ export default {
return {
mapHeight: 0,
monthX: [],
monthY: [{
name: '采购',
type: 'bar',
data: []
}, {
name: '盘点',
type: 'bar',
data: []
}, {
name: '回库',
type: 'bar',
data: []
monthY: [{
name: '采购',
type: 'bar',
data: []
}, {
name: '盘点',
type: 'bar',
data: []
}, {
name: '回库',
type: 'bar',
data: []
}],
showCharts: false,
start_time: '',
end_time: '',
dateRange: [],
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}]
end_time: '',
dateRange: [],
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}]
}
}
}
},
computed: {
// 根据 x 轴数据量动态计算旋转角度
xAxisRotate() {
// 当 x 轴数据超过 10 个时,设置旋转角度为 60 度
return this.monthX.length > 10 ? 60 : 0
}
},
created() {
this.initHeight()
this.initHeight()
},
methods: {
initHeight() {
@ -91,49 +98,49 @@ export default {
this.mapHeight = winHeight - 150
console.log(winHeight)
this.start_time = this.recentTime(-14, 'yyyy-MM-dd')
this.end_time = this.getNowDate()
this.end_time = this.getNowDate()
this.dateRange = [this.start_time, this.end_time]
this.getCharts()
},
changeDate(e) {
var that = this
this.dateRange = e
that.start_time = e[0]
that.end_time = e[1]
this.getCharts()
},
changeDate(e) {
var that = this
this.dateRange = e
that.start_time = e[0]
that.end_time = e[1]
this.getCharts()
},
async getCharts() {
this.monthX = []
this.monthY = [{
name: '采购',
type: 'bar',
data: []
}, {
name: '盘点',
type: 'bar',
data: []
}, {
name: '回库',
type: 'bar',
data: []
}, {
name: '请示',
type: 'bar',
data: []
}],
this.monthX = []
this.monthY = [{
name: '采购',
type: 'bar',
data: []
}, {
name: '盘点',
type: 'bar',
data: []
}, {
name: '回库',
type: 'bar',
data: []
}, {
name: '请示',
type: 'bar',
data: []
}],
this.showCharts = false
const res = await stocksCharts({
start_time: this.start_time,
end_time: this.end_time
})
for (var m of res) {
this.monthX.push(m.date.split('-')[1] + '-' + m.date.split('-')[2])
for (var k of m.detail) {
for (var j of this.monthY) {
if (k.rukuleixing == j.name) {
j.data.push(k.total)
}
}
this.monthX.push(m.date.split('-')[1] + '-' + m.date.split('-')[2])
for (var k of m.detail) {
for (var j of this.monthY) {
if (k.rukuleixing == j.name) {
j.data.push(k.total)
}
}
}
}
this.showCharts = true
@ -187,8 +194,8 @@ export default {
<style>
.wrap {
width: 100%;
background-color: #fff;
width: 100%;
background-color: #fff;
padding:15px;
}
</style>
</style>

Loading…
Cancel
Save