207版本：canvas电流流向功能，海外自定义电价功能

pages/tabbar/electricityPrice.vue

@@ -14,9 +14,18 @@
 						</view>
 					</Section>
 					<view class="search-box">
-						<view class="content-box">
+						<!-- 海外 -->
+						<view v-if="stationValue" style="width: 100%;" class="content-box">
+							<view style="width: calc(100% - (50% - 300rpx));" class="content-title">
+								{{ $t('homePage.home.station') }}
+							</view>
+							<view style="width: calc(100% - (50% - 300rpx));" class="content-value">
+								{{ currentStationName }}
+							</view>
+						</view>
+						<view v-else class="content-box">
 							<view class="content-title">
-								{{ this.$t('homePage.price.provinceRegion') }}
+								{{ $t('homePage.price.provinceRegion') }}
 							</view>
 							<view class="content-value">
 								{{ regionName }}
@@ -32,7 +41,7 @@
 							</view>
 
 						</view>
-						<view class="content-box">
+						<view v-if="!stationValue" class="content-box">
 							<view class="content-title">
 								{{ this.$t('homePage.price.eleType') }}
 							</view>
@@ -51,7 +60,7 @@
 							</view>
 
 						</view>
-						<view class="content-box">
+						<view v-if="!stationValue" class="content-box">
 							<view class="content-title">
 								{{ this.$t('homePage.price.exeTime') }}
 							</view>
@@ -78,31 +87,34 @@
 						{{ this.$t('homePage.price.exeTime') }}
 					</view>
 					<view class="time-value">
-						{{ detailData.executionTime }}
+						{{ detailData.executionTime || timeSlot }}
 					</view>
-					<view class="time-title">
+					<view v-if="!stationValue" class="time-title">
 						{{ this.$t('homePage.price.eleType') }}
 					</view>
-					<view class="time-value">
+					<view v-if="!stationValue" class="time-value">
 						{{ detailData.electricityTypeLabel }}
 					</view>
 					<view class="time-title">
 						{{ this.$t('homePage.price.volLevel') }}
 					</view>
 					<view class="time-value">
-						{{ detailData.voltageLevelLabel }}
+						{{ stationValue? (detailData.voltageLevelLabel || voltageLevelName): detailData.voltageLevelLabel }}
 					</view>
 					<view class="title">
-						{{ this.$t('homePage.price.fsdd') }}{{ this.$t('homePage.price.dietailUnit') }}
+						{{ stationValue? this.$t('homePage.home.useElecPrice'):this.$t('homePage.price.fsdd') }}{{ this.$t('homePage.price.dietailUnit') }}
 					</view>
 					<view class="levels-chart">
 						<zero-loading v-if="levelsChart_loading"></zero-loading>
-						<charts v-else id="levelsChart" :options="levelsChart_option" :labelFormatter="true" :dataList="dataList"></charts>
+						<!-- <view v-else> -->
+							<!-- <charts v-if="stationValue" id="levelsChart" :options="levelsChart_option" :labelFormatter="true"  :dataList="dataList"></charts> -->
+							<charts v-else id="levelsChart" :options="levelsChart_option" :labelFormatter="true" :dataList="dataList"></charts>
+						<!-- </view> -->
 					</view>
 					<view class="title">
 						{{ this.$t('homePage.price.eleprice') }}{{ this.$t('homePage.price.dietailUnit') }}
 					</view>
-					<view class="value-box">
+					<view v-if="!stationValue" class="value-box">
 						<view class="box">
 							<view class="box-value">
 								{{ detailData.nonTimePrice ? detailData.nonTimePrice : '--' }}
@@ -138,7 +150,7 @@
 
 					</view>
 				</view>
-				<view class="price-box">
+				<view v-if="!stationValue" class="price-box">
 					<Section :title="$t('homePage.price.historytrend')">
 						<view slot="right" style="flex: 1">
 							<view class="top-right-box">
@@ -162,8 +174,6 @@
 								<uni-th width="100" align="center">{{this.$t('homePage.price.regular')}}</uni-th>
 								<uni-th width="100" align="center">{{this.$t('homePage.price.lowValley')}}</uni-th>
 								<uni-th width="100" align="center">{{this.$t('homePage.price.deepValley')}}</uni-th>
-
-
 							</uni-tr>
 							<uni-tr v-for="(item, index) in history_tableData" :key="index">
 								<uni-td align="center">{{ item.executionTime }}</uni-td>
