运行监控-》天气检测，左侧天气列表要能收起来

src/views/heating/monitor/weather.vue

@@ -1,69 +1,70 @@
 <template>
-	<div class="monitor-weather">
-		<div class="left">
-			<div class="city-weather-data-overview-wrap">
-				<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">
-							<span class="temperature">{{ oneCityInfo.Temperature }}℃</span>
-							<img :src="`/imgs/weather/${oneCityInfo.weather}.svg`" alt="">
-							<span class="weather">{{ oneCityInfo.weather }}</span>
-							<span>{{ oneCityInfo.reporttime }}更新</span>
-						</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>
+  <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">
+              <span class="temperature">{{ oneCityInfo.Temperature }}℃</span>
+              <img :src="`/imgs/weather/${oneCityInfo.weather}.svg`" alt="">
+              <span class="weather">{{ oneCityInfo.weather }}</span>
+              <span>{{ oneCityInfo.reporttime }}更新</span>
+            </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">
@@ -74,353 +75,361 @@ import { useStore } from '/@/store/index';
 import api from '/@/api/datahub';
 
 let global: any = {
-	homeChartOne: null,
-	homeChartTwo: null,
-	homeCharThree: null,
-	dispose: [null, '', undefined]
+  homeChartOne: null,
+  homeChartTwo: null,
+  homeCharThree: null,
+  dispose: [null, '', undefined]
 };
 
 export default defineComponent({
-	name: 'home',
-	setup() {
-		const homeTemLineRef = ref();
-		const homeWindLineRef = ref();
-		const store = useStore();
-		const state = reactive({
-			city: '',
-			cityList: [],
-			oneCityInfo: {},
-			temperatureType: 1,
-			windpowerType: 1,
-			ranges: [
-				{
-					value: 1,
-					label: "日数据"
-				},
-				{
-					value: 2,
-					label: "周数据"
-				},
-				{
-					value: 3,
-					label: "月数据"
-				},
-				{
-					value: 4,
-					label: "年数据"
-				}
-			],
-			xAxis: [],
-			tem: [],
-			averageTem: [],
-			xAxisWind: [],
-			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 } = res;
-				state.xAxisWind = [];
-				state.temWind = [];
-				state.averageTemWind = [];
-				if (Info && Info.length) {
-					Info.forEach((i: any) => {
-						state.xAxisWind.push(i.time);
-						state.temWind.push(i.value);
-					})
-				}
-				if (AvgInfo && AvgInfo.length) {
-					AvgInfo.forEach((i: any) => {
-						state.averageTemWind.push(i.value)
-					})
-				}
-				nextTick(() => {
-					initWindLineChart();
-				});
-			});
-		};
-
-		// 根据ID获取指定城市的温度图表
-		const getTemperatureEchartById = (id: number) => {
-			api.weather.getTemperatureEchartById({ id: id, types: state.temperatureType }).then((res: any) => {
-				const { AvgInfo, Info } = res;
-				state.xAxis = [];
-				state.tem = [];
-				state.averageTem = [];
-				if (Info && Info.length) {
-					Info.forEach((i: any) => {
-						state.xAxis.push(i.time);
-						state.tem.push(i.value);
-					})
-				}
-				if (AvgInfo && AvgInfo.length) {
-					AvgInfo.forEach((i: any) => {
-						state.averageTem.push(i.value)
-					})
-				}
-				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: ['气温（℃）', '当日平均（℃）'], left: '40%' },
-				xAxis: {
-					data: state.xAxis
-				},
-				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: [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: ['风力（级）', '当日风力（级）'], left: '40%' },
-				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: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
-						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: [0, 24.1, 7.2, 15.5, 42.4, 42.4, 42.4, 24.1, 7.2, 15.5, 42.4, 0],
-						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,
-							},
-						},
-					},
-				],
-			};
-			(<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();
-					}, i * 1000);
-				}
-			});
-		};
-		// 批量设置 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 {
-			homeTemLineRef,
-			homeWindLineRef,
-			getWhichCityWeather,
-			getCityWeatherList,
-			getTemperatureEchartById,
-			getWindpowerEchartById,
-			...toRefs(state),
-		};
-	},
+  name: 'home',
+  setup() {
+    const homeTemLineRef = ref();
+    const homeWindLineRef = ref();
+    const isCollapse = ref(true);
+    const store = useStore();
+    const state = reactive({
+      city: '',
+      cityList: [],
+      oneCityInfo: {},
+      temperatureType: 1,
+      windpowerType: 1,
+      ranges: [
+        {
+          value: 1,
+          label: "日数据"
+        },
+        {
+          value: 2,
+          label: "周数据"
+        },
+        {
+          value: 3,
+          label: "月数据"
+        },
+        {
+          value: 4,
+          label: "年数据"
+        }
+      ],
+      xAxis: [],
+      tem: [],
+      averageTem: [],
+      xAxisWind: [],
+      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 } = res;
+        state.xAxisWind = [];
+        state.temWind = [];
+        state.averageTemWind = [];
+        if (Info && Info.length) {
+          Info.forEach((i: any) => {
+            state.xAxisWind.push(i.time);
+            state.temWind.push(i.value);
+          })
+        }
+        if (AvgInfo && AvgInfo.length) {
+          AvgInfo.forEach((i: any) => {
+            state.averageTemWind.push(i.value)
+          })
+        }
+        nextTick(() => {
+          initWindLineChart();
+        });
+      });
+    };
+
+    // 根据ID获取指定城市的温度图表
+    const getTemperatureEchartById = (id: number) => {
+      api.weather.getTemperatureEchartById({ id: id, types: state.temperatureType }).then((res: any) => {
+        const { AvgInfo, Info } = res;
+        state.xAxis = [];
+        state.tem = [];
+        state.averageTem = [];
+        if (Info && Info.length) {
+          Info.forEach((i: any) => {
+            state.xAxis.push(i.time);
+            state.tem.push(i.value);
+          })
+        }
+        if (AvgInfo && AvgInfo.length) {
+          AvgInfo.forEach((i: any) => {
+            state.averageTem.push(i.value)
+          })
+        }
+        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: ['气温（℃）', '当日平均（℃）'], left: '40%' },
+        xAxis: {
+          data: state.xAxis
+        },
+        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: [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: ['风力（级）', '当日风力（级）'], left: '40%' },
+        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: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
+            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: [0, 24.1, 7.2, 15.5, 42.4, 42.4, 42.4, 24.1, 7.2, 15.5, 42.4, 0],
+            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,
+              },
+            },
+          },
+        ],
+      };
+      (<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>
 
@@ -432,18 +441,32 @@ $homeNavLengh: 8;
 	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;
+			border: 1px solid #f2f2f2;
 
 			section.title {
 				font-size: 18px;
 				font-weight: bold;
-				color: #1A1A1A;
+				color: #1a1a1a;
+				padding-top: 30px;
 			}
 
 			section {
@@ -456,8 +479,8 @@ $homeNavLengh: 8;
 				}
 
 				span:nth-child(2) {
-					border-left: 1px solid #F2F2F2;
-					border-right: 1px solid #F2F2F2;
+					border-left: 1px solid #f2f2f2;
+					border-right: 1px solid #f2f2f2;
 				}
 			}
 
@@ -465,7 +488,7 @@ $homeNavLengh: 8;
 				background-color: #fff;
 			}
 
-			section:nth-child(2n+1) {
+			section:nth-child(2n + 1) {
 				background-color: #f8f8f8;
 			}
 
@@ -476,9 +499,9 @@ $homeNavLengh: 8;
 	}
 
 	.right {
-		width: calc(100% - 384px);
+		flex: 1;
 		height: 100%;
-		margin-left: 47px;
+		overflow: hidden;
 
 		.weather-info {
 			padding: 15px 30px 15px 30px;
@@ -525,7 +548,6 @@ $homeNavLengh: 8;
 
 	.home-card-two,
 	.home-card-three {
-
 		.home-card-item,
 		.home-card-top {
 			width: 100%;
@@ -715,7 +737,7 @@ $homeNavLengh: 8;
 	li {
 		padding: 0;
 		margin: 0;
-		list-style: none
+		list-style: none;
 	}
 
 	.product {