|
@@ -1,928 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="monitor-weather">
|
|
|
- <div class="left" :style="{width: isCollapse?'384px':'40px',minWidth: isCollapse?'384px':'40px'}">
|
|
|
- <SvgIcon class="collapse" :name="isCollapse ? 'ele-Expand' : 'ele-Fold'" :size="16" @click="changeCollapse" />
|
|
|
- <div class="city-weather-data-overview-wrap" v-if="isCollapse">
|
|
|
- <section class="title">
|
|
|
- <span>城市</span>
|
|
|
- <span>风力</span>
|
|
|
- <span>日照时长</span>
|
|
|
- </section>
|
|
|
- <section style="cursor: pointer" :class="currentcityId == item.id ? 'active' : ''" @click="currentcityId = item.id, currentcityName = item.name" v-for="(item, index) in cityList" :key="index">
|
|
|
- <span>{{ item.name }}</span>
|
|
|
- <span>{{ item.windpower }}</span>
|
|
|
- <span>{{ item.sunshineDuration }}</span>
|
|
|
- </section>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <el-row :gutter="15" class="home-card-two mb15">
|
|
|
- <el-col>
|
|
|
- <div class="weather-info">
|
|
|
- <section v-if="oneCityInfo.weather" style="display: flex;justify-content: space-between;">
|
|
|
- <div>
|
|
|
- <span class="temperature">{{ oneCityInfo.Temperature }}℃</span>
|
|
|
- <img :src="`/imgs/weather/${oneCityInfo.weather}.svg`" alt="">
|
|
|
- <span class="weather">{{ oneCityInfo.weather }}</span>
|
|
|
- <span>{{ oneCityInfo.reporttime }}更新</span>
|
|
|
- </div>
|
|
|
- <div class="history" @click="$router.push('/heating-monitor/weather-history/' + oneCityInfo.id)">历史数据 ></div>
|
|
|
- </section>
|
|
|
- <section>
|
|
|
- <span style="margin-right: 20px;">地点:{{ currentcityName }}</span>
|
|
|
- <img src="/@/assets/img/windPowerIcon.svg" alt="">
|
|
|
- <span>风力: {{ oneCityInfo.winddirection + oneCityInfo.windpower }}</span>
|
|
|
- <img class="sunset-sunrise" src="/@/assets/img/sunset.svg" alt="">
|
|
|
- <span class="sunset">日出时间: {{ oneCityInfo.sunrise }}</span>
|
|
|
- <span>日落时间: {{ oneCityInfo.sunset }}</span>
|
|
|
- </section>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="15" class="home-card-two mb15">
|
|
|
- <el-col>
|
|
|
- <div class="home-card-item">
|
|
|
- <div class="home-card-item-title">
|
|
|
- <span>温度 监测图表</span>
|
|
|
- <el-select @change="getTemperatureEchartById(currentcityId)" v-model="temperatureType" placeholder="请选择查询范围" size="mini">
|
|
|
- <el-option v-for="item in ranges" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div style="height: 100%" ref="homeTemLineRef"></div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="15" class="home-card-three">
|
|
|
- <el-col>
|
|
|
- <div class="home-card-item">
|
|
|
- <div class="home-card-item-title">
|
|
|
- <span>风力 监测图表</span>
|
|
|
- <el-select @change="getWindpowerEchartById(currentcityId)" v-model="windpowerType" placeholder="请选择查询范围" size="mini">
|
|
|
- <el-option v-for="item in ranges" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div style="height: 100%" ref="homeWindLineRef"></div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script lang="ts">
|
|
|
-import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onActivated } from 'vue';
|
|
|
-import * as echarts from 'echarts';
|
|
|
-import { useStore } from '/@/store/index';
|
|
|
-
|
|
|
-import api from '/@/api/datahub';
|
|
|
-
|
|
|
-let global: any = {
|
|
|
- homeChartOne: null,
|
|
|
- homeChartTwo: null,
|
|
|
- homeCharThree: null,
|
|
|
- dispose: [null, '', undefined]
|
|
|
-};
|
|
|
-
|
|
|
-export default defineComponent({
|
|
|
- name: 'weather',
|
|
|
- setup() {
|
|
|
- const homeTemLineRef = ref();
|
|
|
- const homeWindLineRef = ref();
|
|
|
- const isCollapse = ref(true);
|
|
|
- const store = useStore();
|
|
|
- const state = reactive({
|
|
|
- city: '',
|
|
|
- cityList: [],
|
|
|
- oneCityInfo: {} as any,
|
|
|
- temperatureType: 1,
|
|
|
- windpowerType: 1,
|
|
|
- ranges: [
|
|
|
- {
|
|
|
- value: 1,
|
|
|
- label: "日数据"
|
|
|
- },
|
|
|
- {
|
|
|
- value: 2,
|
|
|
- label: "周数据"
|
|
|
- },
|
|
|
- {
|
|
|
- value: 3,
|
|
|
- label: "月数据"
|
|
|
- },
|
|
|
- {
|
|
|
- value: 4,
|
|
|
- label: "年数据"
|
|
|
- }
|
|
|
- ],
|
|
|
- xAxis: [],
|
|
|
- tem: [],
|
|
|
- averageTem: [],
|
|
|
- foreCastInfoTem: [],
|
|
|
- foreCastAvgInfoTem: [],
|
|
|
- xAxisWind: [],
|
|
|
- foreCastInfoWind: [],
|
|
|
- foreCastAvgInfoWind: [],
|
|
|
- temWind: [],
|
|
|
- averageTemWind: [],
|
|
|
- currentcityId: 0,
|
|
|
- currentcityName: '',
|
|
|
- myCharts: [],
|
|
|
- charts: {
|
|
|
- theme: '',
|
|
|
- bgColor: '',
|
|
|
- color: '#303133',
|
|
|
- },
|
|
|
- });
|
|
|
- // 获取左侧数据
|
|
|
- const getCityWeatherList = () => {
|
|
|
- api.weather.getCityWeatherList().then((res: any) => {
|
|
|
- state.cityList = res.Info;
|
|
|
- if (!res.Info.length) return;
|
|
|
- state.currentcityId = res.Info[0].id;
|
|
|
- state.currentcityName = res.Info[0].name;
|
|
|
- });
|
|
|
- };
|
|
|
-
|
|
|
- // 根据ID获取指定城市的风力图表
|
|
|
- const getWindpowerEchartById = (id: number) => {
|
|
|
- api.weather.getWindpowerEchartById({ id: id, types: state.windpowerType }).then((res: any) => {
|
|
|
- const { AvgInfo, Info, ForeCastInfo, ForeCastAvgInfo} = res;
|
|
|
- state.xAxisWind = [];
|
|
|
- state.temWind = [];
|
|
|
- state.foreCastInfoWind = [];
|
|
|
- state.averageTemWind = [];
|
|
|
- state.foreCastAvgInfoWind = [];
|
|
|
- if (Info && Info.length) {
|
|
|
- state.xAxisWind = [];
|
|
|
- Info.forEach((i: any) => {
|
|
|
- state.xAxisWind.push(i.time);
|
|
|
- state.temWind.push(i.value);
|
|
|
- // state.foreCastInfoWind.push('-');
|
|
|
- })
|
|
|
- }
|
|
|
- if (AvgInfo && AvgInfo.length) {
|
|
|
- AvgInfo.forEach((i: any) => {
|
|
|
- state.averageTemWind.push(i.value)
|
|
|
- // state.foreCastAvgInfoWind.push('-');
|
|
|
- })
|
|
|
- }
|
|
|
- if([2, 3].indexOf(state.windpowerType) > -1) {
|
|
|
- // 周数据、月数据
|
|
|
- state.xAxisWind = [];
|
|
|
- ForeCastInfo.forEach((i: any) => {
|
|
|
- // state.xAxisWind.push(i.time);
|
|
|
- // state.temWind.push('-');
|
|
|
- state.foreCastInfoWind.push(i.value);
|
|
|
- state.xAxisWind.push(i.time);
|
|
|
- })
|
|
|
- ForeCastAvgInfo.forEach((i: any) => {
|
|
|
- state.foreCastAvgInfoWind.push(i.value);
|
|
|
- })
|
|
|
- }
|
|
|
- nextTick(() => {
|
|
|
- initWindLineChart();
|
|
|
- });
|
|
|
- });
|
|
|
- };
|
|
|
-
|
|
|
- // 根据ID获取指定城市的温度图表
|
|
|
- const getTemperatureEchartById = (id: number) => {
|
|
|
- api.weather.getTemperatureEchartById({ id: id, types: state.temperatureType }).then((res: any) => {
|
|
|
- const { AvgInfo, Info, ForeCastLowInfo, ForeCastHighInfo } = res;
|
|
|
- state.xAxis = [];
|
|
|
- state.tem = [];
|
|
|
- state.foreCastInfoTem = [];
|
|
|
- state.averageTem = [];
|
|
|
- state.foreCastAvgInfoTem = [];
|
|
|
- if (Info && Info.length) {
|
|
|
- state.xAxis = [];
|
|
|
- Info.forEach((i: any) => {
|
|
|
- state.xAxis.push(i.time);
|
|
|
- state.tem.push(i.value);
|
|
|
- // state.foreCastInfoTem.push('-');
|
|
|
- })
|
|
|
- }
|
|
|
- if (AvgInfo && AvgInfo.length) {
|
|
|
- AvgInfo.forEach((i: any) => {
|
|
|
- state.averageTem.push(i.value)
|
|
|
- // state.foreCastAvgInfoTem.push('-');
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- if([2, 3].indexOf(state.temperatureType) > -1) {
|
|
|
- // 周数据、月数据
|
|
|
- state.xAxis = [];
|
|
|
- ForeCastLowInfo.forEach((i:any) => {
|
|
|
- // state.xAxis.push(i.time);
|
|
|
- // state.tem.push('-');
|
|
|
- state.xAxis.push(i.time);
|
|
|
- state.foreCastInfoTem.push(i.value);
|
|
|
- })
|
|
|
- ForeCastHighInfo.forEach((i: any) => {
|
|
|
- state.foreCastAvgInfoTem.push(i.value);
|
|
|
- })
|
|
|
- }
|
|
|
- console.log(state.xAxis)
|
|
|
- nextTick(() => {
|
|
|
- initTemLineChart();
|
|
|
- });
|
|
|
- });
|
|
|
- };
|
|
|
-
|
|
|
- // 获取顶部天气数据
|
|
|
- const getWhichCityWeather = (id: number) => {
|
|
|
- api.weather.getWhichCityWeather({ id: id }).then((res: any) => {
|
|
|
- state.oneCityInfo = res.Info
|
|
|
- });
|
|
|
- };
|
|
|
-
|
|
|
- // 温度折线图
|
|
|
- const initTemLineChart = () => {
|
|
|
- if (!global.dispose.some((b: any) => b === global.homeChartOne)) global.homeChartOne.dispose();
|
|
|
- global.homeChartOne = <any>echarts.init(homeTemLineRef.value, state.charts.theme);
|
|
|
-
|
|
|
- const option = {
|
|
|
- backgroundColor: state.charts.bgColor,
|
|
|
- grid: { top: 70, right: 40, bottom: 50, left: 40 },
|
|
|
- tooltip: { trigger: 'axis' },
|
|
|
- legend: { data: [2, 3].indexOf(state.temperatureType) > -1 ? ['平均气温(℃)', '最低温度(℃)', '最高温度(℃)'] : ['气温(℃)', '平均气温(℃)'], left: '0' },
|
|
|
- xAxis: {
|
|
|
- data: state.xAxis
|
|
|
- },
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- axisLabel: {
|
|
|
- formatter: "{value}℃"
|
|
|
- },
|
|
|
- splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
|
|
|
- },
|
|
|
- ],
|
|
|
- series: [2, 3].indexOf(state.temperatureType) > -1 ? [
|
|
|
- {
|
|
|
- name: '平均气温(℃)',
|
|
|
- type: 'line',
|
|
|
- symbolSize: 6,
|
|
|
- symbol: 'circle',
|
|
|
- smooth: true,
|
|
|
- // data: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
|
|
|
- data: state.averageTem,
|
|
|
- lineStyle: { color: '#fe9a8b' },
|
|
|
- itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
|
|
|
- areaStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: '#fe9a8bb3' },
|
|
|
- { offset: 1, color: '#fe9a8b03' },
|
|
|
- ]),
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: '最低温度(℃)',
|
|
|
- type: 'line',
|
|
|
- symbolSize: 6,
|
|
|
- symbol: 'circle',
|
|
|
- smooth: true,
|
|
|
- // data: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
|
|
|
- data: state.foreCastInfoTem,
|
|
|
- lineStyle: { color: '#2b79ff' },
|
|
|
- itemStyle: { color: '#2b79ff', borderColor: '#2b79ff' },
|
|
|
- areaStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: '#2b79ff' },
|
|
|
- { offset: 1, color: '#c5e3ed' },
|
|
|
- ]),
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: '最高温度(℃)',
|
|
|
- type: 'line',
|
|
|
- symbolSize: 6,
|
|
|
- symbol: 'circle',
|
|
|
- smooth: true,
|
|
|
- data: state.foreCastAvgInfoTem,
|
|
|
- lineStyle: { color: '#41b883' },
|
|
|
- itemStyle: { color: '#41b883', borderColor: '#41b883' },
|
|
|
- areaStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: '#41b883' },
|
|
|
- { offset: 1, color: '#ddf2eaab' },
|
|
|
- ]),
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- itemStyle: {
|
|
|
- color: {
|
|
|
- type: 'radial',
|
|
|
- x: 0.5,
|
|
|
- y: 0.5,
|
|
|
- r: 0.5,
|
|
|
- colorStops: [
|
|
|
- { offset: 0, color: '#9E87FF' },
|
|
|
- { offset: 0.4, color: '#9E87FF' },
|
|
|
- { offset: 0.5, color: '#fff' },
|
|
|
- { offset: 0.7, color: '#fff' },
|
|
|
- { offset: 0.8, color: '#fff' },
|
|
|
- { offset: 1, color: '#fff' },
|
|
|
- ],
|
|
|
- },
|
|
|
- borderColor: '#9E87FF',
|
|
|
- borderWidth: 2,
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- ]: [{
|
|
|
- name: '气温(℃)',
|
|
|
- type: 'line',
|
|
|
- symbolSize: 6,
|
|
|
- symbol: 'circle',
|
|
|
- smooth: true,
|
|
|
- // data: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
|
|
|
- data: state.tem,
|
|
|
- lineStyle: { color: '#fe9a8b' },
|
|
|
- itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
|
|
|
- areaStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: '#fe9a8bb3' },
|
|
|
- { offset: 1, color: '#fe9a8b03' },
|
|
|
- ]),
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: '平均气温(℃)',
|
|
|
- type: 'line',
|
|
|
- symbolSize: 6,
|
|
|
- symbol: 'circle',
|
|
|
- smooth: true,
|
|
|
- data: state.averageTem,
|
|
|
- lineStyle: { color: '#9E87FF' },
|
|
|
- itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
|
|
|
- areaStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: '#9E87FFb3' },
|
|
|
- { offset: 1, color: '#9E87FF03' },
|
|
|
- ]),
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- itemStyle: {
|
|
|
- color: {
|
|
|
- type: 'radial',
|
|
|
- x: 0.5,
|
|
|
- y: 0.5,
|
|
|
- r: 0.5,
|
|
|
- colorStops: [
|
|
|
- { offset: 0, color: '#9E87FF' },
|
|
|
- { offset: 0.4, color: '#9E87FF' },
|
|
|
- { offset: 0.5, color: '#fff' },
|
|
|
- { offset: 0.7, color: '#fff' },
|
|
|
- { offset: 0.8, color: '#fff' },
|
|
|
- { offset: 1, color: '#fff' },
|
|
|
- ],
|
|
|
- },
|
|
|
- borderColor: '#9E87FF',
|
|
|
- borderWidth: 2,
|
|
|
- },
|
|
|
- },
|
|
|
- },],
|
|
|
- };
|
|
|
- (<any>global.homeChartOne).setOption(option);
|
|
|
- (<any>state.myCharts).push(global.homeChartOne);
|
|
|
- };
|
|
|
- // 风力折线图
|
|
|
- const initWindLineChart = () => {
|
|
|
- if (!global.dispose.some((b: any) => b === global.homeChartTwo)) global.homeChartTwo.dispose();
|
|
|
- global.homeChartTwo = <any>echarts.init(homeWindLineRef.value, state.charts.theme);
|
|
|
- const option = {
|
|
|
- backgroundColor: state.charts.bgColor,
|
|
|
- grid: { top: 70, right: 40, bottom: 50, left: 40 },
|
|
|
- tooltip: { trigger: 'axis' },
|
|
|
- legend: { data: [2, 3].indexOf(state.windpowerType) > -1 ? ['风力(级)', '平均风力(级)', '预测风力(级)', '预测平均风力(级)'] : ['风力(级)', '平均风力(级)'], left: '0' },
|
|
|
- xAxis: {
|
|
|
- data: state.xAxisWind
|
|
|
- },
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- axisLabel: {
|
|
|
- formatter: "{value}级"
|
|
|
- },
|
|
|
- splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
|
|
|
- },
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '风力(级)',
|
|
|
- type: 'line',
|
|
|
- symbolSize: 6,
|
|
|
- symbol: 'circle',
|
|
|
- smooth: true,
|
|
|
- data: state.temWind,
|
|
|
- lineStyle: { color: '#fe9a8b' },
|
|
|
- itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
|
|
|
- areaStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: '#fe9a8bb3' },
|
|
|
- { offset: 1, color: '#fe9a8b03' },
|
|
|
- ]),
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: '预测风力(级)',
|
|
|
- type: 'line',
|
|
|
- symbolSize: 6,
|
|
|
- symbol: 'circle',
|
|
|
- smooth: true,
|
|
|
- data: state.foreCastInfoWind,
|
|
|
- lineStyle: { color: '#2b79ff' },
|
|
|
- itemStyle: { color: '#2b79ff', borderColor: '#2b79ff' },
|
|
|
- areaStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: '#2b79ff' },
|
|
|
- { offset: 1, color: '#c5e3ed' },
|
|
|
- ]),
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: '平均风力(级)',
|
|
|
- type: 'line',
|
|
|
- symbolSize: 6,
|
|
|
- symbol: 'circle',
|
|
|
- smooth: true,
|
|
|
- data: state.averageTemWind,
|
|
|
- lineStyle: { color: '#9E87FF' },
|
|
|
- itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
|
|
|
- areaStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: '#9E87FFb3' },
|
|
|
- { offset: 1, color: '#9E87FF03' },
|
|
|
- ]),
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- itemStyle: {
|
|
|
- color: {
|
|
|
- type: 'radial',
|
|
|
- x: 0.5,
|
|
|
- y: 0.5,
|
|
|
- r: 0.5,
|
|
|
- colorStops: [
|
|
|
- { offset: 0, color: '#9E87FF' },
|
|
|
- { offset: 0.4, color: '#9E87FF' },
|
|
|
- { offset: 0.5, color: '#fff' },
|
|
|
- { offset: 0.7, color: '#fff' },
|
|
|
- { offset: 0.8, color: '#fff' },
|
|
|
- { offset: 1, color: '#fff' },
|
|
|
- ],
|
|
|
- },
|
|
|
- borderColor: '#9E87FF',
|
|
|
- borderWidth: 2,
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: '预测平均风力(级)',
|
|
|
- type: 'line',
|
|
|
- symbolSize: 6,
|
|
|
- symbol: 'circle',
|
|
|
- smooth: true,
|
|
|
- data: state.foreCastAvgInfoWind,
|
|
|
- lineStyle: { color: '#41b883' },
|
|
|
- itemStyle: { color: '#41b883', borderColor: '#41b883' },
|
|
|
- areaStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: '#41b883' },
|
|
|
- { offset: 1, color: '#ddf2eaab' },
|
|
|
- ]),
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- itemStyle: {
|
|
|
- color: {
|
|
|
- type: 'radial',
|
|
|
- x: 0.5,
|
|
|
- y: 0.5,
|
|
|
- r: 0.5,
|
|
|
- colorStops: [
|
|
|
- { offset: 0, color: '#9E87FF' },
|
|
|
- { offset: 0.4, color: '#9E87FF' },
|
|
|
- { offset: 0.5, color: '#fff' },
|
|
|
- { offset: 0.7, color: '#fff' },
|
|
|
- { offset: 0.8, color: '#fff' },
|
|
|
- { offset: 1, color: '#fff' },
|
|
|
- ],
|
|
|
- },
|
|
|
- borderColor: '#9E87FF',
|
|
|
- borderWidth: 2,
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- (<any>global.homeChartTwo).setOption(option);
|
|
|
- (<any>state.myCharts).push(global.homeChartTwo);
|
|
|
- };
|
|
|
- // 批量设置 echarts resize
|
|
|
- const initEchartsResizeFun = () => {
|
|
|
- nextTick(() => {
|
|
|
- for (let i = 0; i < state.myCharts.length; i++) {
|
|
|
- setTimeout(() => {
|
|
|
- (<any>state.myCharts[i]).resize();
|
|
|
- }, 0);
|
|
|
- }
|
|
|
- });
|
|
|
- };
|
|
|
- // 批量设置 echarts resize
|
|
|
- const changeCollapse = () => {
|
|
|
- isCollapse.value = !isCollapse.value;
|
|
|
- initEchartsResizeFun()
|
|
|
- };
|
|
|
- // 批量设置 echarts resize
|
|
|
- const initEchartsResize = () => {
|
|
|
- window.addEventListener('resize', initEchartsResizeFun);
|
|
|
- };
|
|
|
- // 页面加载时
|
|
|
- onMounted(() => {
|
|
|
- initEchartsResize();
|
|
|
- getCityWeatherList();
|
|
|
- });
|
|
|
- // 由于页面缓存原因,keep-alive
|
|
|
- onActivated(() => {
|
|
|
- initEchartsResizeFun();
|
|
|
- });
|
|
|
- // 监听 vuex 中的 tagsview 开启全屏变化,重新 resize 图表,防止不出现/大小不变等
|
|
|
- watch(
|
|
|
- () => store.state.tagsViewRoutes.isTagsViewCurrenFull,
|
|
|
- () => {
|
|
|
- initEchartsResizeFun();
|
|
|
- }
|
|
|
- );
|
|
|
- // 监听 vuex 中是否开启深色主题
|
|
|
- watch(
|
|
|
- () => store.state.themeConfig.themeConfig.isIsDark,
|
|
|
- (isIsDark) => {
|
|
|
- nextTick(() => {
|
|
|
- state.charts.theme = isIsDark ? 'dark' : '';
|
|
|
- state.charts.bgColor = isIsDark ? 'transparent' : '';
|
|
|
- state.charts.color = isIsDark ? '#dadada' : '#303133';
|
|
|
- setTimeout(() => {
|
|
|
- initTemLineChart();
|
|
|
- }, 500);
|
|
|
- setTimeout(() => {
|
|
|
- initWindLineChart();
|
|
|
- }, 700);
|
|
|
- });
|
|
|
- },
|
|
|
- {
|
|
|
- deep: true,
|
|
|
- immediate: true,
|
|
|
- }
|
|
|
- );
|
|
|
- watch(
|
|
|
- () => state.currentcityId,
|
|
|
- () => {
|
|
|
- getWhichCityWeather(state.currentcityId);
|
|
|
- getTemperatureEchartById(state.currentcityId);
|
|
|
- getWindpowerEchartById(state.currentcityId)
|
|
|
- }
|
|
|
- );
|
|
|
- return {
|
|
|
- changeCollapse,
|
|
|
- isCollapse,
|
|
|
- homeTemLineRef,
|
|
|
- homeWindLineRef,
|
|
|
- getWhichCityWeather,
|
|
|
- getCityWeatherList,
|
|
|
- getTemperatureEchartById,
|
|
|
- getWindpowerEchartById,
|
|
|
- ...toRefs(state),
|
|
|
- };
|
|
|
- },
|
|
|
-});
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
-$homeNavLengh: 8;
|
|
|
-.history{
|
|
|
- font-weight: bold;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-.monitor-weather {
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- background-color: #fff;
|
|
|
- padding: 20px;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .left {
|
|
|
- width: 384px;
|
|
|
- height: 500px;
|
|
|
- margin-right: 20px;
|
|
|
- position: relative;
|
|
|
- .collapse {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- z-index: 1;
|
|
|
- padding: 5px;
|
|
|
- width: 36px;
|
|
|
- height: 36px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .city-weather-data-overview-wrap {
|
|
|
- border: 1px solid #f2f2f2;
|
|
|
-
|
|
|
- section.title {
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
- color: #1a1a1a;
|
|
|
- padding-top: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- section {
|
|
|
- padding: 20px 0;
|
|
|
-
|
|
|
- span {
|
|
|
- display: inline-block;
|
|
|
- width: 33%;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- span:nth-child(2) {
|
|
|
- border-left: 1px solid #f2f2f2;
|
|
|
- border-right: 1px solid #f2f2f2;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- section:nth-child(2n) {
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- section:nth-child(2n + 1) {
|
|
|
- background-color: #f8f8f8;
|
|
|
- }
|
|
|
-
|
|
|
- section.active {
|
|
|
- background: var(--el-color-primary-light-9);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .weather-info {
|
|
|
- padding: 15px 30px 15px 30px;
|
|
|
- background: var(--el-color-white);
|
|
|
- color: var(--el-text-color-primary);
|
|
|
- border: 1px solid var(--next-border-color-light);
|
|
|
-
|
|
|
- section:nth-child(1) {
|
|
|
- margin-bottom: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- section {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .temperature {
|
|
|
- font-size: 50px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- margin: 0 10px 0 30px;
|
|
|
- }
|
|
|
-
|
|
|
- .weather {
|
|
|
- margin-right: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- width: 24px;
|
|
|
- }
|
|
|
-
|
|
|
- .sunset-sunrise {
|
|
|
- margin: 0 8xpx 0 47px;
|
|
|
- }
|
|
|
-
|
|
|
- .sunset {
|
|
|
- margin-right: 40px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .home-card-two,
|
|
|
- .home-card-three {
|
|
|
- .home-card-item,
|
|
|
- .home-card-top {
|
|
|
- width: 100%;
|
|
|
- height: 130px;
|
|
|
- border-radius: 4px;
|
|
|
- transition: all ease 0.3s;
|
|
|
- padding: 20px;
|
|
|
- overflow: hidden;
|
|
|
- background: var(--el-color-white);
|
|
|
- color: var(--el-text-color-primary);
|
|
|
- border: 1px solid var(--next-border-color-light);
|
|
|
-
|
|
|
- &:hover {
|
|
|
- box-shadow: 0 2px 12px var(--next-color-dark-hover);
|
|
|
- transition: all ease 0.3s;
|
|
|
- }
|
|
|
-
|
|
|
- &-icon {
|
|
|
- width: 70px;
|
|
|
- height: 70px;
|
|
|
- border-radius: 100%;
|
|
|
- flex-shrink: 1;
|
|
|
-
|
|
|
- i {
|
|
|
- color: var(--el-text-color-placeholder);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &-title {
|
|
|
- font-size: 15px;
|
|
|
- font-weight: bold;
|
|
|
- height: 30px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // .home-card-one {
|
|
|
- // @for $i from 0 through 3 {
|
|
|
- // .home-one-animation#{$i} {
|
|
|
- // opacity: 0;
|
|
|
- // animation-name: error-num;
|
|
|
- // animation-duration: 0.5s;
|
|
|
- // animation-fill-mode: forwards;
|
|
|
- // animation-delay: calc($i/10) + s;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- .home-card-item-title {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- // .home-card-one .home-card-item {
|
|
|
- // width: 100%;
|
|
|
- // border-radius: 4px;
|
|
|
- // transition: all ease 0.3s;
|
|
|
- // overflow: hidden;
|
|
|
- // background: var(--el-color-white);
|
|
|
- // color: var(--el-text-color-primary);
|
|
|
- // border: 1px solid var(--next-border-color-light);
|
|
|
- // &:hover {
|
|
|
- // box-shadow: 0 2px 12px var(--next-color-dark-hover);
|
|
|
- // transition: all ease 0.3s;
|
|
|
- // }
|
|
|
- // .item-header {
|
|
|
- // display: flex;
|
|
|
- // justify-content: center;
|
|
|
- // align-content: center;
|
|
|
- // color: #101010;
|
|
|
- // padding: 10px 0;
|
|
|
- // border-bottom: 1px solid var(--next-border-color-light);
|
|
|
- // font-size: 20px;
|
|
|
- // font-weight: bold;
|
|
|
- // img {
|
|
|
- // margin-right: 32px;
|
|
|
- // width: 24px;
|
|
|
- // height: 24px;;
|
|
|
- // margin-top: 3px;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // .item-content {
|
|
|
- // padding: 26px;
|
|
|
- // p {
|
|
|
- // display: flex;
|
|
|
- // justify-content: space-between;
|
|
|
- // align-content: center;
|
|
|
- // span:nth-child(1) {
|
|
|
- // // padding-top: 4px;
|
|
|
- // line-height: 33px;;
|
|
|
- // font-size: 14px;
|
|
|
- // }
|
|
|
- // span:nth-child(2) {
|
|
|
- // color: #101010;
|
|
|
- // font-weight: bold;
|
|
|
- // font-size: 22px;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // p:nth-child(2) {
|
|
|
- // margin-top: 26px;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
-
|
|
|
- .home-card-two,
|
|
|
- .home-card-three {
|
|
|
- .home-card-item {
|
|
|
- height: 500px;
|
|
|
- }
|
|
|
-
|
|
|
- .home-card-top {
|
|
|
- height: 250px;
|
|
|
-
|
|
|
- .box-card {
|
|
|
- padding: 15px 20px 20px 20px;
|
|
|
-
|
|
|
- p {
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- &-item {
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .home-card-item,
|
|
|
- .home-card-top {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .home-monitor {
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .flex-warp-item {
|
|
|
- width: 25%;
|
|
|
- height: 111px;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .flex-warp-item-box {
|
|
|
- margin: auto;
|
|
|
- text-align: center;
|
|
|
- color: var(--el-text-color-primary);
|
|
|
- display: flex;
|
|
|
- border-radius: 5px;
|
|
|
- background: var(--next-bg-color);
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: var(--el-color-primary-light-9);
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @for $i from 0 through $homeNavLengh {
|
|
|
- .home-animation#{$i} {
|
|
|
- opacity: 0;
|
|
|
- animation-name: error-num;
|
|
|
- animation-duration: 0.5s;
|
|
|
- animation-fill-mode: forwards;
|
|
|
- animation-delay: calc($i/10) + s;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .text-info {
|
|
|
- color: #23c6c8;
|
|
|
- }
|
|
|
-
|
|
|
- .text-danger {
|
|
|
- color: #ed5565;
|
|
|
- }
|
|
|
-
|
|
|
- .git-res {
|
|
|
- margin-top: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .git-res .el-link {
|
|
|
- margin-right: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- ul,
|
|
|
- li {
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- list-style: none;
|
|
|
- }
|
|
|
-
|
|
|
- .product {
|
|
|
- margin-top: 50px;
|
|
|
-
|
|
|
- h3 {
|
|
|
- margin-bottom: 15px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .product li {
|
|
|
- margin-bottom: 20px;
|
|
|
- float: left;
|
|
|
- width: 150px;
|
|
|
- }
|
|
|
-
|
|
|
- .box-card.xx {
|
|
|
- margin-top: 20px;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|