@@ -172,13 +182,12 @@
 								<uni-td align="center">{{ item.regularPrice ? item.regularPrice : '-' }}</uni-td>
 								<uni-td align="center">{{ item.lowValleyPrice ? item.lowValleyPrice : '-' }}</uni-td>
 								<uni-td align="center">{{ item.deepValleyPrice ? item.deepValleyPrice : '-' }}</uni-td>
-
 							</uni-tr>
 						</uni-table>
 
 					</view>
 				</view>
-				<view class="price-box">
+				<view v-if="!stationValue" class="price-box">
 					<Section :title="$t('homePage.price.peakDifference')">
 						<view slot="right" style="flex: 1">
 							<view class="top-right-box">
@@ -216,9 +225,14 @@
 		</view>
 
 		<view class="popup-box">
-			<u-popup v-model="popupShow" mode="bottom" border-radius="20" height="75%" placement="top-end" @close="closePop">
+			<u-popup v-model="popupShow" mode="bottom" border-radius="20" :height="stationValue? '40%':'75%'" placement="top-end" @close="closePop">
 				<view class="title">{{this.$t('homePage.price.sift')}}</view>
-				<view class="s-station">
+				<view v-if="stationValue" class="s-station">
+					<u-section :title="$t('homePage.home.station')" line-color="#009458" color="#2A2A2A" class="s-title" :right="false"
+						style="margin-bottom: 20rpx;"></u-section>
+					<stationDropdow style="width: 100%;border-color: rgb(220, 223, 230);border: 1px solid #dcdfe6;" ref="dropdow" />
+				</view>
+				<view v-else class="s-station">
 					<u-section :title="$t('homePage.price.provinceRegion')" line-color="#009458" color="#2A2A2A" class="s-title" :right="false"
 						style="margin-bottom: 20rpx;"></u-section>
 					<view style="margin-top: 20rpx;">
@@ -230,7 +244,7 @@
 						label-name="regionName" @confirm="confirmRegion"></u-select>
 				</view>
 
-				<view class="s-station">
+				<view v-if="!stationValue" class="s-station">
 					<u-section :title="$t('homePage.price.customerType')" line-color="#009458" color="#2A2A2A" class="s-title" :right="false"
 						style="margin-bottom: 20rpx;"></u-section>
 					<view style="margin-top: 20rpx;">
@@ -243,7 +257,7 @@
 						@confirm="confirmCustomer" value-name="value" label-name="name"></u-select>
 				</view>
 
-				<view class="s-station">
+				<view v-if="!stationValue" class="s-station">
 					<u-section :title="$t('homePage.price.eleType')" line-color="#009458" color="#2A2A2A" class="s-title" :right="false"
 						style="margin-bottom: 20rpx;"></u-section>
 					<view style="margin-top: 20rpx;">
@@ -255,7 +269,7 @@
 						label-name="name" @confirm="confirmElectricity"></u-select>
 				</view>
 
-				<view class="s-station">
+				<view v-if="!stationValue" class="s-station">
 					<u-section :title="$t('homePage.price.volLevel')" line-color="#009458" color="#2A2A2A" class="s-title" :right="false"
 						style="margin-bottom: 20rpx;"></u-section>
 					<view style="margin-top: 20rpx;">
@@ -267,7 +281,7 @@
 						@confirm="confirmVoltage" value-name="value" label-name="name"></u-select>
 				</view>
 
-				<view class="s-station">
+				<view v-if="!stationValue" class="s-station">
 					<u-section :title="$t('homePage.price.exeTime')" :default-value="defaultcTimeArr" line-color="#009458" color="#2A2A2A" class="s-title"
 						:right="false" style="margin-bottom: 20rpx;"></u-section>
 					<view style="margin-top: 20rpx;"><u-input v-model="filters.executionTime" type="select" border="border"
@@ -288,10 +302,18 @@
 </template>
 
 <script>
