Merge branch 'projects/mescc/develop' into projects/mescc/zjl

This commit is contained in:
2024-06-27 16:57:20 +08:00
22 changed files with 622 additions and 319 deletions

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-19 15:28:34
* @LastEditTime: 2024-06-26 10:42:16
* @LastEditTime: 2024-06-27 10:40:57
* @LastEditors: zhp
* @Description:
-->
@@ -87,11 +87,32 @@ export default {
// 设置滚动条类型
type: "slider",
// 设置背景颜色
backgroundColor: "rgb(19, 63, 100)",
backgroundColor: "#F7F7F7",
// handleStyle: {
// color: '#D6D6D6'
// },
handleStyle: {
borderColor: '#EBEBEB',
color: '#EBEBEB'
},
moveHandleStyle: {
borderColor: '#EBEBEB',
color: '#EBEBEB'
},
emphasis: {
handleStyle: {
borderColor: '#D6D6D6',
color: '#D6D6D6'
},
moveHandleStyle: {
borderColor: '#D6D6D6',
color: '#D6D6D6'
}
},
// 设置选中范围的填充颜色
fillerColor: "rgb(16, 171, 198)",
fillerColor: "#F7F7F7",
// 设置边框颜色
borderColor: "rgb(19, 63, 100)",
borderColor: "#F7F7F7",
// 是否显示detail即拖拽时候显示详细数值信息
showDetail: false,
// 数据窗口范围的起始数值
@@ -102,9 +123,9 @@ export default {
// 即不会影响其他轴的数据范围
filterMode: "empty",
// 设置滚动条宽度,相对于盒子宽度
width: "50%",
width: "100%",
// 设置滚动条高度
height: 8,
height: 3,
// 设置滚动条显示位置
left: "center",
// 是否锁定选择区域(或叫做数据窗口)的大小
@@ -112,7 +133,7 @@ export default {
// 控制手柄的尺寸
handleSize: 0,
// dataZoom-slider组件离容器下侧的距离
bottom: 3,
bottom: 14,
},
{
// 没有下面这块的话,只能拖动滚动条,
@@ -124,7 +145,6 @@ export default {
moveOnMouseMove: true,
moveOnMouseWheel: true,
},
],
yAxis:undefined,
series: [],

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-20 16:13:36
* @LastEditTime: 2024-06-26 14:48:49
* @LastEditTime: 2024-06-27 09:51:43
* @LastEditors: zhp
* @Description:
-->
@@ -36,7 +36,7 @@ export default {
color: [],
// color: ["#8EF0AB", "#63BDFF", "#288AFF"],
grid: {
left: -60,
left: 20,
right: 0,
bottom: 31,
top: 30,
@@ -80,52 +80,52 @@ export default {
type: "shadow",
},
},
dataZoom: [//滚动条
{
// 设置滚动条的隐藏与显示
show: true,
// 设置滚动条类型
type: "slider",
// 设置背景颜色
backgroundColor: "rgb(19, 63, 100)",
// 设置选中范围的填充颜色
fillerColor: "rgb(16, 171, 198)",
// 设置边框颜色
borderColor: "rgb(19, 63, 100)",
// 是否显示detail即拖拽时候显示详细数值信息
showDetail: false,
// 数据窗口范围的起始数值
startValue: 0,
// 数据窗口范围的结束数值(一页显示多少条数据)
endValue: 5,
// empty当前数据窗口外的数据被设置为空。
// 即不会影响其他轴的数据范围
filterMode: "empty",
// 设置滚动条宽度,相对于盒子宽度
width: "50%",
// 设置滚动条高度
height: 8,
// 设置滚动条显示位置
left: "center",
// 是否锁定选择区域(或叫做数据窗口)的大小
zoomLoxk: true,
// 控制手柄的尺寸
handleSize: 0,
// dataZoom-slider组件离容器下侧的距离
bottom: 3,
},
{
// 没有下面这块的话,只能拖动滚动条,
// 鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
// 滚轮是否触发缩放
zoomOnMouseWheel: false,
// 鼠标滚轮触发滚动
moveOnMouseMove: true,
moveOnMouseWheel: true,
},
// dataZoom: [//滚动条
// {
// // 设置滚动条的隐藏与显示
// show: true,
// // 设置滚动条类型
// type: "slider",
// // 设置背景颜色
// backgroundColor: "rgb(19, 63, 100)",
// // 设置选中范围的填充颜色
// fillerColor: "rgb(16, 171, 198)",
// // 设置边框颜色
// borderColor: "rgb(19, 63, 100)",
// // 是否显示detail即拖拽时候显示详细数值信息
// showDetail: false,
// // 数据窗口范围的起始数值
// startValue: 0,
// // 数据窗口范围的结束数值(一页显示多少条数据)
// endValue: 5,
// // empty当前数据窗口外的数据被设置为空。
// // 即不会影响其他轴的数据范围
// filterMode: "empty",
// // 设置滚动条宽度,相对于盒子宽度
// width: "50%",
// // 设置滚动条高度
// height: 8,
// // 设置滚动条显示位置
// left: "center",
// // 是否锁定选择区域(或叫做数据窗口)的大小
// zoomLoxk: true,
// // 控制手柄的尺寸
// handleSize: 0,
// // dataZoom-slider组件离容器下侧的距离
// bottom: 3,
// },
// {
// // 没有下面这块的话,只能拖动滚动条,
// // 鼠标滚轮在区域内不能控制外部滚动条
// type: "inside",
// // 滚轮是否触发缩放
// zoomOnMouseWheel: false,
// // 鼠标滚轮触发滚动
// moveOnMouseMove: true,
// moveOnMouseWheel: true,
// },
],
// ],
yAxis:undefined,
series: [],
},
@@ -136,6 +136,10 @@ export default {
type: Number,
default: 300,
},
gridLeft: {
type: Boolean,
default: true,
},
type: {
type: Number,
default: 2,
@@ -166,7 +170,12 @@ export default {
handler(newVal) {
this.chartHeight = newVal;
},
},
// gridLeft(val) {
// console.log(val)
// },
type() {
this.canvasReset();
},
@@ -190,6 +199,12 @@ export default {
}, 500)();
},
getMes() {
console.log(this.gridLeft)
if (this.gridLeft === false) {
this.option.grid.left = 20
} else {
this.option.grid.left = -80
}
// console.log('222222', this.chartMsg);
if (this.myChart) {
this.myChart.dispose();
@@ -197,7 +212,7 @@ export default {
var chartDom = document.getElementById(this.chartId);
this.myChart = echarts.init(chartDom);
this.option.color = this.chartMsg.color;
this.option.xAxis.data = this.chartMsg.xData;
this.option.xAxis.data = this.chartMsg.xData
// this.option.yAxis.name = this.chartMsg.yName;
// this.option.yAxis.axisLabel = this.chartMsg.yAxisLabel;

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-20 16:13:52
* @LastEditTime: 2024-06-25 10:49:34
* @LastEditTime: 2024-06-27 09:55:02
* @LastEditors: zhp
* @Description:
-->
@@ -80,52 +80,52 @@ export default {
type: "shadow",
},
},
dataZoom: [//滚动条
{
// 设置滚动条的隐藏与显示
show: true,
// 设置滚动条类型
type: "slider",
// 设置背景颜色
backgroundColor: "rgb(19, 63, 100)",
// 设置选中范围的填充颜色
fillerColor: "rgb(16, 171, 198)",
// 设置边框颜色
borderColor: "rgb(19, 63, 100)",
// 是否显示detail即拖拽时候显示详细数值信息
showDetail: false,
// 数据窗口范围的起始数值
startValue: 0,
// 数据窗口范围的结束数值(一页显示多少条数据)
endValue: 5,
// empty当前数据窗口外的数据被设置为空。
// 即不会影响其他轴的数据范围
filterMode: "empty",
// 设置滚动条宽度,相对于盒子宽度
width: "50%",
// 设置滚动条高度
height: 8,
// 设置滚动条显示位置
left: "center",
// 是否锁定选择区域(或叫做数据窗口)的大小
zoomLoxk: true,
// 控制手柄的尺寸
handleSize: 0,
// dataZoom-slider组件离容器下侧的距离
bottom: 3,
},
{
// 没有下面这块的话,只能拖动滚动条,
// 鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
// 滚轮是否触发缩放
zoomOnMouseWheel: false,
// 鼠标滚轮触发滚动
moveOnMouseMove: true,
moveOnMouseWheel: true,
},
// dataZoom: [//滚动条
// {
// // 设置滚动条的隐藏与显示
// show: true,
// // 设置滚动条类型
// type: "slider",
// // 设置背景颜色
// backgroundColor: "rgb(19, 63, 100)",
// // 设置选中范围的填充颜色
// fillerColor: "rgb(16, 171, 198)",
// // 设置边框颜色
// borderColor: "rgb(19, 63, 100)",
// // 是否显示detail即拖拽时候显示详细数值信息
// showDetail: false,
// // 数据窗口范围的起始数值
// startValue: 0,
// // 数据窗口范围的结束数值(一页显示多少条数据)
// endValue: 5,
// // empty当前数据窗口外的数据被设置为空。
// // 即不会影响其他轴的数据范围
// filterMode: "empty",
// // 设置滚动条宽度,相对于盒子宽度
// width: "50%",
// // 设置滚动条高度
// height: 8,
// // 设置滚动条显示位置
// left: "center",
// // 是否锁定选择区域(或叫做数据窗口)的大小
// zoomLoxk: true,
// // 控制手柄的尺寸
// handleSize: 0,
// // dataZoom-slider组件离容器下侧的距离
// bottom: 3,
// },
// {
// // 没有下面这块的话,只能拖动滚动条,
// // 鼠标滚轮在区域内不能控制外部滚动条
// type: "inside",
// // 滚轮是否触发缩放
// zoomOnMouseWheel: false,
// // 鼠标滚轮触发滚动
// moveOnMouseMove: true,
// moveOnMouseWheel: true,
// },
],
// ],
yAxis:undefined,
series: [],
},

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-21 09:05:14
* @LastEditTime: 2024-06-26 14:49:15
* @LastEditTime: 2024-06-27 10:59:40
* @LastEditors: zhp
* @Description:
-->
@@ -98,52 +98,51 @@ export default {
type: "shadow",
},
},
dataZoom: [//滚动条
{
// 设置滚动条的隐藏与显示
show: true,
// 设置滚动条类型
type: "slider",
// 设置背景颜色
backgroundColor: "rgb(19, 63, 100)",
// 设置选中范围的填充颜色
fillerColor: "rgb(16, 171, 198)",
// 设置边框颜色
borderColor: "rgb(19, 63, 100)",
// 是否显示detail即拖拽时候显示详细数值信息
showDetail: false,
// 数据窗口范围的起始数值
startValue: 0,
// 数据窗口范围的结束数值(一页显示多少条数据)
endValue: 5,
// empty当前数据窗口外的数据被设置为空。
// 即不会影响其他轴的数据范围
filterMode: "empty",
// 设置滚动条宽度,相对于盒子宽度
width: "50%",
// 设置滚动条高度
height: 8,
// 设置滚动条显示位置
left: "center",
// 是否锁定选择区域(或叫做数据窗口)的大小
zoomLoxk: true,
// 控制手柄的尺寸
handleSize: 0,
// dataZoom-slider组件离容器下侧的距离
bottom: 3,
},
{
// 没有下面这块的话,只能拖动滚动条,
// 鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
// 滚轮是否触发缩放
zoomOnMouseWheel: false,
// 鼠标滚轮触发滚动
moveOnMouseMove: true,
moveOnMouseWheel: true,
},
],
// dataZoom: [//滚动条
// {
// // 设置滚动条的隐藏与显示
// show: true,
// // 设置滚动条类型
// type: "slider",
// // 设置背景颜色
// backgroundColor: "#F7F7F7",
// // 设置选中范围的填充颜色
// fillerColor: "#EBEBEB",
// // 设置边框颜色
// borderColor: "#F7F7F7",
// // 是否显示detail即拖拽时候显示详细数值信息
// showDetail: false,
// // 数据窗口范围的起始数值
// startValue: 0,
// // 数据窗口范围的结束数值(一页显示多少条数据)
// endValue: 5,
// // empty当前数据窗口外的数据被设置为空。
// // 即不会影响其他轴的数据范围
// filterMode: "empty",
// // 设置滚动条宽度,相对于盒子宽度
// width: "100%",
// // 设置滚动条高度
// height: 8,
// // 设置滚动条显示位置
// left: "center",
// // 是否锁定选择区域(或叫做数据窗口)的大小
// zoomLoxk: true,
// // 控制手柄的尺寸
// handleSize: 0,
// // dataZoom-slider组件离容器下侧的距离
// bottom: 3,
// },
// {
// // 没有下面这块的话,只能拖动滚动条,
// // 鼠标滚轮在区域内不能控制外部滚动条
// type: "inside",
// // 滚轮是否触发缩放
// zoomOnMouseWheel: false,
// // 鼠标滚轮触发滚动
// moveOnMouseMove: true,
// moveOnMouseWheel: true,
// },
// ],
yAxis:undefined,
series: [],
},

