1248 lines
32 KiB
Vue
1248 lines
32 KiB
Vue
|
<template>
|
|||
|
|
<view class="detail-warp">
|
|||
|
|
<view>
|
|||
|
|
<view class="top-search">
|
|||
|
|
{{ this.$t('homePage.price.elePriceQuery') }}
|
|||
|
|
</view>
|
|||
|
|
<view style="padding: 0 20rpx 0 20rpx;margin-top: -85rpx;">
|
|||
|
|
<view class="price-box">
|
|||
|
|
<Section :title="this.$t('homePage.price.queryCriteria')">
|
|||
|
|
<view slot="right" style="flex: 1">
|
|||
|
|
<view class="top-right-box" style="color:rgba(0, 156, 119, 1)" @click="showPopup">
|
|||
|
|
{{this.$t('homePage.price.sift')}}<u-icon name="arrow-right" color="rgba(0, 156, 119, 1)" size="32"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</Section>
|
|||
|
|
<view class="search-box">
|
|||
|
|
<view class="content-box">
|
|||
|
|
<view class="content-title">
|
|||
|
|
{{ this.$t('homePage.price.provinceRegion') }}
|
|||
|
|
</view>
|
|||
|
|
<view class="content-value">
|
|||
|
|
{{ regionName }}
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="content-box">
|
|||
|
|
<view class="content-title">
|
|||
|
|
{{ this.$t('homePage.price.customerType') }}
|
|||
|
|
</view>
|
|||
|
|
<view class="content-value">
|
|||
|
|
{{ customerName }}
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="content-box">
|
|||
|
|
<view class="content-title">
|
|||
|
|
{{ this.$t('homePage.price.eleType') }}
|
|||
|
|
</view>
|
|||
|
|
<view class="content-value">
|
|||
|
|
{{ electricityName }}
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="content-box">
|
|||
|
|
<view class="content-title">
|
|||
|
|
{{ this.$t('homePage.price.volLevel') }}
|
|||
|
|
</view>
|
|||
|
|
<view class="content-value">
|
|||
|
|
{{ voltageLevelName }}
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="content-box">
|
|||
|
|
<view class="content-title">
|
|||
|
|
{{ this.$t('homePage.price.exeTime') }}
|
|||
|
|
</view>
|
|||
|
|
<view class="content-value">
|
|||
|
|
{{ filters.executionTime }}
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<zero-loading v-if="loading"></zero-loading>
|
|||
|
|
<view v-else-if="!detailList.length && !loading" style="width: 100%;height: calc(100vh - 500rpx);">
|
|||
|
|
<u-empty :text="$t('homePage.price.noData')" mode="list"></u-empty>
|
|||
|
|
</view>
|
|||
|
|
<view v-else-if="detailList.length && !loading" style="padding: 0 20rpx 0 20rpx;">
|
|||
|
|
|
|||
|
|
<view class="price-box">
|
|||
|
|
<Section :title="$t('homePage.price.eleLevel')" />
|
|||
|
|
<view class="time-title">
|
|||
|
|
{{ this.$t('homePage.price.exeTime') }}
|
|||
|
|
</view>
|
|||
|
|
<view class="time-value">
|
|||
|
|
{{ detailData.executionTime }}
|
|||
|
|
</view>
|
|||
|
|
<view class="time-title">
|
|||
|
|
{{ this.$t('homePage.price.eleType') }}
|
|||
|
|
</view>
|
|||
|
|
<view class="time-value">
|
|||
|
|
{{ detailData.electricityTypeLabel }}
|
|||
|
|
</view>
|
|||
|
|
<view class="time-title">
|
|||
|
|
{{ this.$t('homePage.price.volLevel') }}
|
|||
|
|
</view>
|
|||
|
|
<view class="time-value">
|
|||
|
|
{{ detailData.voltageLevelLabel }}
|
|||
|
|
</view>
|
|||
|
|
<view class="title">
|
|||
|
|
{{ 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>
|
|||
|
|
<view class="title">
|
|||
|
|
{{ this.$t('homePage.price.eleprice') }}{{ this.$t('homePage.price.dietailUnit') }}
|
|||
|
|
</view>
|
|||
|
|
<view class="value-box">
|
|||
|
|
<view class="box">
|
|||
|
|
<view class="box-value">
|
|||
|
|
{{ detailData.nonTimePrice ? detailData.nonTimePrice : '--' }}
|
|||
|
|
</view>
|
|||
|
|
<view class="box-title">
|
|||
|
|
{{ this.$t('homePage.price.nonTime') }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="box">
|
|||
|
|
<view class="box-value">
|
|||
|
|
{{ detailData.proxyPrice ? detailData.proxyPrice : '--' }}
|
|||
|
|
</view>
|
|||
|
|
<view class="box-title">
|
|||
|
|
{{ this.$t('homePage.price.proxyPrice') }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="box">
|
|||
|
|
<view class="box-value">
|
|||
|
|
{{ detailData.transmissionPrice ? detailData.transmissionPrice : '--' }}
|
|||
|
|
</view>
|
|||
|
|
<view class="box-title">
|
|||
|
|
{{ this.$t('homePage.price.transmission') }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="box">
|
|||
|
|
<view class="box-value">
|
|||
|
|
{{ detailData.addPrice ? detailData.addPrice : '--' }}
|
|||
|
|
</view>
|
|||
|
|
<view class="box-title">
|
|||
|
|
{{ this.$t('homePage.price.attachPrice') }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="price-box">
|
|||
|
|
<Section :title="$t('homePage.price.historytrend')">
|
|||
|
|
<view slot="right" style="flex: 1">
|
|||
|
|
<view class="top-right-box">
|
|||
|
|
<view class="top-right-item" :class="{ active: historytype === 'chart' }"
|
|||
|
|
@click="changeHistoryType('chart')">{{this.$t('homePage.price.curve')}}</view>
|
|||
|
|
<view class="top-right-item" :class="{ active: historytype === 'table' }"
|
|||
|
|
@click="changeHistoryType('table')">{{this.$t('homePage.price.list')}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</Section>
|
|||
|
|
<view class="levels-chart">
|
|||
|
|
<zero-loading v-if="historyChart_loading" position="absolute">></zero-loading>
|
|||
|
|
<charts v-else-if="!historyChart_loading && historytype === 'chart'" id="historyChart"
|
|||
|
|
:options="historyChart_option"></charts>
|
|||
|
|
<uni-table v-else-if="!historyChart_loading && historytype === 'table'" ref="table"
|
|||
|
|
:loading="historyChart_loading" border style="margin-top:10rpx;height: 98%;" emptyText="暂无更多数据">
|
|||
|
|
<uni-tr>
|
|||
|
|
<uni-th width="100" align="center">{{this.$t('homePage.price.exeTime')}}</uni-th>
|
|||
|
|
<uni-th width="100" align="center">{{this.$t('homePage.price.spike')}}</uni-th>
|
|||
|
|
<uni-th width="100" align="center">{{this.$t('homePage.price.speak')}}</uni-th>
|
|||
|
|
<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>
|
|||
|
|
<uni-td align="center">{{ item.spikePrice ? item.spikePrice : '-' }}</uni-td>
|
|||
|
|
<uni-td align="center">{{ item.peakPrice ? item.peakPrice : '-' }}</uni-td>
|
|||
|
|
<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">
|
|||
|
|
<Section :title="$t('homePage.price.peakDifference')">
|
|||
|
|
<view slot="right" style="flex: 1">
|
|||
|
|
<view class="top-right-box">
|
|||
|
|
<view class="top-right-item" :class="{ active: differencetype === 'chart' }"
|
|||
|
|
@click="changeDifferenceType('chart')">{{this.$t('homePage.price.curve')}}</view>
|
|||
|
|
<view class="top-right-item" :class="{ active: differencetype === 'table' }"
|
|||
|
|
@click="changeDifferenceType('table')">{{this.$t('homePage.price.list')}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</Section>
|
|||
|
|
<view class="levels-chart">
|
|||
|
|
<zero-loading v-if="differenceChart_loading" position="absolute"></zero-loading>
|
|||
|
|
<charts v-else-if="!differenceChart_loading && differencetype === 'chart'" id="differenceChart"
|
|||
|
|
:options="differenceChart_option"></charts>
|
|||
|
|
<uni-table v-else-if="!differenceChart_loading && differencetype === 'table'" ref="table"
|
|||
|
|
:loading="differenceChart_loading" border style="margin-top:10rpx;height: 98%;" emptyText="暂无更多数据">
|
|||
|
|
<uni-tr>
|
|||
|
|
<uni-th width="100" align="center">{{this.$t('homePage.price.peakDifferencePrice')}}</uni-th>
|
|||
|
|
<uni-th width="100" align="center">{{this.$t('homePage.price.exeTime')}}</uni-th>
|
|||
|
|
<uni-th width="100" align="center">{{this.$t('homePage.price.dayHighPrice')}}</uni-th>
|
|||
|
|
<uni-th width="100" align="center">{{this.$t('homePage.price.dayLowtPrice')}}</uni-th>
|
|||
|
|
</uni-tr>
|
|||
|
|
<uni-tr v-for="(item, index) in difference_tableData" :key="index">
|
|||
|
|
<uni-td align="center">{{ item.executionTime ? item.executionTime : '-' }}</uni-td>
|
|||
|
|
<uni-td align="center">{{ item.diffPrice ? item.diffPrice : '-' }}</uni-td>
|
|||
|
|
<uni-td align="center">{{ item.maxPrice ? item.maxPrice : '-' }}</uni-td>
|
|||
|
|
<uni-td align="center">{{ item.minPrice ? item.minPrice : '-' }}</uni-td>
|
|||
|
|
|
|||
|
|
</uni-tr>
|
|||
|
|
</uni-table>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="popup-box">
|
|||
|
|
<u-popup v-model="popupShow" mode="bottom" border-radius="20" height="75%" placement="top-end" @close="closePop">
|
|||
|
|
<view class="title">{{this.$t('homePage.price.sift')}}</view>
|
|||
|
|
<view class="s-station">
|
|||
|
|
<u-section :title="$t('homePage.price.provinceRegion')" line-color="#009C77" color="#2A2A2A" class="s-title" :right="false"
|
|||
|
|
style="margin-bottom: 20rpx;"></u-section>
|
|||
|
|
<view style="margin-top: 20rpx;">
|
|||
|
|
<u-input v-model="regionName" type="select" border="border" :placeholder="$t('homePage.price.selectProvinceRegion')"
|
|||
|
|
@click="regionShow = true" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<u-select :default-value="defaultRegionArr" v-model="regionShow" :list="regionList" value-name="id"
|
|||
|
|
label-name="regionName" @confirm="confirmRegion"></u-select>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="s-station">
|
|||
|
|
<u-section :title="$t('homePage.price.customerType')" line-color="#009C77" color="#2A2A2A" class="s-title" :right="false"
|
|||
|
|
style="margin-bottom: 20rpx;"></u-section>
|
|||
|
|
<view style="margin-top: 20rpx;">
|
|||
|
|
<u-input v-model="customerName" type="select" border="border" :placeholder="$t('homePage.price.selectEleCustomers')"
|
|||
|
|
@click="customerShow = true" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<u-select v-model="customerShow" :default-value="defaultcCustomerArr" :list="customerList"
|
|||
|
|
@confirm="confirmCustomer" value-name="value" label-name="name"></u-select>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="s-station">
|
|||
|
|
<u-section :title="$t('homePage.price.eleType')" line-color="#009C77" color="#2A2A2A" class="s-title" :right="false"
|
|||
|
|
style="margin-bottom: 20rpx;"></u-section>
|
|||
|
|
<view style="margin-top: 20rpx;">
|
|||
|
|
<u-input v-model="electricityName" type="select" border="border" :placeholder="$t('homePage.price.selectEleType')"
|
|||
|
|
@click="electricityShow = true" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<u-select :default-value="defaultElectricityArr" v-model="electricityShow" :list="useEleList" value-name="value"
|
|||
|
|
label-name="name" @confirm="confirmElectricity"></u-select>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="s-station">
|
|||
|
|
<u-section :title="$t('homePage.price.volLevel')" line-color="#009C77" color="#2A2A2A" class="s-title" :right="false"
|
|||
|
|
style="margin-bottom: 20rpx;"></u-section>
|
|||
|
|
<view style="margin-top: 20rpx;">
|
|||
|
|
<u-input v-model="voltageLevelName" type="select" border="border" :placeholder="$t('homePage.price.selectVoltageLevel')"
|
|||
|
|
@click="voltageLevelShow = true" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<u-select v-model="voltageLevelShow" :default-value="defaultVoltageLevelList" :list="useVolList"
|
|||
|
|
@confirm="confirmVoltage" value-name="value" label-name="name"></u-select>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="s-station">
|
|||
|
|
<u-section :title="$t('homePage.price.exeTime')" :default-value="defaultcTimeArr" line-color="#009C77" 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"
|
|||
|
|
:placeholder="$t('homePage.price.selectExeTime')" @click="executionTimeShow = true" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<u-picker v-model="executionTimeShow" mode="time" :params="timeParams" @confirm="confirmTime"></u-picker>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="other-button">
|
|||
|
|
<u-button type="warning" :custom-style="resetButtonStyle" @click="reset">{{ this.$t('homePage.price.reset') }}</u-button>
|
|||
|
|
<u-button type="primary" :custom-style="sureButtonStyle" @click="search">{{ this.$t('homePage.price.sure') }}</u-button>
|
|||
|
|
</view>
|
|||
|
|
</u-popup>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import Section from '@/components/section/index.vue'
|
|||
|
|
import charts from "@/components/charts/index";
|
|||
|
|
import Search from "@/components/Search/index";
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
background: {
|
|||
|
|
backgroundColor: "#0EA17E",
|
|||
|
|
},
|
|||
|
|
detailData: {},
|
|||
|
|
levelsChart_loading: false,
|
|||
|
|
levelsChart_option: {},
|
|||
|
|
historyChart_loading: false,
|
|||
|
|
historyChart_option: {},
|
|||
|
|
differenceChart_loading: false,
|
|||
|
|
differenceChart_option: {},
|
|||
|
|
colorList: [{
|
|||
|
|
name: '深谷',
|
|||
|
|
color: '#00B754'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '谷',
|
|||
|
|
color: '#A1CE21'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '平',
|
|||
|
|
color: '#048FFF'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '峰',
|
|||
|
|
color: '#FF8A35'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '尖',
|
|||
|
|
color: '#FF3333'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
popupShow: false,
|
|||
|
|
filters: {
|
|||
|
|
regionId: undefined,
|
|||
|
|
electricityType: undefined,
|
|||
|
|
customerType: undefined,
|
|||
|
|
voltageLevel: undefined,
|
|||
|
|
executionTime: undefined
|
|||
|
|
},
|
|||
|
|
regionName: '上海',
|
|||
|
|
electricityName: '两部制',
|
|||
|
|
customerName: '大工业用户',
|
|||
|
|
voltageLevelName: '10千伏',
|
|||
|
|
popupShow: false,
|
|||
|
|
regionShow: false, // 省市区域
|
|||
|
|
regionList: [], //省市区域
|
|||
|
|
electricityShow: false, //用电部制/分类
|
|||
|
|
customerShow: false, //用电客户
|
|||
|
|
voltageLevelShow: false, //电压等级
|
|||
|
|
executionTimeShow: false, //执行日期
|
|||
|
|
timeParams: {
|
|||
|
|
year: true,
|
|||
|
|
month: true,
|
|||
|
|
day: false,
|
|||
|
|
hour: false,
|
|||
|
|
minute: false,
|
|||
|
|
second: false
|
|||
|
|
},
|
|||
|
|
sureButtonStyle: {
|
|||
|
|
backgroundColor: 'rgba(0, 156, 119, 1)',
|
|||
|
|
width: '280rpx',
|
|||
|
|
height: '70rpx',
|
|||
|
|
fontSize: '28rpx',
|
|||
|
|
color: 'rgba(255, 255, 255, 1)'
|
|||
|
|
},
|
|||
|
|
resetButtonStyle: {
|
|||
|
|
backgroundColor: 'rgba(191, 228, 159, 1)',
|
|||
|
|
width: '280rpx',
|
|||
|
|
height: '70rpx',
|
|||
|
|
fontSize: '28rpx',
|
|||
|
|
color: 'rgba(40, 40, 40, 1)'
|
|||
|
|
},
|
|||
|
|
dataList: [],
|
|||
|
|
loading: false,
|
|||
|
|
defaultRegionArr: [],
|
|||
|
|
defaultElectricityArr: [],
|
|||
|
|
defaultcCustomerArr: [],
|
|||
|
|
defaultVoltageLevelList: [],
|
|||
|
|
defaultcTimeArr: [],
|
|||
|
|
history_tableData: [],
|
|||
|
|
difference_tableData: [],
|
|||
|
|
historytype: 'chart',
|
|||
|
|
differencetype: 'chart',
|
|||
|
|
detailList: [],
|
|||
|
|
electricityList: [],
|
|||
|
|
customerList: [],
|
|||
|
|
voltageLevelList: [],
|
|||
|
|
useEleList: [],
|
|||
|
|
useCustList: [],
|
|||
|
|
useVolList: [],
|
|||
|
|
middleIndexList: [],
|
|||
|
|
dataList: []
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
Section,
|
|||
|
|
charts,
|
|||
|
|
Search
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.getRegionList()
|
|||
|
|
var currentDate = new Date();
|
|||
|
|
// 获取年份和月份
|
|||
|
|
var year = currentDate.getFullYear();
|
|||
|
|
var month = currentDate.getMonth() + 1; // 月份从0开始，所以要加1
|
|||
|
|
// 格式化为"yyyy-mm"的格式
|
|||
|
|
var formattedDate = year + '-' + (month < 10 ? '0' + month : month);
|
|||
|
|
this.filters.regionId = 18
|
|||
|
|
this.filters.electricityType = 2
|
|||
|
|
this.filters.customerType = 2
|
|||
|
|
this.filters.voltageLevel = 4
|
|||
|
|
this.filters.executionTime = formattedDate
|
|||
|
|
this.getData()
|
|||
|
|
this.loading = true
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
reset() {
|
|||
|
|
var currentDate = new Date();
|
|||
|
|
// 获取年份和月份
|
|||
|
|
var year = currentDate.getFullYear();
|
|||
|
|
var month = currentDate.getMonth() + 1; // 月份从0开始，所以要加1
|
|||
|
|
// 格式化为"yyyy-mm"的格式
|
|||
|
|
var formattedDate = year + '-' + (month < 10 ? '0' + month : month);
|
|||
|
|
this.filters.regionId = 18
|
|||
|
|
this.filters.electricityType = 2
|
|||
|
|
this.filters.customerType = 2
|
|||
|
|
this.filters.voltageLevel = 4
|
|||
|
|
this.filters.executionTime = formattedDate
|
|||
|
|
this.regionName = '上海'
|
|||
|
|
this.electricityName = '两部制'
|
|||
|
|
this.customerName = '大工业用户'
|
|||
|
|
this.voltageLevelName = '10千伏'
|
|||
|
|
|
|||
|
|
this.useEleList = this.electricityList.filter(item => +item.type === +this.filters.customerType)
|
|||
|
|
this.useVolList = this.voltageLevelList.filter(item => +item.type === +this.filters.customerType)
|
|||
|
|
this.defaultFind()
|
|||
|
|
},
|
|||
|
|
defaultFind() {
|
|||
|
|
const regionIndex = this.regionList.findIndex((item) => {
|
|||
|
|
return +item.id === +this.filters.regionId
|
|||
|
|
})
|
|||
|
|
this.defaultRegionArr = [regionIndex]
|
|||
|
|
|
|||
|
|
const electricityIndex = this.electricityList.findIndex((item) => {
|
|||
|
|
|
|||
|
|
return +item.value === +this.filters.electricityType
|
|||
|
|
})
|
|||
|
|
this.defaultElectricityArr = [electricityIndex]
|
|||
|
|
|
|||
|
|
const customerIndex = this.customerList.findIndex((item) => {
|
|||
|
|
return +item.value === +this.filters.customerType
|
|||
|
|
})
|
|||
|
|
this.defaultcCustomerArr = [customerIndex]
|
|||
|
|
|
|||
|
|
const voltageLevelIndex = this.voltageLevelList.findIndex((item) => {
|
|||
|
|
return +item.value === +this.filters.voltageLevel
|
|||
|
|
})
|
|||
|
|
this.defaultVoltageLevelList = [voltageLevelIndex]
|
|||
|
|
},
|
|||
|
|
changeHistoryType(val) {
|
|||
|
|
this.historytype = val
|
|||
|
|
this.getHistoryChart(this.detailData.id)
|
|||
|
|
},
|
|||
|
|
changeDifferenceType(val) {
|
|||
|
|
this.differencetype = val
|
|||
|
|
this.getDifferenceChart(this.detailData.id)
|
|||
|
|
},
|
|||
|
|
async getRegionList() {
|
|||
|
|
const {
|
|||
|
|
data
|
|||
|
|
} = await this.$u.api.proxyPrice.GetIndustrialElecRegionList()
|
|||
|
|
this.regionList = data
|
|||
|
|
const regionIndex = this.regionList.findIndex((item) => {
|
|||
|
|
return +item.id === +this.filters.regionId
|
|||
|
|
})
|
|||
|
|
this.electricityList = this.regionList[regionIndex].electricityType ? JSON.parse(this.regionList[regionIndex].electricityType) : []
|
|||
|
|
this.customerList = this.regionList[regionIndex].customerType ? JSON.parse(this.regionList[regionIndex].customerType) : []
|
|||
|
|
this.voltageLevelList = this.regionList[regionIndex].voltageLevel ? JSON.parse(this.regionList[regionIndex].voltageLevel) : []
|
|||
|
|
this.useEleList = this.electricityList.filter(item => +item.type === +this.filters.customerType)
|
|||
|
|
this.useVolList = this.voltageLevelList.filter(item => +item.type === +this.filters.customerType)
|
|||
|
|
|
|||
|
|
this.defaultFind()
|
|||
|
|
},
|
|||
|
|
decSearch(e) {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
showPopup() {
|
|||
|
|
this.popupShow = true
|
|||
|
|
},
|
|||
|
|
closePop() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
async getData() {
|
|||
|
|
const params = {
|
|||
|
|
pageNum: 1,
|
|||
|
|
pageSize: 2,
|
|||
|
|
...this.filters
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
const {
|
|||
|
|
data
|
|||
|
|
} = await this.$u.api.proxyPrice.GetIndustrialElecPricePage(params)
|
|||
|
|
this.detailData = data.list[0]
|
|||
|
|
this.detailList = data.list
|
|||
|
|
if (this.detailData?.id) {
|
|||
|
|
this.getLevelsChart(this.detailData.id)
|
|||
|
|
this.getHistoryChart(this.detailData.id)
|
|||
|
|
this.getDifferenceChart(this.detailData.id)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
} finally {
|
|||
|
|
this.loading = false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
confirmRegion(val) {
|
|||
|
|
|
|||
|
|
const regionIndex = this.regionList.findIndex((item) => {
|
|||
|
|
return +item.id === +val[0].value
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
this.defaultRegionArr = [regionIndex]
|
|||
|
|
this.electricityList = this.regionList[regionIndex].electricityType ? JSON.parse(this.regionList[regionIndex].electricityType) : []
|
|||
|
|
this.customerList = this.regionList[regionIndex].customerType ? JSON.parse(this.regionList[regionIndex].customerType) : []
|
|||
|
|
this.voltageLevelList = this.regionList[regionIndex].voltageLevel ? JSON.parse(this.regionList[regionIndex].voltageLevel) : []
|
|||
|
|
if (+this.filters.regionId !== val[0].value) {
|
|||
|
|
this.filters.customerType = this.customerList[0].value
|
|||
|
|
this.customerName = this.customerList[0].name
|
|||
|
|
this.useEleList = this.electricityList.filter(item => +item.type === +this.customerList[0].value)
|
|||
|
|
this.useVolList = this.voltageLevelList.filter(item => +item.type === +this.customerList[0].value)
|
|||
|
|
this.filters.electricityType = this.useEleList[0].value
|
|||
|
|
this.electricityName = this.useEleList[0].name
|
|||
|
|
this.filters.voltageLevel = this.voltageLevelList[0].value
|
|||
|
|
this.voltageLevelName = this.voltageLevelList[0].name
|
|||
|
|
this.defaultElectricityArr = [0]
|
|||
|
|
this.defaultcCustomerArr = [0]
|
|||
|
|
this.defaultVoltageLevelList = [0]
|
|||
|
|
}
|
|||
|
|
this.filters.regionId = val[0].value
|
|||
|
|
this.regionName = val[0].label
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
confirmCustomer(val) {
|
|||
|
|
|
|||
|
|
const customerIndex = this.customerList.findIndex((item) => {
|
|||
|
|
return +item.value === +val[0].value
|
|||
|
|
})
|
|||
|
|
this.customerName = val[0].label
|
|||
|
|
this.filters.customerType = val[0].value
|
|||
|
|
this.defaultcCustomerArr = [customerIndex]
|
|||
|
|
this.useEleList = this.electricityList.filter(item => +item.type === +val[0].value)
|
|||
|
|
|
|||
|
|
|
|||
|
|
this.electricityName = this.useEleList[0].name
|
|||
|
|
this.filters.electricityType = this.useEleList[0].value
|
|||
|
|
this.defaultElectricityArr = [0]
|
|||
|
|
this.useVolList = this.voltageLevelList.filter(item => +item.type === +this.useEleList[0].value)
|
|||
|
|
|
|||
|
|
|
|||
|
|
this.voltageLevelName = this.useVolList[0].name
|
|||
|
|
this.filters.voltageLevel = this.useVolList[0].value
|
|||
|
|
this.defaultVoltageLevelList = [0]
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
confirmElectricity(val) {
|
|||
|
|
const electricityIndex = this.useEleList.findIndex((item) => {
|
|||
|
|
return +item.value === +val[0].value
|
|||
|
|
})
|
|||
|
|
this.electricityName = val[0].label
|
|||
|
|
this.filters.electricityType = val[0].value
|
|||
|
|
this.defaultElectricityArr = [electricityIndex]
|
|||
|
|
this.useVolList = this.voltageLevelList.filter(item => +item.type === +val[0].value)
|
|||
|
|
this.voltageLevelName = this.useVolList[0].name
|
|||
|
|
this.filters.voltageLevel = this.useVolList[0].value
|
|||
|
|
this.defaultVoltageLevelList = [0]
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
confirmVoltage(val) {
|
|||
|
|
const voltageLevelIndex = this.useVolList.findIndex((item) => {
|
|||
|
|
return +item.value === +val[0].value
|
|||
|
|
})
|
|||
|
|
this.defaultVoltageLevelList = [voltageLevelIndex]
|
|||
|
|
this.filters.voltageLevel = val[0].value
|
|||
|
|
this.voltageLevelName = val[0].label
|
|||
|
|
},
|
|||
|
|
confirmTime(val) {
|
|||
|
|
this.filters.executionTime = val.year + '-' + val.month
|
|||
|
|
},
|
|||
|
|
search() {
|
|||
|
|
this.pageNum = 1;
|
|||
|
|
this.dataList = [];
|
|||
|
|
this.getData();
|
|||
|
|
this.popupShow = false;
|
|||
|
|
},
|
|||
|
|
findMiddleIndex(arr) {
|
|||
|
|
let firstIndex = -1 // 第一个不为null的
|
|||
|
|
|
|||
|
|
let prev = -1
|
|||
|
|
const result = []
|
|||
|
|
|
|||
|
|
for (let i = 0; i < arr.length; i++) {
|
|||
|
|
if (arr[i] !== null) {
|
|||
|
|
if (firstIndex === -1) {
|
|||
|
|
firstIndex = i
|
|||
|
|
}
|
|||
|
|
if (i !== arr.length - 1) {
|
|||
|
|
if (arr[i + 1] === null) {
|
|||
|
|
prev = i
|
|||
|
|
result.push((prev + firstIndex) / 2)
|
|||
|
|
firstIndex = -1
|
|||
|
|
}
|
|||
|
|
} else if (i === arr.length - 1) {
|
|||
|
|
prev = i
|
|||
|
|
result.push((prev + firstIndex) / 2)
|
|||
|
|
firstIndex = -1
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return result
|
|||
|
|
},
|
|||
|
|
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 : []
|
|||
|
|
} finally {
|
|||
|
|
this.levelsChart_loading = false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
initLevelsChart(data) {
|
|||
|
|
const series = []
|
|||
|
|
if (data.length > 0) {
|
|||
|
|
data.map(item => {
|
|||
|
|
this.middleIndexList = this.findMiddleIndex(item.list)
|
|||
|
|
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,
|
|||
|
|
formatter(params) {
|
|||
|
|
const isInclude = this.middleIndexList.findIndex(i => i === params.dataIndex)
|
|||
|
|
if (isInclude === -1) {
|
|||
|
|
return ''
|
|||
|
|
} else {
|
|||
|
|
return params.data
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
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
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async getHistoryChart(id) {
|
|||
|
|
this.historyChart_loading = true
|
|||
|
|
try {
|
|||
|
|
const res = await this.$u.api.proxyPrice.GetTouLineHistoryById(id)
|
|||
|
|
this.history_tableData = res.data.table
|
|||
|
|
this.initHistoryChart(res.data)
|
|||
|
|
} finally {
|
|||
|
|
this.historyChart_loading = false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
initHistoryChart(data) {
|
|||
|
|
const series = []
|
|||
|
|
const x_data = []
|
|||
|
|
if (data.line && data.line.length > 0) {
|
|||
|
|
data.line.map((item, index) => {
|
|||
|
|
const line_y_data = []
|
|||
|
|
if (item.list && item.list.length > 0) {
|
|||
|
|
item.list.map((itemLine) => {
|
|||
|
|
line_y_data.push(itemLine.value)
|
|||
|
|
if (index === 0) {
|
|||
|
|
x_data.push(itemLine.date)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
const colorInfo = this.colorList.find(color => color.name === item.name)
|
|||
|
|
const param = {
|
|||
|
|
type: 'line',
|
|||
|
|
smooth: true,
|
|||
|
|
symbol: line_y_data.length > 1 ? 'none' : 'circle',
|
|||
|
|
data: line_y_data,
|
|||
|
|
name: item.name,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: colorInfo ? colorInfo.color : undefined,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: colorInfo ? colorInfo.color : undefined
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
series.push(param)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
this.historyChart_option = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
confine: true,
|
|||
|
|
textStyle: {
|
|||
|
|
textShadowBlur: 10, // 重点
|
|||
|
|
textShadowColor: 'transparent', // 重点
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
|
|||
|
|
bottom: "15%",
|
|||
|
|
top: "20%",
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: x_data,
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#F0F0F0',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
color: '#A3A3A3'
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#F0F0F0',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#F0F0F0',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
color: '#A3A3A3'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
series: series
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async getDifferenceChart(id) {
|
|||
|
|
this.differenceChart_loading = true
|
|||
|
|
try {
|
|||
|
|
const res = await this.$u.api.proxyPrice.GetMaxPriceDiffById(id)
|
|||
|
|
this.initDifferenceChart(res.data)
|
|||
|
|
this.difference_tableData = res.data.table
|
|||
|
|
} finally {
|
|||
|
|
this.differenceChart_loading = false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
initDifferenceChart(data) {
|
|||
|
|
const x_data = []
|
|||
|
|
const y_data = []
|
|||
|
|
|
|||
|
|
if (data.line && data.line.length > 0) {
|
|||
|
|
data.line.map((item, index) => {
|
|||
|
|
x_data.push(item.date)
|
|||
|
|
y_data.push(item.value)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
this.differenceChart_option = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
confine: true,
|
|||
|
|
textStyle: {
|
|||
|
|
textShadowBlur: 10, // 重点
|
|||
|
|
textShadowColor: 'transparent', // 重点
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
|
|||
|
|
bottom: "15%",
|
|||
|
|
top: "20%",
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: x_data,
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#F0F0F0',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
color: '#A3A3A3'
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#F0F0F0',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
markPoint: {
|
|||
|
|
data: [{
|
|||
|
|
type: 'max',
|
|||
|
|
name: '最大值'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'min',
|
|||
|
|
name: '最小值'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
markLine: {
|
|||
|
|
data: [{
|
|||
|
|
type: 'max',
|
|||
|
|
name: '最大值'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'min',
|
|||
|
|
name: '最小值'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
color: '#A3A3A3'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#F0F0F0',
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: {
|
|||
|
|
type: 'line',
|
|||
|
|
smooth: true,
|
|||
|
|
symbol: y_data.length > 1 ? 'none' : 'circle',
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
width: 1
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
areaStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|||
|
|
offset: 0,
|
|||
|
|
color: 'rgba(255, 184, 0, 0.3)'
|
|||
|
|
}, {
|
|||
|
|
offset: 1,
|
|||
|
|
color: 'rgba(255, 184, 0, 0.05)'
|
|||
|
|
}], false),
|
|||
|
|
// shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|||
|
|
// shadowBlur: 10
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: 'rgb(255, 184, 0)'
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
markPoint: {
|
|||
|
|
data: [{
|
|||
|
|
type: 'max',
|
|||
|
|
name: '最大值'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'min',
|
|||
|
|
name: '最小值'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
markLine: {
|
|||
|
|
data: [{
|
|||
|
|
type: 'max',
|
|||
|
|
name: '最大值'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'min',
|
|||
|
|
name: '最小值'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
data: y_data
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.detail-warp {
|
|||
|
|
width: 100%;
|
|||
|
|
overflow: auto;
|
|||
|
|
.top-search {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 230rpx;
|
|||
|
|
|
|||
|
|
background: linear-gradient(45deg, rgba(0, 156, 119, 1), rgba(178, 223, 138, 1));
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
padding-top: 30rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: rgba(248, 248, 248, 1);
|
|||
|
|
|
|||
|
|
.left {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.value-box {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 40rpx;
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
width: 250rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: rgba(255, 255, 255, 1);
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.value {
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: rgba(255, 255, 255, 1);
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right {
|
|||
|
|
// width: 200rpx;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: rgba(255, 255, 255, 1);
|
|||
|
|
|
|||
|
|
.value-box {
|
|||
|
|
position: relative;
|
|||
|
|
right: 50rpx;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 40rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price-box {
|
|||
|
|
padding: 20rpx;
|
|||
|
|
// margin: 20rpx;
|
|||
|
|
// margin-right: 20rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
background: #ffffff !important;
|
|||
|
|
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
|
|||
|
|
padding: 20rpx;
|
|||
|
|
|
|||
|
|
.top-right-box {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
flex: 1;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
|
|||
|
|
.top-right-item {
|
|||
|
|
padding: 5rpx 10rpx;
|
|||
|
|
border: 1rpx solid #009c77;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #009c77;
|
|||
|
|
cursor: pointer;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
background: #009c77;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-title {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-value {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.levels-chart {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 450rpx;
|
|||
|
|
position: relative;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.value-box {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
height: 300rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
.box {
|
|||
|
|
border-radius: 9rpx;
|
|||
|
|
background: rgba(0, 156, 119, 0.05);
|
|||
|
|
width: 330rpx;
|
|||
|
|
height: 140rpx;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.box-value {
|
|||
|
|
text-align: center;
|
|||
|
|
color: #009C77;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box-title {
|
|||
|
|
text-align: center;
|
|||
|
|
color: #2C3231;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-box {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 20rpx 20rpx 0;
|
|||
|
|
text-align: right;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
padding-top: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.s-station {
|
|||
|
|
margin-bottom: 60rpx;
|
|||
|
|
padding: 0 20px 0 20px;
|
|||
|
|
|
|||
|
|
.s-title {
|
|||
|
|
font-size: 35rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
// padding-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.s-content {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.other-button {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-evenly;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-box {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
|
|||
|
|
.content-box {
|
|||
|
|
width: 50%;
|
|||
|
|
height: 100rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
|
|||
|
|
.content-title {
|
|||
|
|
color: #999999;
|
|||
|
|
width: 300rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-value {
|
|||
|
|
color: #282828;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
margin-top: 5rpx;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
|
|||
|
|
width: 300rpx;
|
|||
|
|
margin-right: 5rpx;
|
|||
|
|
background: rgba(0, 156, 119, 0.05);
|
|||
|
|
height: 48rpx;
|
|||
|
|
line-height: 48rpx;
|
|||
|
|
padding-left: 5rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|