1443 lines
38 KiB
Vue
1443 lines
38 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 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">
|
||
{{ $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 v-if="!stationValue" 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 v-if="!stationValue" 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 || timeSlot }}
|
||
</view>
|
||
<view v-if="!stationValue" class="time-title">
|
||
{{ this.$t('homePage.price.eleType') }}
|
||
</view>
|
||
<view v-if="!stationValue" class="time-value">
|
||
{{ detailData.electricityTypeLabel }}
|
||
</view>
|
||
<view class="time-title">
|
||
{{ this.$t('homePage.price.volLevel') }}
|
||
</view>
|
||
<view class="time-value">
|
||
{{ stationValue? (detailData.voltageLevelLabel || voltageLevelName): detailData.voltageLevelLabel }}
|
||
</view>
|
||
<view class="title">
|
||
{{ 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>
|
||
<!-- <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 v-if="!stationValue" 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 v-if="!stationValue" 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 v-if="!stationValue" 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="stationValue? '40%':'75%'" placement="top-end" @close="closePop">
|
||
<view class="title">{{this.$t('homePage.price.sift')}}</view>
|
||
<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;">
|
||
<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 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;">
|
||
<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 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;">
|
||
<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 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;">
|
||
<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 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"
|
||
: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 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: {
|
||
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'
|
||
}
|
||
],
|
||
overseasColorList:[
|
||
{
|
||
name: this.language !== 'en_US'? '平时段':'Normal period',
|
||
color: '#048FFF'
|
||
}
|
||
],
|
||
popupShow: false,
|
||
filters: {
|
||
regionId: undefined,
|
||
electricityType: undefined,
|
||
customerType: undefined,
|
||
voltageLevel: undefined,
|
||
executionTime: undefined
|
||
},
|
||
currentStationName:'',
|
||
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: '#009458',
|
||
width: '280rpx',
|
||
height: '70rpx',
|
||
fontSize: '28rpx',
|
||
color: 'rgba(255, 255, 255, 1)'
|
||
|
||
},
|
||
resetButtonStyle: {
|
||
backgroundColor: '#fdd100',
|
||
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: [],
|
||
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
|
||
}
|
||
},
|
||
onLoad() {},
|
||
created() {
|
||
if (!this.stationValue) {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
|
||
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: {
|
||
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.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)
|
||
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 = [];
|
||
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的
|
||
|
||
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 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 : [],
|
||
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 = []
|
||
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(7, 151, 110, 1), rgba(254, 131, 15, 0.4));
|
||
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 #009458;
|
||
font-size: 24rpx;
|
||
color: #009458;
|
||
cursor: pointer;
|
||
margin-right: 10rpx;
|
||
border-radius: 8rpx;
|
||
|
||
&.active {
|
||
background: #009458;
|
||
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: #009458;
|
||
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;
|
||
::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;
|
||
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> |