+
+import stationDropdow from '@/components/station-dropdow/index'
 import Section from '@/components/section/index.vue'
 import charts from "@/components/charts/index";
 import Search from "@/components/Search/index";
 export default {
+	components: {
+		stationDropdow,
+		Section,
+		charts,
+		Search
+	},
 	data() {
 		return {
 			background: {
@@ -325,6 +347,12 @@ export default {
 				color: '#FF3333'
 			}
 			],
+			overseasColorList:[
+				{
+					name: this.language !== 'en_US'? '平时段':'Normal period',
+					color: '#048FFF'
+				}
+			],
 			popupShow: false,
 			filters: {
 				regionId: undefined,
@@ -333,6 +361,7 @@ export default {
 				voltageLevel: undefined,
 				executionTime: undefined
 			},
+			currentStationName:'',
 			regionName: '上海',
 			electricityName: '两部制',
 			customerName: '大工业用户',
@@ -353,7 +382,7 @@ export default {
 				second: false
 			},
 			sureButtonStyle: {
-        backgroundColor: '#009458',
+			backgroundColor: '#009458',
               width: '280rpx',
               height: '70rpx',
               fontSize: '28rpx',
@@ -386,23 +415,31 @@ export default {
 			useCustList: [],
 			useVolList: [],
 			middleIndexList: [],
-			dataList: []
-
+			customElecPriceData:[],
+			timeSlot:''
 		}
 	},
 	computed: {
+		language(){
+			return this.vuex_language 
+		},
+		stationValue(){
+			return this.vuex_stationValue === 'Overseas Station' || this.vuex_stationValue === '海外站'? true:false
+		},
 
+		stationList () {
+		  return this.vuex_provinceStation
+		},
+		stationShow (){
+			return this.vuex_StationShow
+		},
+		stationid (){
+			return  this.vuex_currentStation.id
+		}
 	},
-	components: {
-		Section,
-		charts,
-		Search
-	},
-	onLoad() {
-
-	},
+	onLoad() {},
 	created() {
-		this.getRegionList()
+		if (!this.stationValue) {this.getRegionList()}
 		var currentDate = new Date();
 		// 获取年份和月份
 		var year = currentDate.getFullYear();
@@ -414,8 +451,13 @@ export default {
 		this.filters.customerType = 2
 		this.filters.voltageLevel = 4
 		this.filters.executionTime = formattedDate
-		this.getData()
-		this.loading = true
+		if (this.stationValue) {
+			this.currentStationName = this.stationList[0].list[0].list[0].name
+			this.GetCustomElecPricePageData(this.stationList[0].list[0].list[0].id)
+		} else{
+			this.getData()
+			this.loading = true
+		}
 
 	},
 	methods: {
@@ -431,10 +473,11 @@ export default {
 			this.filters.customerType = 2
 			this.filters.voltageLevel = 4
 			this.filters.executionTime = formattedDate
-			this.regionName = '上海'
-			this.electricityName = '两部制'
-			this.customerName = '大工业用户'
-			this.voltageLevelName = '10千伏'
+			this.currentStationName = ''
+			this.regionName = this.stationValue? '' : '上海'
+			this.electricityName = this.stationValue? '' : '两部制'
+			this.customerName = this.stationValue? '' : '大工业用户'
+			this.voltageLevelName = this.stationValue? '' : '10千伏'
 
 			this.useEleList = this.electricityList.filter(item => +item.type === +this.filters.customerType)
 			this.useVolList = this.voltageLevelList.filter(item => +item.type === +this.filters.customerType)
@@ -518,7 +561,6 @@ export default {
 			}
 
 		},
-
 		confirmRegion(val) {
 
 			const regionIndex = this.regionList.findIndex((item) => {
@@ -597,8 +639,13 @@ export default {
 		search() {
 			this.pageNum = 1;
 			this.dataList = [];
-			this.getData();
+			if (this.stationValue) {
+				this.GetCustomElecPricePageData(this.stationid)
+			} else{
+				this.getData()
+			}
 			this.popupShow = false;
+			this.currentStationName = this.$refs.dropdow.stationName;
 		},
 		findMiddleIndex(arr) {
 			let firstIndex = -1 // 第一个不为null的
@@ -627,16 +674,151 @@ export default {
 
 			return result
 		},
+		// 查询自定义电价
+		async GetCustomElecPricePageData(id) {
+			this.levelsChart_loading = true
+			const params = {
+				stationId: id,
+				templateName: '',
+				isEnable:'',
+				validityStartTime:'',
+				validityEndTime:'',
+				elecType:1
+			}
+			try {
+				const { data } = await this.$u.api.proxyPrice.GetCustomElecPricePage(params)
+				// this.customElecPriceData = data
+				let nowdata = [
+					{
+						list:[],
+						name:data[0].type
+					}
+				];
+					
+				for (let i = 0; i < 49; i++) {
+					nowdata[0].list.push(data[0].price)
+				}
+				this.initLevelsChartOverses(nowdata)
+				this.dataList = nowdata;
+				this.detailList = data;
+				this.customerName = this.language !== 'en_US'? '大工业用户':'Large industrial users',
+				this.voltageLevelName = this.language !== 'en_US'? '10kv': '10kv',
+				this.timeSlot = data[0].validityStartTime + ' —— ' + data[0].validityEndTime;
+				console.log(JSON.stringify(this.dataList),JSON.stringify(this.overseasColorList));
+			} finally {
+				this.loading = false
+				this.levelsChart_loading = false
+			}
+		},
 		async getLevelsChart(id) {
 			this.levelsChart_loading = true
 			try {
 				const res = await this.$u.api.proxyPrice.GetTouLineById(id)
 				this.initLevelsChart(res.data)
-			  this.dataList = res.data ? res.data : []
+				this.dataList = res.data ? res.data : [],
+				console.log(this.dataList);
 			} finally {
 				this.levelsChart_loading = false
 			}
-
+		},
+		// 新增：初始化海外站电价图表
+		initLevelsChartOverses(data) {
+		const series = []
+		if (data.length > 0) {
+			data.map(item => {
+				const colorInfo = this.colorList.find(color => color.name === item.name)
+				const param = {
+					type: 'line',
+					itemStyle: {
+						normal: {
+							color: colorInfo ? colorInfo.color : undefined,
+							lineStyle: {
+								color: colorInfo ? colorInfo.color : undefined
+							},
+							areaStyle: {
+								type: 'default',
+								opacity: 0.2
+							}
+						}
+					},
+					name: item.name,
+					data: item.list,
+					symbol: 'circle',
+					'symbolSize': 0.001,
+					label: {
+						show: true,
+					}
+		
+		
+				}
+				series.push(param)
+			})
+		}
+		this.levelsChart_option = {
+			tooltip: {
+				trigger: 'axis',
+				confine: true,
+				textStyle: {
+					textShadowBlur: 10, // 重点
+					textShadowColor: 'transparent', // 重点
+				},
+			},
+			legend: {
+		
+			},
+			grid: {
+		
+				bottom: "15%",
+				top: "20%",
+			},
+			calculable: true,
+			xAxis: [{
+				type: 'category',
+				boundaryGap: false,
+				data: ['0', '0.5', '1', '1.5', '2', '2.5', '3', '3.5', '4', '4.5', '5', '5.5', '6',
+					'6.5', '7', '7.5', '8', '8.5', '9', '9.5', '10', '10.5', '11', '11.5', '12',
+					12.5, 13, 13.5, 14, 14.5, 15, 15.5, 16, 16.5, 17, 17.5, 18, 18.5, 19, 19.5, 20,
+					20.5, 21, 21.5, 22, 22.5, 23, 23.5, 24
+				],
+				splitLine: {
+					show: true,
+					lineStyle: {
+						color: '#F0F0F0',
+					}
+				},
+				axisLine: {
+					lineStyle: {
+						color: '#F0F0F0',
+					}
+				},
+				axisLabel: {
+					show: true,
+					color: '#A3A3A3'
+				},
+		
+				axisTick: {
+					show: false
+				}
+			}],
+			yAxis: [{
+				type: 'value',
+		
+				axisLine: {
+					show: false
+				},
+				axisLabel: {
+					show: true,
+					color: '#A3A3A3'
+				},
+				splitLine: {
+					show: true,
+					lineStyle: {
+						color: '#F0F0F0',
+					}
+				}
+			}],
+			series: series
+		}
 		},
 		initLevelsChart(data) {
 			const series = []
@@ -1181,7 +1363,19 @@ export default {
 		.s-station {
 			margin-bottom: 60rpx;
 			padding: 0 20px 0 20px;
-
+			::v-deep .uicon-arrow-down-fill {
+				color: rgb(192, 196, 204) !important;
+			}
+			.home-navbar-warp{
+				padding:0 20rpx;
+			}
+			::v-deep .search {
+				width:100%;
+			}
+			::v-deep .uni-input-input{
+				text-align:left;
+				color: #303133;
+			}
 			.s-title {
 				font-size: 35rpx;
 				text-align: left;