项目文件

src/components/home/Home01.vue

@@ -0,0 +1,523 @@
+<template>
+	<div>
+		<el-breadcrumb separator-class="el-icon-arrow-right">
+			<el-breadcrumb-item>首页</el-breadcrumb-item>
+		</el-breadcrumb>
+		<div class="row row01">
+			<el-card class="box-card row01-left">
+				<div class="info">
+					<span
+						class="cbg"
+						:style="{ backgroundImage: 'url(' + cbg + ')' }"
+					></span>
+					<div class="info-top">
+						<p class="p1">{{ userinfo.name }},欢迎登陆本系统!</p>
+						<p class="p2">上次登陆时间 : {{ userinfo.lastEnter }}</p>
+					</div>
+					<div class="info-bottom">
+						<div class="bot-left">
+							<div class="tem">
+								<span>{{ userinfo.at }}</span
+								>℃
+							</div>
+							<div class="wea">
+								<p>{{ userinfo.type }}</p>
+								<p>{{ userinfo.city }}</p>
+							</div>
+						</div>
+						<div class="bot-right">
+							<p>{{ userinfo.week }}</p>
+							<p>{{ userinfo.time }}</p>
+						</div>
+					</div>
+				</div>
+				<div class="notice">
+					<div class="tit">
+						<i :style="{ backgroundImage: 'url(' + titBg01 + ')' }"></i>通知公告
+					</div>
+					<ul>
+						<li>
+							<div>春季气候偏暖 病虫害发生气象风险高</div>
+							<span>2020-05-06</span>
+						</li>
+						<li>
+							<div>我国科学家找到攻克小麦赤霉病“金钥匙”</div>
+							<span>2020-05-06</span>
+						</li>
+						<li>
+							<div>山东农大攻克小麦赤霉病 取得关键突破</div>
+							<span>2020-05-06</span>
+						</li>
+						<li>
+							<div>今年江南梅雨季启幕偏早 防范农业不利影响</div>
+							<span>2020-05-06</span>
+						</li>
+						<li>
+							<div>东部小麦产区本周需抢晴打药防治赤霉病</div>
+							<span>2020-05-06</span>
+						</li>
+					</ul>
+				</div>
+			</el-card>
+			<el-card class="box-card row01-right">
+				<div class="tit">
+					<i :style="{ backgroundImage: 'url(' + titBg02 + ')' }"></i>空气温湿度
+					<el-cascader
+						v-model="equip_id"
+						:options="cascaderEquip"
+						size="mini"
+						:props="{ expandTrigger: 'hover', label: 'type_name', value: 'id' }"
+						@change="handleChange"
+					></el-cascader>
+				</div>
+
+				<div id="chart01" ref="chart01Ref"></div>
+			</el-card>
+		</div>
+		<div class="row row02">
+			<el-card class="box-card row02-left">
+				<div class="tit">
+					<i :style="{ backgroundImage: 'url(' + titBg03 + ')' }"></i>设备统计
+				</div>
+				<div class="con">
+					<div class="box" v-for="item in equipList" :key="item.device_id">
+						<div class="box-inner">
+							<span
+								:class="{
+									state: true,
+									on: item.device_status == 1,
+									off: item.device_status == 0
+								}"
+								>{{ item.device_status == 1 ? '在线' : '离线' }}</span
+							>
+							<p class="eq-id">{{ item.device_id }}</p>
+							<div class="infos">
+								<p>
+									<i class="iconfont icon-biaoqian"></i>
+									设备类型:{{ (item.device_type_id + '') | equipType }}
+								</p>
+								<p>
+									<i class="iconfont icon-biaoqian"></i>
+									设备名称:{{ item.device_name }}
+								</p>
+								<p>
+									<i class="iconfont icon-biaoqian"></i>
+									位置:{{item.city}}
+								</p>
+							</div>
+							<div class="date">
+								<span>{{ (item.uptime * 1000) | formatTime }}</span>
+								<a
+									href="#"
+									@click="
+										dataDetails(
+											item.device_id,
+											item.d_id,
+											item.device_type_id,
+											item.device_model
+										)
+									"
+									>详情 ></a
+								>
+							</div>
+						</div>
+					</div>
+				</div>
+			</el-card>
+			<el-card class="box-card row02-right">
+				<div class="tit">
+					<i :style="{ backgroundImage: 'url(' + titBg04 + ')' }"></i>设备占比
+				</div>
+				<div id="chart02" ref="chart02Ref"></div>
+			</el-card>
+		</div>
+	</div>
+</template>
+<script>
+import echarts from 'echarts'
+import { home1Line, home1Pie } from './chart.js'
+export default {
+	data() {
+		return {
+			titBg01: require('@/assets/images/home/home01/tit01.png'),
+			titBg02: require('@/assets/images/home/home01/tit02.png'),
+			titBg03: require('@/assets/images/home/home01/tit03.png'),
+			titBg04: require('@/assets/images/home/home01/tit04.png'),
+			cbg: require('@/assets/images/home/home01/cbg.png'),
+			myChart01: '',
+			myChart02: null,
+			equipList: [],
+			equip_id: '',
+			userinfo: {
+				name: '',
+				lastEnter: '',
+				at: '',
+				city: '',
+				type: '',
+				week: '',
+				time: ''
+			},
+			cascaderEquip: []
+		}
+	},
+	mounted() {
+		this.userinfo.lastEnter = localStorage.getItem('lastEnter')
+		this.userinfo.name = localStorage.getItem('username')
+		this.getcity()
+		this.chartsInit()
+		this.getPieData()
+		this.getEquipList()
+		this.getCascaderEquip()
+	},
+	destroyed() {
+		window.onresize = null
+	},
+	computed: {
+		username() {
+			return localStorage.getItem('username')
+		}
+	},
+	methods: {
+		chartsInit() {
+			// 折线图初始化
+			this.myChart01 = echarts.init(this.$refs.chart01Ref)
+			//饼状图初始化
+			this.myChart02 = echarts.init(this.$refs.chart02Ref)
+
+			window.addEventListener('resize', () => {
+				this.myChart01.resize()
+				this.myChart02.resize()
+			})
+		},
+		getEquipList() {
+			this.$axios({
+				method: 'POST',
+				url: '/api/equip_list',
+				data: this.qs.stringify({
+					'user ': this.username
+				})
+			}).then((res) => {
+				this.equipList = res.data.data
+				// this.equip_id = this.equipList[0].device_id
+				// this.getLineOption()
+			})
+		},
+		getPieData() {
+			this.$axios({
+				method: 'POST',
+				url: '/api/equip_total'
+			}).then((res) => {
+				let data = res.data.data
+				if (data) {
+					var scd = data.scd_num || 0
+					var qxz = data.qxz_num || 0
+					var cbd = data.cbd_num || 0
+					var bzy = data.bzy_num || 0
+					let pieOption = home1Pie(bzy, cbd, qxz, scd)
+					this.myChart02.setOption(pieOption)
+				}
+			})
+		},
+		getCascaderEquip() {
+			this.$axios({
+				method: 'POST',
+				url: '/api/equip_broken_line'
+			}).then((res) => {
+				if (res.data.message == '') {
+					this.cascaderEquip = res.data.data.data
+					this.equip_id =
+						this.cascaderEquip[0].children.length &&
+						this.cascaderEquip[0].children[0].id
+					this.getLineOption()
+				}
+			})
+		},
+		getLineOption() {
+			this.$axios({
+				method: 'POST',
+				url: '/api/equip_tp_line',
+				data: this.qs.stringify({
+					equip_id: this.equip_id
+				})
+			}).then((res) => {
+				let data = res.data.data
+				let option = {
+					time: [],
+					ah: [],
+					at: []
+				}
+				data.forEach((item) => {
+					option.time.push(this.formatTime(item.addtime*1000))
+					option.ah.push(item.ah)
+					option.at.push(item.at)
+				})
+				this.myChart01.setOption(home1Line(option))
+			})
+		},
+		handleChange() {
+			this.equip_id = this.equip_id[1]
+			this.getLineOption()
+		},
+		// 数据详情
+		dataDetails(e_id, d_id, type, device_model) {
+			if (type == 2) {
+				//杀虫灯
+				this.$router.push(`/index/scdDetail/${e_id}/${d_id}`)
+			} else if (type == 3) {
+				//测报
+				this.$router.push(`/index/cbdDataDetails/${e_id}/${d_id}`)
+			} else if (type == 4) {
+				//性诱
+				this.$router.push({
+					path: `/index/xycbDataDetail/${e_id}/${d_id}`,
+					query: { device_model: device_model }
+				})
+			} else if (type == 5) {
+				//气象站
+				this.$router.push(`/index/historyData/${e_id}`)
+			} else if (type == 6) {
+				//监控
+				this.$router.push({
+					path: `/index/monitor`,
+					query: { id: `${e_id}`, jktype: 0 }
+				})
+			} else if (type == 7) {
+				//孢子
+				this.$router.push(`/index/dataDetail/${e_id}/${d_id}`)
+			} else if (type == 9) {
+				//糖醋
+				this.$router.push(`/index/tcDataDetail/${e_id}/${d_id}`)
+			}
+		},
+		getcity() {
+			this.$axios({
+				method: 'POST',
+				url: '/api/city_addr'
+			}).then((res) => {
+				if (res.data.message == '') {
+					var data = res.data.data.data
+					this.userinfo.at = data.forecast[0].high.substring(2)
+					this.userinfo.type = data.forecast[0].type
+					this.userinfo.week = data.forecast[0].date.substring(
+						data.forecast[0].date.length - 3
+					)
+					var myDate = new Date()
+					var year = myDate.getFullYear() //获取当前年
+					var mon = myDate.getMonth() + 1 //获取当前月
+					var date = myDate.getDate() //获取当前日
+					this.userinfo.time = year + '年' + mon + '月' + date + '日'
+				}
+			})
+		}
+	}
+}
+</script>
+<style lang="less" scoped>
+.row {
+	display: flex;
+	.tit {
+		font-size: 18px;
+		font-weight: 800;
+		margin-bottom: 10px;
+		display: flex;
+		align-items: center;
+		i {
+			display: inline-block;
+			width: 16px;
+			height: 20px;
+			margin-right: 10px;
+			background-size: 100%;
+			background-position: center;
+			background-repeat: no-repeat;
+		}
+	}
+}
+.row01-right,
+.row02-left {
+	flex: 3;
+	margin: 5px;
+}
+.row01-left,
+.row02-right {
+	flex: 1.2;
+	margin: 5px;
+}
+.row01-left {
+	.info {
+		.cbg {
+			width: 80px;
+			height: 60px;
+			position: absolute;
+			background-size: 100% 100%;
+			right: 10px;
+			top: 10px;
+		}
+		position: relative;
+		width: 100%;
+		background-color: #34d496;
+		background-image: linear-gradient(#2ed399, #a5de39);
+		border-radius: 6px;
+		padding: 20px 20px;
+		box-sizing: border-box;
+		color: #fff;
+		margin-bottom: 20px;
+		.info-top {
+			.p1 {
+				font-size: 18px;
+			}
+			.p2 {
+				font-size: 14px;
+				line-height: 28px;
+			}
+			margin-bottom: 50px;
+		}
+		.info-bottom {
+			display: flex;
+			justify-content: space-between;
+			.bot-left {
+				display: flex;
+				.tem {
+					font-size: 18px;
+					span {
+						font-size: 40px;
+						margin-right: 5px;
+					}
+					margin-right: 15px;
+				}
+				.wea {
+					font-size: 14px;
+				}
+			}
+			.bot-right {
+				font-size: 14px;
+				text-align: right;
+			}
+		}
+	}
+	.notice {
+		li {
+			display: flex;
+			justify-content: space-between;
+			line-height: 28px;
+			div {
+				font-size: 14px;
+				width: 70%;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+			span {
+				color: #888;
+				flex: 1;
+				text-align: right;
+			}
+		}
+	}
+}
+.row01-right {
+	position: relative;
+	#chart01 {
+		width: 100%;
+		height: 350px;
+	}
+	.el-cascader {
+		margin-left: 20px;
+		width: 220px;
+	}
+}
+.row02-left {
+	.con {
+		// background:#f4f4f4;
+		min-height: 320px;
+		display: flex;
+		flex-wrap: wrap;
+		.box {
+			width: 25%;
+			padding: 5px;
+			box-sizing: border-box;
+			.box-inner {
+				box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.08);
+				background: #fff;
+				border-radius: 4px;
+				padding: 10px;
+				position: relative;
+				.eq-id {
+					font-size: 16px;
+					color: #11ce94;
+					font-weight: 600;
+					margin-bottom: 10px;
+				}
+				.infos {
+					color: #777;
+					line-height: 26px;
+					font-size: 13px;
+					i {
+						color: #ccc;
+						margin-right: 15px;
+					}
+				}
+				.date {
+					margin-top: 10px;
+					span {
+						font-size: 12px;
+						color: #999;
+					}
+					a {
+						font-size: 12px;
+						color: #999;
+						float: right;
+					}
+					a:hover {
+						color: #11ce94;
+					}
+				}
+				.state {
+					position: absolute;
+					display: inline-block;
+					right: 0;
+					top: 0;
+					color: #fff;
+					width: 46px;
+					height: 26px;
+					line-height: 26px;
+					text-align: center;
+					font-size: 12px;
+					border-top-right-radius: 4px;
+					&:before {
+						content: '';
+						position: absolute;
+						right: 26px;
+						width: 0;
+						height: 0;
+						border-width: 26px 20px;
+						border-style: solid;
+						border-radius: 4px;
+					}
+				}
+				.on {
+					background: #0ed094;
+					&:before {
+						border-color: #0ed094 transparent transparent transparent;
+					}
+				}
+				.off {
+					background: #fc595a;
+					&:before {
+						border-color: #fc595a transparent transparent transparent;
+					}
+				}
+			}
+		}
+	}
+}
+.row02-right {
+	position: relative;
+	min-height: 360px;
+	#chart02 {
+		position: absolute;
+		top: 70px;
+		bottom: 10px;
+		width: 100%;
+	}
+}
+</style>

