1.项目使用下拉框dropdown 选择完以后选中的值会错乱
2.解决方法 options 里面的value 改为1开始递增 v-model的值value=1 title的值改为 option[value-1].label
<template>
<view style="height: 100vh;">
<!-- 自定义导航栏 -->
<!-- <u-navbar back-text="更多设置"></u-navbar> -->
<view class="index-container">
<view class="content">
<view class="card">
<view>
<view class="title">充电安全</view>
</view>
<view>
<u-dropdown>
<u-dropdown-item v-model="pileIndex" :title="pileOption[pileIndex-1].label" :options="pileOption"
@change="selectPiles"></u-dropdown-item>
</u-dropdown>
</view>
</view>
<view class="list" style="z-index: 1;">
<view>
<view class="charging">
<view class="charging-title">
<view>近24小时火线数据监测</view>
<view style="width: 200rpx;">
<u-dropdown>
<u-dropdown-item v-model="huoxian" :title="fireWireSelect[huoxian-1].label"
:options="fireWireSelect" @change="selectHuoxian">
</u-dropdown-item>
</u-dropdown>
</view>
</view>
<view style="width: 100%; height:530rpx;padding-bottom: 50rpx;">
<!-- <l-f2 ref="familyChargeLines"></l-f2> -->
<qiun-data-charts type="line" :ontouch="true" :opts="optsLineA"
:chartData="allDataList" />
</view>
</view>
<view class="charging" style="margin-top: 32rpx;">
<view class="charging-title">
<view>近24小时地线数据监测</view>
<!-- <view style="width: 200rpx;">
<u-dropdown>
<u-dropdown-item v-model="value1" title="桩AAA" :options="options1"></u-dropdown-item>
</u-dropdown>
</view> -->
</view>
<view style="width: 100%; height:530rpx;padding-bottom: 50rpx;">
<!-- <l-f2 ref="familyChargeLine"></l-f2> -->
<qiun-data-charts type="line" :ontouch="true" :opts="optsLineB"
:chartData="GroundList" />
</view>
</view>
</view>
</view>
</view>
</view>
<load v-if="loadingShow"></load>
<!-- 筛选日期 -->
<u-calendar v-model="calendarShow" :mode="mode" active-bg-color="#0BBAB4" range-color="#0BBAB4"
@change="getTime" :safe-area-inset-bottom="true"></u-calendar>
</view>
</template>
<script>
import F2 from '@antv/f2';
import QiunDataCharts from "../../uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts";
import load from '../../component/loading.vue';
import uDropdown from './components/u-dropdown.vue';
import uDropdownItem from './components/u-dropdown-item.vue'
export default {
components: {
// LimeEchart
load,
uDropdown,
uDropdownItem,
QiunDataCharts
},
data() {
return {
calendarShow: false,
value1: 1,
fireWireSelect: [{
value: 1,
label: "火线 A",
},
{
value: 2,
label: "火线 B",
}, {
value: 3,
label: "火线 C",
},
],
huoxian: 1,
pileIndex:1,
originList: [],
pileOption: [],
selectPileCode: '',
mode: 'range',
orderNo: '',
detailObj: {
},
chargeMin: '',
allDataList: {
categories: [],
series: [{
name: '电压',
legendShape: 'line',
type: "line",
data: [],
linearColor: [
[
0,
"#6E1FDA"
],
[
1,
"#E766B1"
]
],
},
{
name: '电流',
legendShape: 'line',
type: "line",
index: 1,
data: [],
linearColor: [
[
0,
"#7270FD"
],
[
1,
"#109EFF"
]
],
},
]
},
GroundList: {
categories: [],
series: [{
name: '电压',
legendShape: 'line',
type: "line",
data: [],
linearColor: [
[
0,
"#7270FD"
],
[
1,
"#109EFF"
]
],
}, ]
},
loadingShow: false,
nickName: uni.getStorageSync('nickName'),
pileCode: uni.getStorageSync('pileCode'),
optsLineA: {
color: ["#6E1FDA", "#109EFF"],
padding: [0, 8, 0, 8],
dataLabel: false,
dataPointShape: false,
enableScroll: false,
legend: {
position: 'top',
float: 'left',
margin: 16,
fontSize: 10,
},
xAxis: {
disableGrid: true,
labelCount: 4, //最多显示4个
fontSize: 10,
fontColor: "#474e5b",
},
yAxis: {
gridType: "dash",
dashLength: 2,
format: "yAxisDemo2",
showTitle: true,
data: [{
//这里y轴分组 left是下标为0的第一组y数据在最左侧
position: "left",
axisLine: false, //坐标轴轴线是否显示
axisLineColor: '#fff', //坐标轴轴线颜色
fontColor: "#474e5b",
fontSize: 10,
titleFontSize: 11,
disabled: false, //是否绘画y轴 true不 默认为false
min: 0, //y轴最小值
// unit:'焦',//y轴刻度后面的单位
tofix: 2,
title: '电压(V)',
titleOffsetY: -6,
titleOffsetX: -6,
},
{
//这里y轴分组 right是下标为1的第二组y数据在最右侧
position: "right",
titleFontSize: 11,
axisLine: false, //坐标轴轴线是否显示
axisLineColor: '#fff', //坐标轴轴线颜色
fontColor: "#474e5b",
fontSize: 10,
disabled: false, //是否绘画y轴 true不 默认为false
min: 0, //y轴最小值
// unit:'焦',//y轴刻度后面的单位
tofix: 2,
title: '电流(A)',
titleOffsetY: -6,
titleOffsetX: 10,
},
]
},
extra: {
line: {
type: "curve",
width: 2,
activeType: "hollow",
linearType: "custom"
}
}
},
optsLineB: {
color: ["#1890FF"],
padding: [0, 8, 0, 8],
dataLabel: false,
dataPointShape: false,
enableScroll: false,
legend: {
position: 'top',
float: 'left',
margin: 16,
fontSize: 10,
},
xAxis: {
disableGrid: true,
labelCount: 4,
fontSize: 10,
fontColor: "#474e5b",
},
yAxis: {
showTitle: true,
data: [{
//这里y轴分组 left是下标为0的第一组y数据在最左侧
position: "left",
axisLine: false, //坐标轴轴线是否显示
axisLineColor: '#fff', //坐标轴轴线颜色
fontColor: "#474e5b",
fontSize: 10,
titleFontSize: 11,
disabled: false, //是否绘画y轴 true不 默认为false
min: 0, //y轴最小值
// unit:'焦',//y轴刻度后面的单位
tofix: 2,
title: '电压(V)',
titleOffsetY: -6,
titleOffsetX: -6,
}, ]
},
extra: {
line: {
type: "curve",
width: 2,
activeType: "hollow",
linearType: "custom"
}
}
},
}
},
onLoad(option) {
},
onUnload() {
},
onReady() {
},
onShow() {
},
mounted() {
let _ = this;
_.getPileList()
// _.init()
},
computed: {
counts() {
return this.$store.state.count
}
},
methods: {
/*选火线回调*/
selectHuoxian(val) {
this.huoxian = val;
if (val == 1) {
this.allDataList.series[0].data = []
this.allDataList.series[1].data = []
for (let item of this.originList) {
this.allDataList.series[0].data.push(item.pressureUa)
this.allDataList.series[1].data.push(item.currentLa)
}
} else if (val == 2) {
this.allDataList.series[0].data = []
this.allDataList.series[1].data = []
for (let item of this.originList) {
this.allDataList.series[0].data.push(item.pressureUb)
this.allDataList.series[1].data.push(item.currentLb)
}
} else if (val == 3) {
this.allDataList.series[0].data = []
this.allDataList.series[1].data = []
for (let item of this.originList) {
this.allDataList.series[0].data.push(item.pressureUc)
this.allDataList.series[1].data.push(item.currentLc)
}
}
this.allDataList = JSON.parse(JSON.stringify(this.allDataList));
// this.init()
},
/*选桩回调*/
selectPiles(val) {
console.log(val)
let selectObj = this.pileOption.find(item => {
return item.value == val
})
this.selectPileCode = selectObj.code;
this.huoxian = 1;
this.getChartsData()
},
/*查询用户桩列表*/
getPileList() {
let that = this;
that.$u.api.getPileList({
pageNum: 0,
pageSize: 1000,
userPhone: uni.getStorageSync('userPhone')
}).then(res => {
if (res.data.content.length > 0) {
// that.pileOption = res.data.content.map(item => {
// return {
// value: item.pileCode,
// label: item.pileName,
// }
// })
let list = res.data.content
let obj = {
value:1,
label:'',
code:''
}
for(var i = 0; i < list.length; i++){
obj.value =i+1;
obj.label = list[i].pileName
obj.code = list[i].pileCode
that.pileOption.push(obj)
}
console.log(that.pileOption)
that.selectPileCode = that.pileOption[0].code
that.getChartsData()
}
}).catch(err => {
})
},
/*查询图表数据*/
getChartsData() {
let that = this;
that.$u.api.getAreaDataList({
corpNo: 'CO1524100773815',
pileCode: that.selectPileCode,
// pileCode: '863412047064699',
gunPort: 1,
pileType: '01',
userPhone: uni.getStorageSync('userPhone'),
beginTime: ''
}).then(res => {
//地线电压
if (res.data.length > 0) {
that.originList = []
that.originList = res.data;
that.GroundList.categories = []
that.allDataList.categories = []
that.GroundList.series[0].data =[]
that.allDataList.series[0].data= []
that.allDataList.series[1].data = []
for (let item of res.data) {
//地线电压图表数
that.GroundList.categories.push(item.createdWhen)
that.GroundList.series[0].data.push(item.pressureU0)
//火线数据
that.allDataList.categories.push(item.createdWhen)
that.allDataList.series[0].data.push(item.pressureUa)
that.allDataList.series[1].data.push(item.currentLa)
this.GroundList = JSON.parse(JSON.stringify(this.GroundList));
this.allDataList = JSON.parse(JSON.stringify(this.allDataList));
}
}
}).catch(err => {
})
},
/*折线图*/
// init() {
// let _ = this;
// //---------------------------24小时火线------------------------------------
// _.$refs.familyChargeLines.init(config => {
// const chart = new F2.Chart(config);
// chart.source(_.allDataList, {
// time: {
// alias: '日期',
// tickCount: 4, //X轴显示四个
// },
// Voltage: {
// alias: "电压",
// tickCount: 5, //Y轴显示5个
// },
// electric: {
// alias: '电流',
// tickCount: 5, //Y轴显示5个
// }
// });
// // 图例
// chart.legend({
// custom: true, //自定义图例
// align: 'left',
// position: 'top',
// flipPage: false,
// items: _.legendItems,
// onClick: function onClick(ev) { //自定义legend样式点击触发的方法
// var item = ev.clickedItem;
// var name = item.get('name');
// var checked = item.get('checked');
// var children = item.get('children');
// if (checked) {
// var markerFill = children[0].attr('fill');
// var textFill = children[1].attr('fill');
// children[0].set('_originColor', markerFill); // 缓存 marker 原来的颜色
// children[1].set('_originColor', textFill); // 缓存文本原来的颜色
// }
// var geoms = chart.get('geoms');
// for (var i = 0; i < geoms.length; i++) {
// var geom = geoms[i];
// if (geom.getYScale().alias === name)
// if (!checked) {
// geom.show();
// children[0].attr('fill', children[0].get('_originColor'));
// children[1].attr('fill', children[1].get('_originColor'));
// } else {
// geom.hide();
// children[0].attr('fill', '#bfbfbf'); // marker 置灰
// children[1].attr('fill', '#bfbfbf'); // 文本置灰 置灰
// }
// item.set('checked', !checked);
// _.legendItems[_.findLegendItem(name)].checked = !checked;
// }
// }
// });
// chart.guide().text({
// position: ['min', 'max'], // x 轴最小值, y 轴最大值
// content: '', // -----------------------------------y轴坐标单位
// style: {
// textAlign: 'start',
// textBaseline: 'bottom',
// fill: '#777',
// fontSize: '15',
// },
// offsetY: -30,
// offsetX: -35, // 可以通过 padding 值配合来保证显示位置
// })
// chart.guide().text({
// position: ['min', 'max'], // x 轴最小值, y 轴最大值
// content: '电压(V)', // -----------------------------------y轴坐标单位
// style: {
// textAlign: 'start',
// textBaseline: 'bottom',
// fill: '#777',
// fontSize: '10',
// },
// offsetY: -10,
// offsetX: -30, // 可以通过 padding 值配合来保证显示位置
// })
// chart.guide().text({
// position: ['max', 'max'], // x 轴最小值, y 轴最大值
// content: '电流(A)', // -----------------------------------y轴坐标单位
// style: {
// textAlign: 'start',
// textBaseline: 'bottom',
// fill: '#777',
// fontSize: '10',
// },
// offsetY: -10,
// offsetX: -10, // 可以通过 padding 值配合来保证显示位置
// })
// chart.axis('date', {
// label: function label(text, index, total) {
// // 只显示每一年的第一天
// const textCfg = {};
// if (index === 0) {
// textCfg.textAlign = 'left';
// } else if (index === total - 1) {
// textCfg.textAlign = 'right';
// }
// return textCfg;
// }
// });
// chart.line().position('time*Voltage').color('l(0) 0:#6F20DA 1:#E765B0').shape('smooth');
// chart.point().position('time*Voltage').color('l(0) 0:#6F20DA 1:#E765B0');
// chart.line().position('time*electric').color('l(0) 0:#7270FD 1:#139CFE').shape('smooth');
// chart.point().position('time*electric').color('l(0) 0:#7270FD 1:#139CFE');
// chart.render();
// return chart;
// });
// //----------------------24小时地线----------------------------------
// _.$refs.familyChargeLine.init(config => {
// const chart = new F2.Chart(config);
// chart.source(_.GroundList, {
// time: {
// alias: '日期',
// tickCount: 4, //X轴显示四个
// },
// Voltage: {
// alias: "电压",
// tickCount: 5, //Y轴显示5个
// },
// // electric: {
// // alias: '电流',
// // tickCount: 5, //Y轴显示5个
// // }
// });
// // 图例
// chart.legend({
// custom: true, //自定义图例
// align: 'left',
// position: 'top',
// flipPage: false,
// items: _.legendItem,
// onClick: function onClick(ev) { //自定义legend样式点击触发的方法
// var item = ev.clickedItem;
// var name = item.get('name');
// var checked = item.get('checked');
// var children = item.get('children');
// if (checked) {
// var markerFill = children[0].attr('fill');
// var textFill = children[1].attr('fill');
// children[0].set('_originColor', markerFill); // 缓存 marker 原来的颜色
// children[1].set('_originColor', textFill); // 缓存文本原来的颜色
// }
// var geoms = chart.get('geoms');
// for (var i = 0; i < geoms.length; i++) {
// var geom = geoms[i];
// if (geom.getYScale().alias === name)
// if (!checked) {
// geom.show();
// children[0].attr('fill', children[0].get('_originColor'));
// children[1].attr('fill', children[1].get('_originColor'));
// } else {
// geom.hide();
// children[0].attr('fill', '#bfbfbf'); // marker 置灰
// children[1].attr('fill', '#bfbfbf'); // 文本置灰 置灰
// }
// item.set('checked', !checked);
// _.legendItems[_.findLegendItem(name)].checked = !checked;
// }
// }
// });
// chart.guide().text({
// position: ['min', 'max'], // x 轴最小值, y 轴最大值
// content: '', // -----------------------------------y轴坐标单位
// style: {
// textAlign: 'start',
// textBaseline: 'bottom',
// fill: '#777',
// fontSize: '15',
// },
// offsetY: -30,
// offsetX: -35, // 可以通过 padding 值配合来保证显示位置
// })
// chart.guide().text({
// position: ['min', 'max'], // x 轴最小值, y 轴最大值
// content: '电压(V)', // -----------------------------------y轴坐标单位
// style: {
// textAlign: 'start',
// textBaseline: 'bottom',
// fill: '#777',
// fontSize: '10',
// },
// offsetY: -10,
// offsetX: -30, // 可以通过 padding 值配合来保证显示位置
// })
// // chart.guide().text({
// // position: ['max', 'max'], // x 轴最小值, y 轴最大值
// // content: '电流(A)', // -----------------------------------y轴坐标单位
// // style: {
// // textAlign: 'start',
// // textBaseline: 'bottom',
// // fill: '#777',
// // fontSize: '10',
// // },
// // offsetY: -10,
// // offsetX: -10, // 可以通过 padding 值配合来保证显示位置
// // })
// // chart.axis('date', {
// // label: function label(text, index, total) {
// // // 只显示每一年的第一天
// // const textCfg = {};
// // if (index === 0) {
// // textCfg.textAlign = 'left';
// // } else if (index === total - 1) {
// // textCfg.textAlign = 'right';
// // }
// // return textCfg;
// // }
// // });
// chart.line().position('time*Voltage').color('l(0) 0:#6F20DA 1:#E765B0').shape('smooth');
// chart.point().position('time*Voltage').color('l(0) 0:#6F20DA 1:#E765B0');
// // chart.line().position('time*electric').color('l(0) 0:#7270FD 1:#139CFE').shape('smooth');
// // chart.point().position('time*electric').color('l(0) 0:#7270FD 1:#139CFE');
// chart.render();
// return chart;
// });
// },
/*自定义legend样式用到的方法*/
findLegendItem(lx) {
var index = void 0;
for (var i = 0; i < this.legendItems.length; i++) {
if (this.legendItems[i].name === lx) {
index = i;
break;
}
}
return index;
},
/*筛选日期*/
setChoice() {
this.calendarShow = true;
},
/*日历获取日期*/
getTime(val) {
// console.log(val)
},
}
}
</script>
<style lang="scss" scoped>
.content {
box-sizing: border-box;
padding: 0 26rpx 20rpx 40rpx;
display: flex;
flex-direction: column;
font-family: PingFangSC-Regular, PingFang SC;
.card {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-top: 50rpx;
>view {
display: flex;
flex-direction: column;
width: 100%;
justify-content: space-between;
}
.title {
font-size: 48rpx;
font-weight: 800;
}
.xuanze {
display: flex;
font-size: 24rpx;
font-weight: 400;
align-items: center;
margin-top: 10rpx;
>view {
&:nth-child(2) {
margin-left: 40rpx;
}
}
}
}
.list {
margin-top: 46rpx;
}
}
.charging {
width: 100%;
// margin-top: 32px;
background: #FFFFFF;
padding: 40rpx;
box-sizing: border-box;
height: 600rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 30rpx 14rpx rgba(221, 221, 221, 0.36);
border-radius: 60rpx;
.charging-title {
display: flex;
justify-content: space-between;
align-items: center;
>view {
&:nth-child(1) {
font-size: 28rpx;
font-weight: 500;
color: #2D3748;
}
}
}
.echartsTex {
position: absolute;
top: 10rpx;
left: 250rpx;
display: flex;
align-items: center;
font-size: 28rpx;
>view {
&:nth-child(1) {
width: 40rpx;
height: 20rpx;
background: #1677FF;
margin-right: 10rpx;
border-radius: 4rpx;
}
}
}
.echartsTexs {
position: absolute;
top: 10rpx;
left: 400rpx;
display: flex;
font-size: 28rpx;
align-items: center;
>view {
&:nth-child(1) {
width: 40rpx;
height: 20rpx;
background: #05B6B6;
margin-right: 10rpx;
border-radius: 4rpx;
}
}
}
.charging_title {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #2D3748;
img {
margin-left: 10rpx;
}
}
#familyChargeLine {
width: 100%;
height: 230px;
}
}
</style>