View File

@@ -176,12 +176,12 @@ export default {
type: "value",
name: "单位/MW",
// splitNumber: 5,
min: function (value) {//取最小值向下取整为最小刻度
return 0
},
max: function (value) {//取最大值向上取整为最大刻度
return Math.ceil(value.max)
},
// min: function (value) {//取最小值向下取整为最小刻度
// return 0
// },
// max: function (value) {//取最大值向上取整为最大刻度
// return Math.ceil(value.max)
// },
alignTicks: true,
nameTextStyle: {
fontSize: 12,
@@ -192,12 +192,12 @@ export default {
{
type: 'value',
alignTicks: true,
min: 0,
max: 100,
// min: 0,
// max: 100,
// scale: true,
interval: 25,//间隔
// interval: 25,//间隔
// inverse: true,
splitNumber: 5,
// splitNumber: 5,
name: "单位/%",
nameTextStyle: {
fontSize: 12,
@@ -248,15 +248,15 @@ export default {
{
type: "value",
name: "单位/片",
min: function (value) {//取最小值向下取整为最小刻度
return 0
},
max: function (value) {//取最大值向上取整为最大刻度
return Math.ceil(value.max)
},
// min: function (value) {//取最小值向下取整为最小刻度
// return 0
// },
// max: function (value) {//取最大值向上取整为最大刻度
// return Math.ceil(value.max)
// },
alignTicks: true,
// splitNumber: 5,
scale: true,
// scale: true,
nameTextStyle: {
fontSize: 12,
align: "right",
@@ -269,10 +269,10 @@ export default {
name: "单位/%",
scale: true,
alignTicks: true,
min: 0,
max: 100,
// min: 0,
// max: 100,
// scale: true,
interval: 25,//间隔
// interval: 25,//间隔
// splitNumber: 5,
nameTextStyle: {
fontSize: 12,
@@ -521,6 +521,7 @@ export default {
this.chartMsg.series[2].data = []
this.chartMsgYearTarget.series[0].data = []
this.chartMsgYearTarget.series[1].data = []
this.title = ''
if (!this.listQuery.beginTime && !this.listQuery.endTime) {
return this.$message('请选择起止时间')
}

View File

@@ -64,7 +64,7 @@
</el-col>
<el-col :span="6" style="margin-top: 30px">
<bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
:chartMsg="chartMsgTarget" :chartId="'chartTarget'" :chartNum="chartNum" />
:chartMsg="chartMsgTarget" :gridLeft="gridLeft" :chartId="'chartTarget'" :chartNum="chartNum" />
</el-col>
<el-col :span="6">
<div class="blueTip">
@@ -84,7 +84,7 @@
</el-col>
<el-col :span="6" style="margin-top: 30px">
<bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
:chartMsg="chartMsgTarget" :chartId="'chartDayTarget'" :chartNum="chartNum" />
:chartMsg="chartMsgTarget" :gridLeft="gridLeft" :chartId="'chartDayTarget'" :chartNum="chartNum" />
</el-col>
<!-- <el-col :span="6">
<div class="blueTip">
@@ -103,8 +103,8 @@
:chartId="chartId" :chartNum="chartNum" />
<!-- </el-col> -->
</el-row>
<base-table :key="showTable" :table-props="tableProps" :page="listQuery.current"
:limit="listQuery.size" :table-data="tableData" :max-height="tableH" />
<base-table :key="showTable" :table-props="tableProps" :page="listQuery.current" :limit="listQuery.size"
:table-data="tableData" :max-height="tableH" />
</div>
<!-- <div class="containerBottom">
@@ -130,6 +130,7 @@ export default {
currentMenu: '邯郸',
end: undefined,
title: '',
gridLeft:true,
listQuery: {
pageNo: 1,
pageSize: 999,
@@ -529,7 +530,11 @@ export default {
this.chartMsg.yAxis.interval = (this.chartMsg.yAxis.max - this.chartMsg.yAxis.min) / 4
this.chartMsgTarget.yAxis.interval = (this.chartMsgTarget.yAxis.max - this.chartMsgTarget.yAxis.min) / 4
if (this.listQuery.type === 2) {
if (res.data.list.length === 3) {
this.gridLeft = false
} else {
this.gridLeft = true
}
// res.data.list.forEach((ele) => {
res.data.list.slice(0, res.data.list.length - 3).forEach((ele, index) => {
// let i = index + 1
@@ -693,6 +698,11 @@ export default {
})
// })
} else if (this.listQuery.type === 1 || this.listQuery.type === 0) {
if (res.data.list.length === 2) {
this.gridLeft = false
} else {
this.gridLeft = true
}
// res.data.list.forEach((ele) => {
res.data.list.slice(0, res.data.list.length - 2).forEach((ele, index) => {
// let i = index + 1

View File

@@ -64,7 +64,8 @@
</el-col>
<el-col :span="6" style="margin-top: 30px">
<bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
:chartMsg="chartMsgTarget" ref="dayTargetChart" :chartId=" 'chartTarget'" :chartNum="chartNum" />
:chartMsg="chartMsgTarget" :gridLeft="gridLeft" ref="dayTargetChart" :chartId=" 'chartTarget'"
:chartNum="chartNum" />
</el-col>
<el-col :span="6">
<div class="blueTip">
@@ -84,7 +85,7 @@
</el-col>
<el-col :span="6" style="margin-top: 30px">
<bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
:chartMsg="chartMsgTarget" :chartId=" 'chartDayTarget'" :chartNum="chartNum" />
:chartMsg="chartMsgTarget" :gridLeft="gridLeft" :chartId=" 'chartDayTarget'" :chartNum="chartNum" />
</el-col>
<!-- <el-col :span="6">
<div class="blueTip">
@@ -129,6 +130,7 @@ export default {
currentMenu:'邯郸',
end: undefined,
title: '',
gridLeft:true,
showTable:false,
listQuery: {
pageNo: 1,
@@ -673,6 +675,11 @@ export default {
// })
})
if (this.listQuery.type === 2) {
if (res.data.list.length === 3) {
this.gridLeft = false
} else {
this.gridLeft = true
}
console.log(res.data.list.length);
// res.data.list.forEach((ele) => {
res.data.list.slice(0, res.data.list.length - 3).forEach((ele, index) => {
@@ -948,6 +955,11 @@ export default {
})
// })
} else if (this.listQuery.type === 1 || this.listQuery.type === 0) {
if (res.data.list.length === 2) {
this.gridLeft = false
} else {
this.gridLeft = true
}
// console.log(res.data.list.slice(res.data.list.length - 2, res.data.list.length));
// res.data.list.forEach((ele) => {
res.data.list.slice(0, res.data.list.length - 2).forEach((ele, index) => {

View File

@@ -174,12 +174,12 @@ export default {
type: "value",
name: "单位/片",
splitNumber: 4,
min: function (value) {//取最小值向下取整为最小刻度
return Math.floor(value.min)
},
max: function (value) {//取最大值向上取整为最大刻度
return Math.ceil(value.max)
},
// min: function (value) {//取最小值向下取整为最小刻度
// return Math.floor(value.min)
// },
// max: function (value) {//取最大值向上取整为最大刻度
// return Math.ceil(value.max)
// },
alignTicks: true,
nameTextStyle: {
fontSize: 12,
@@ -191,10 +191,10 @@ export default {
type: 'value',
// inverse: true,
alignTicks: true,
min: 0,
max: 100,
// min: 0,
// max: 100,
// scale: true,
interval: 25,//间隔
// interval: 25,//间隔
splitNumber: 4,
name: "单位/%",
nameTextStyle: {
@@ -246,15 +246,15 @@ export default {
{
type: "value",
name: "单位/片",
min: function (value) {//取最小值向下取整为最小刻度
return Math.floor(value.min)
},
max: function (value) {//取最大值向上取整为最大刻度
return Math.ceil(value.max)
},
// min: function (value) {//取最小值向下取整为最小刻度
// return Math.floor(value.min)
// },
// max: function (value) {//取最大值向上取整为最大刻度
// return Math.ceil(value.max)
// },
alignTicks:true,
splitNumber: 4,
scale: true,
// splitNumber: 4,
// scale: true,
nameTextStyle: {
fontSize: 12,
align: "right",
@@ -266,10 +266,10 @@ export default {
// inverse: true,
name: "单位/%",
alignTicks: true,
min: 0,
max:100,
// min: 0,
// max:100,
// scale: true,
interval: 25,//间隔
// interval: 25,//间隔
splitNumber: 4,
nameTextStyle: {
fontSize: 12,