src/components/home/Home02.vue

@@ -0,0 +1,549 @@
+<template>
+  <div class="wrap">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item>首页</el-breadcrumb-item>
+    </el-breadcrumb>
+    <div class="wrap01">
+      <div class="wrapL">
+        <div class="wrapLT">
+          <el-card class="box-card left">
+            <div class="info">
+              <span class="cbg" :style="{backgroundImage:'url('+cbg+')'}"></span>
+              <div class="info-top">
+                <p class="p1">admin,欢迎登陆本系统!</p>
+                <p class="p2">上次登陆时间 : 2020年5月20日 13:00:00</p>
+              </div>
+              <div class="info-bottom">
+                <div class="bot-left">
+                  <div class="tem">
+                    <span>28</span>℃
+                  </div>
+                  <div class="wea">
+                    <p>小雨转阴</p>
+                    <p>河南省 郑州市</p>
+                  </div>
+                </div>
+                <div class="bot-right">
+                  <p>星期日</p>
+                  <p>2020/06/04</p>
+                </div>
+              </div>
+              <i class="botBg" :style="{backgroundImage:'url('+botBg+')'}"></i>
+            </div>
+          </el-card>
+          <el-card class="box-card right">
+            <div class="tit">实时监控</div>
+            <div class="con">
+              <div class="item" v-for="(item,index) in realTimeData" :key="index">
+                <div class="eName">
+                  <span>
+                    <i
+                      :class="{dot:true,dot01:item.type==1,dot02:item.type==2,dot03:item.type==3,}"
+                    ></i>太阳能测报灯
+                  </span>
+                  <span>ID:{{item.id}}</span>
+                  <a href="#" :style="{backgroundImage:'url('+more+')'}"></a>
+                </div>
+                <ul class="state">
+                  <li v-for="(s,i) in item.status" :key="i">
+                    <span>
+                      <i class="iconfont icon-thermometer_icon"></i>
+                      {{i}}
+                    </span> :
+                    <span>{{s}}</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </el-card>
+        </div>
+        <div class="mapCon">
+          <el-card class="box-card card01">
+            <baidu-map
+              class="bm-view"
+              :center="center"
+              @ready="handler"
+              :scroll-wheel-zoom="true"
+              :zoom="zoom"
+            >
+              <bm-navigation anchor="BMAP_AN  CHOR_TOP_LEFT"></bm-navigation>
+              <div v-for="(equipItem,index) in equips" :key="index">
+                <bm-marker
+                  :position="{lng:equipItem.lng,lat:equipItem.lat}"
+                  :icon="{url:icons[equipItem.type], size: {width: 33, height: 40}}"
+                  @click="equipMarkerClick(equipItem)"
+                ></bm-marker>
+              </div>
+              <!-- 设备窗体信息 -->
+              <bm-info-window :position="currEquip.position" autoPan :show="equipShow">
+                <div class="equipInfoWindowTitle">{{currEquip.name}}</div>
+                <div class="equipInfoWindow">
+                  <span>设备ID：</span>12345678789879567
+                </div>
+                <div class="equipInfoWindow">
+                  <span>设备名称：</span>无
+                </div>
+                <div class="equipInfoWindow">
+                  <span>设备位置：</span>南河南，郑州，金水区
+                </div>
+                <div class="equipInfoWindow">
+                  <span>上报时间：</span>2020-12-23 12:00:00
+                </div>
+              </bm-info-window>
+            </baidu-map>
+          </el-card>
+          <div class="legend">
+            <el-card class="box-card card02">
+              <ul>
+                <li v-for="(item,key) in icons" :key="key">
+                  <span>
+                    <img :src="item" />
+                  </span>
+                  <span>{{key | equipType}}</span>
+                </li>
+              </ul>
+            </el-card>
+          </div>
+        </div>
+      </div>
+      <div class="wrapR">
+        <el-card class="box-card top">
+          <div class="tit">设备占比</div>
+          <div id="chart" ref="chartRef"></div>
+        </el-card>
+        <el-card class="box-card bot">
+          <div class="tit">农业资讯</div>
+          <ul>
+            <li v-for="(item,index) in newsList" :key="index">
+              <img :src="$imghost+item.img" alt />
+              <div class="info">
+                <p>{{item.tit}}</p>
+                <div>
+                  <span>{{item.date}}</span>
+                  <a href="#">详情>></a>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </el-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts';
+import { option03 } from './chart.js';
+export default {
+  data() {
+    return {
+      cbg: require('@/assets/images/home/home02/cbg.png'),
+      botBg: require('@/assets/images/home/home02/botBg.png'),
+      more: require('@/assets/images/home/home02/more.png'),
+      center: { lng: 0, lat: 0 },
+      zoom: 3,
+      currEquip: {
+        name: '',
+        position: {}
+      },
+      equipShow: false,
+      realTimeData: [
+        {
+          type: 1,
+          id: 45646541654,
+          status: {
+            '环境温度(℃)': 25,
+            '环境湿度(%)': 20,
+            雨控状态: '正常',
+            温控状态: '正常'
+          }
+        },
+        {
+          type: 2,
+          id: 45646541654,
+          status: {
+            '环境温度(℃)': 25,
+            '环境湿度(%)': 20,
+            电击次数: 24,
+            '定时(h)': 4
+          }
+        },
+        {
+          type: 3,
+          id: 45646541654,
+          status: {
+            '环境温度(℃)': 25,
+            '环境湿度(%)': 20,
+            电压: 20.425,
+            摄像头状态: '正常'
+          }
+        }
+      ],
+      icons: {
+        '2': require('@/assets/images/home/home02/scd.png'),
+        '3': require('@/assets/images/home/home02/cbd.png'),
+        '4': require('@/assets/images/home/home02/xyq.png'),
+        '5': require('@/assets/images/home/home02/qxz.png'),
+        '6': require('@/assets/images/home/home02/jk.png'),
+        '7': require('@/assets/images/home/home02/bzy.png')
+      },
+      equips: [
+        {
+          equipName: '杀虫灯',
+          lat: '39.815',
+          lng: '116.404',
+          type: 2
+        },
+        {
+          equipName: '测报灯',
+          lat: '39.215',
+          lng: '116.504',
+          type: 3
+        },
+        {
+          equipName: '性诱设备',
+          lat: '39.215',
+          lng: '116.504',
+          type: 4
+        },
+        {
+          equipName: '环境监测',
+          lat: '38.215',
+          lng: '116.504',
+          type: 5
+        },
+        {
+          equipName: '监控',
+          lat: '39.115',
+          lng: '113.104',
+          type: 6
+        },
+        {
+          equipName: '孢子仪',
+          lat: '39.115',
+          lng: '111.104',
+          type: 7
+        },
+        {
+          equipName: '气象',
+          lat: '38.214',
+          lng: '116.501',
+          type: 5
+        },
+        {
+          equipName: '监控',
+          lat: '39.194',
+          lng: '113.981',
+          type: 6
+        },
+        {
+          equipName: '孢子仪',
+          lat: '39.581',
+          lng: '111.28',
+          type: 7
+        }
+      ],
+      newsList: [
+        {
+          img: '/images/home/1.jpg',
+          tit: '三部门联合发布农村厕所粪污无害化处',
+          date: '2020-05-10'
+        },
+        {
+          img: '/images/home/1.jpg',
+          tit: '三部门联合发布农村厕所粪污无害化处',
+          date: '2020-05-10'
+        },
+        {
+          img: '/images/home1.jpg',
+          tit: '三部门联合发布农村厕所粪污无害化处',
+          date: '2020-05-10'
+        }
+      ]
+    };
+  },
+  mounted() {
+    this.chartsInit();
+  },
+  destroyed() {
+    window.onresize = null;
+  },
+  methods: {
+    chartsInit() {
+      let myChart = echarts.init(this.$refs.chartRef);
+      myChart.setOption(option03);
+      window.addEventListener('resize', function() {
+        myChart.resize();
+      });
+    },
+    handler({ BMap, map }) {
+      this.BMap = BMap;
+      this.map = map;
+      var view = map.getViewport(eval(this.equips));
+      this.zoom = view.zoom;
+      this.center = view.center;
+    },
+    equipMarkerClick(item) {
+      this.equipShow = true;
+      this.currEquip.name = item.equipName;
+      this.currEquip.position = { lng: item.lng, lat: item.lat };
+    }
+  }
+};
+</script>
+<style lang='less' scoped>
+.wrap {
+  height: 100%;
+  .wrap01 {
+    display: flex;
+    height: calc(100% - 70px);
+    .tit {
+      font-size: 20px;
+      font-weight: 800;
+      padding-left: 20px;
+      border-left: 5px solid #17bb89;
+      margin-left: -20px;
+      margin-bottom: 15px;
+    }
+    .wrapL {
+      flex: 3;
+      .wrapLT {
+        display: flex;
+        .left {
+          flex: 1.8;
+          /deep/.el-card__body {
+            padding: 0;
+          }
+          .info {
+            .cbg {
+              width: 80px;
+              height: 60px;
+              position: absolute;
+              background-size: 100% 100%;
+              right: 10px;
+              top: 10px;
+            }
+            position: relative;
+            width: 100%;
+            height: 265px;
+            background-color: #34d496;
+            background-image: linear-gradient(#2ed399, #a5de39);
+            border-radius: 6px;
+            padding: 20px 20px 70px 20px;
+            box-sizing: border-box;
+            color: #fff;
+            .info-top {
+              .p1 {
+                font-size: 18px;
+              }
+              .p2 {
+                font-size: 14px;
+                line-height: 28px;
+              }
+              margin-bottom: 40px;
+            }
+            .info-bottom {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              .bot-left {
+                display: flex;
+                align-items: center;
+                .tem {
+                  font-size: 18px;
+                  span {
+                    font-size: 40px;
+                    margin-right: 5px;
+                  }
+                  margin-right: 15px;
+                }
+                .wea {
+                  font-size: 14px;
+                }
+              }
+              .bot-right {
+                font-size: 14px;
+                text-align: right;
+              }
+            }
+            .botBg {
+              position: absolute;
+              background-size: 100% 100%;
+              width: 100%;
+              height: 60px;
+              left: 0;
+              bottom: 0;
+            }
+          }
+        }
+        .right {
+          flex: 3;
+          .con {
+            .item {
+              margin: 10px 0;
+              .eName {
+                margin-bottom: 10px;
+                span {
+                  font-size: 15px;
+                  margin-right: 13px;
+                  color: #666;
+                  font-weight: 600;
+                  .dot {
+                    display: inline-block;
+                    width: 10px;
+                    height: 10px;
+                    border-radius: 100%;
+                    margin-right: 10px;
+                  }
+                  .dot01 {
+                    background: #ffbf00;
+                  }
+                  .dot02 {
+                    background: #00b9fc;
+                  }
+                  .dot03 {
+                    background: #fe5400;
+                  }
+                }
+                a {
+                  float: right;
+                  width: 20px;
+                  height: 20px;
+                }
+              }
+              ul.state {
+                i {
+                  color: #8addc3;
+                  font-size: 18px;
+                  margin-right: 2px;
+                }
+                display: flex;
+                font-size: 13px;
+                color: #666;
+                margin-bottom: 10px;
+                li {
+                  text-align: left;
+                  flex: 1;
+                }
+              }
+            }
+          }
+        }
+      }
+      .mapCon {
+        /deep/.BMap_cpyCtrl {
+          display: none;
+        }
+        position: relative;
+        height: calc(100% - 287px);
+        .card01 {
+          height: 100%;
+        }
+        .card01 /deep/.el-card__body {
+          padding: 0;
+          height: 100%;
+        }
+        .bm-view {
+          height: 100%;
+          width: 100%;
+          // 设备窗体标题
+          .equipInfoWindowTitle {
+            border-bottom: 2px solid #35a478;
+            line-height: 33px;
+            margin-bottom: 5px;
+          }
+          .equipInfoWindow {
+            color: #585858;
+            font-size: 14px;
+            line-height: 22px;
+            span {
+              color: #333;
+            }
+          }
+        }
+        .legend {
+          /deep/.el-card__body {
+            padding: 5px 10px;
+          }
+          position: absolute;
+          right: 10px;
+          top: 10px;
+          font-size: 14px;
+          li {
+            padding: 5px 0;
+            display: flex;
+            align-items: center;
+          }
+          img {
+            width: 20px;
+            height: auto;
+            margin-right: 5px;
+          }
+        }
+      }
+    }
+    .wrapR {
+      flex: 1.2;
+      flex-direction: column;
+      display: flex;
+      .top {
+        flex: 1;
+        position: relative;
+        #chart {
+          position: absolute;
+          top: 40px;
+          bottom: 20px;
+          width: 100%;
+        }
+      }
+      .bot {
+        flex: 1.2;
+        .box-card {
+          height: 100%;
+        }
+        /deep/.el-card__body {
+          height: 100%;
+          box-sizing: border-box;
+        }
+        ul {
+          height: calc(100% - 41px);
+          overflow: auto;
+        }
+        li {
+          padding: 15px 0;
+          display: flex;
+          border-bottom: 1px solid #dee3e7;
+          img {
+            width: 150px;
+          }
+          .info {
+            padding-left: 20px;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            p {
+              width: 90%;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              font-size: 16px;
+            }
+            div {
+              display: flex;
+              justify-content: space-between;
+              font-size: 14px;
+              a {
+                color: #888;
+              }
+            }
+          }
+        }
+      }
+    }
+    .box-card {
+      margin: 5px;
+    }
+  }
+}
+</style>

src/components/home/chart.js

@@ -0,0 +1,431 @@
+function home1Line(data){
+  return {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        lineStyle: {
+          color: "#666"
+        }
+      },
+      formatter(params) {
+        var returnData = '';
+        var time = '';
+        for (let g in params) {
+            time = params[g].axisValue;
+            if(params[g].seriesIndex == 0){
+              returnData += params[g].seriesName + ':' + params[g].value + '%<br/>';
+            }
+            if(params[g].seriesIndex == 1){
+              returnData += params[g].seriesName + ':' + params[g].value + '°C<br/>';
+            }
+        }
+        return time + '<br/>' + returnData;
+      }
+    },
+    legend: {
+      top: "10",
+      textStyle: {
+        color: "#666",
+        fontSize: "12"
+      }
+    },
+    grid: {
+      left: "10",
+      top: "80",
+      right: "20",
+      bottom: "10",
+      containLabel: true
+    },
+    xAxis: [{
+        type: "category",
+        boundaryGap: false,
+        axisLabel: {
+          textStyle: {
+            color: "#666",
+            fontSize: 12
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#afb2c5"
+          }
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#afb2c5'
+          }
+        },
+        data: data.time
+      },
+      {
+        axisPointer: {
+          show: false
+        },
+        axisLine: {
+          show: false
+        },
+        position: "bottom",
+        offset: 0
+      }
+    ],
+    yAxis: [{
+      type: "value",
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        lineStyle: {
+          color: "#afb2c5"
+        }
+      },
+      axisLabel: {
+        textStyle: {
+          color: "#666",
+          fontSize: 12
+        }
+      },
+      splitLine: {
+        show: false
+      }
+    }],
+    series: [{
+        name: "空气湿度",
+        type: "line",
+        smooth: true,
+        symbol: "circle", //标记的 图形
+        symbolSize: 5,
+        showSymbol: true,
+        lineStyle: {
+          normal: {
+            color: "#42d3ff",
+            width: 4
+          }
+        },
+        areaStyle: {
+          normal: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [{
+                offset: 0,
+                color: '#a7caff' // 0% 处的颜色
+              }, {
+                offset: 0.8,
+                color: '#e3e8fe' // 100% 处的颜色
+              }],
+              global: false // 缺省为 false
+            },
+            shadowColor: "rgba(0, 0, 0, 0.1)"
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: "#62e2ff",
+            borderColor: "#62e2ff",
+            borderWidth: 4
+          }
+        },
+        data: data.ah
+      },
+      {
+        name: "空气温度",
+        type: "line",
+        smooth: true,
+        symbol: "circle",
+        symbolSize: 5,
+        showSymbol: true,
+        lineStyle: {
+          normal: {
+            color: "#fd0001",
+            width: 3
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: "#fd0001",
+            borderColor: "#fd0001",
+            borderWidth: 4
+          }
+        },
+        data: data.at
+      }
+    ]
+  };
+}
+function home1Pie(bzy, cbd, qxz, scd) {
+  var data = [];
+  var colorList = [];
+  if(bzy>0){
+    data.push({
+      "name": "孢子仪",
+      "value": bzy
+    })
+    colorList.push('#00d0ae');
+  }
+  if(cbd>0){
+    data.push({
+      "name": "虫情测报",
+      "value": cbd
+    })
+    colorList.push('#d70252');
+  }
+  if(qxz>0){
+    data.push({
+      "name": "环境监测",
+      "value": qxz
+    })
+    colorList.push('#ffa300');
+  }
+  if(scd>0){
+    data.push({
+      "name": "杀虫灯",
+      "value": scd
+    })
+    colorList.push('#1e75ff');
+  }
+  let total = bzy + cbd + qxz + scd
+  return {
+    "animation": true,
+    "title": {
+      "text": `${total}台`,
+      "x": "center",
+      "y": "center",
+      "textStyle": {
+        "color": "#1e74fd",
+        "fontSize": 20,
+        "fontWeight": "normal",
+        "align": "center",
+        "width": "100px"
+      },
+    },
+    grid:{
+      // x: '57%', 
+      // y: '17%', 
+      // width: '38%', 
+      // height: '38%'
+    }
+    ,
+    "legend": {
+      "width": "90%",
+      "left": "center",
+      "textStyle": {
+        "color": "#666",
+        "fontSize": 12
+      },
+      "icon": "circle",
+      "right": "0",
+      "bottom": "0",
+      "padding": [5, 10],
+      "itemGap": 10,
+      // "data": ["气象监测", "孢子仪设备", "杀虫灯设备", "测报设备"]
+      "data": ["杀虫灯设备", "测报设备"]
+  },
+  "series": [{
+      "type": "pie",
+      "center": ["50%", "50%"],
+      "radius": ["60%", "70%"],
+      "color": colorList,
+      "startAngle": 135,
+      "labelLine": {
+        "normal": {
+          "length": 25
+        }
+      },
+      "label": {
+        "normal": {
+          "formatter": "{b|{b}\n}{per|{d}%}",
+          "backgroundColor": "rgba(255, 147, 38, 0)",
+          "borderColor": "transparent",
+          "borderRadius": 4,
+          "rich": {
+            "b": {
+              // "color": "red",
+              "fontSize": 18,
+              "lineHeight": 33
+            },
+          
+            "per": {
+              // "color": "#FDF44E",
+              "fontSize": 18,
+              "padding": [5, 6],
+              "borderRadius": 2
+            }
+          },
+          "textStyle": {
+            "fontSize": 20
+          }
+        }
+      },
+      "emphasis": {
+        "label": {
+          "show": true,
+          "formatter": "{b|{b}\n}{per|{c}台} ",
+          "backgroundColor": "rgba(255, 147, 38, 0)",
+          "borderColor": "transparent",
+          "borderRadius": 4,
+          "rich": {
+            "a": {
+              "color": "#999",
+              "lineHeight": 22,
+              "align": "center"
+            },
+        
+            "b": {
+              // "color": "red",
+              "fontSize": 18,
+              "lineHeight": 33
+            },
+          
+            "per": {
+              // "color": "#FDF44E",
+              "fontSize": 18,
+              "padding": [5, 6],
+              "borderRadius": 2
+            }
+          }
+        }
+      },
+      "data": data
+    }]
+  };
+}
+const option03 = {
+  "animation": true,
+  "title": {
+    "text": '24台',
+    "x": "center",
+    "y": "center",
+    "textStyle": {
+      "color": "#1e74fd",
+      "fontSize": 20,
+      "fontWeight": "normal",
+      "align": "center",
+      "width": "100px"
+    },
+  },
+  "legend": {
+    "width": "90%",
+    "left": "center",
+    "textStyle": {
+      "color": "#666",
+      "fontSize": 12
+    },
+    "icon": "circle",
+    "right": "0",
+    "bottom": "0",
+    "padding": [5, 10],
+    "itemGap": 10,
+    "data": ["气象监测", "孢子仪设备", "杀虫灯设备", "测报设备"]
+  },
+  "series": [{
+    "type": "pie",
+    "center": ["50%", "50%"],
+    "radius": ["60%", "70%"],
+    "color": ["#00d0ae", "#d70252", "#ffa300", "#1e75ff"],
+    "startAngle": 135,
+    "labelLine": {
+      "normal": {
+        "length": 25
+      }
+    },
+    "label": {
+      "normal": {
+        "formatter": "{c}台",
+        "backgroundColor": "rgba(255, 147, 38, 0)",
+        "borderColor": "transparent",
+        "borderRadius": 4,
+        "rich": {
+          "a": {
+            "color": "#999",
+            "lineHeight": 22,
+            "align": "center"
+          },
+          "hr": {
+            "borderColor": "#aaa",
+            "width": "100%",
+            "borderWidth": 1,
+            "height": 0
+          },
+          "b": {
+            "color": "#b3e5ff",
+            "fontSize": 16,
+            "lineHeight": 33
+          },
+          "c": {
+            "fontSize": 90,
+            "color": "red"
+          },
+          "per": {
+            "color": "#FDF44E",
+            "fontSize": 14,
+            "padding": [5, 8],
+            "borderRadius": 2
+          }
+        },
+        "textStyle": {
+          "fontSize": 20
+        }
+      }
+    },
+    "emphasis": {
+      "label": {
+        "show": true,
+        "formatter": "{b|{b}:}  {per|{d}%}  ",
+        "backgroundColor": "rgba(255, 147, 38, 0)",
+        "borderColor": "transparent",
+        "borderRadius": 4,
+        "rich": {
+          "a": {
+            "color": "#999",
+            "lineHeight": 22,
+            "align": "center"
+          },
+          "hr": {
+            "borderColor": "#aaa",
+            "width": "100%",
+            "borderWidth": 1,
+            "height": 0
+          },
+          "b": {
+            "color": "#fff",
+            "fontSize": 18,
+            "lineHeight": 33
+          },
+          "c": {
+            "fontSize": 14,
+            "color": "#eee"
+          },
+          "per": {
+            "color": "#FDF44E",
+            "fontSize": 25,
+            "padding": [5, 6],
+            "borderRadius": 2
+          }
+        }
+      }
+    },
+    "data": [{
+      "name": "气象监测",
+      "value": 3
+    }, {
+      "name": "孢子仪设备",
+      "value": 7
+    }, {
+      "name": "杀虫灯设备",
+      "value": 4
+    }, {
+      "name": "测报设备",
+      "value": 10
+    }]
+  }]
+}
+// option01和option02是Home页面的echarts数据
+export {
+  home1Line,
+  home1Pie,
+  option03
+}