|
|
@@ -0,0 +1,615 @@
|
|
|
+<template>
|
|
|
+ <div id="app">
|
|
|
+ <!-- 导航栏部分 -->
|
|
|
+ <div class="nav">
|
|
|
+ <div class="div-watch">
|
|
|
+ <span class="watch">环境监测设备页面</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <div class="div-tabs">
|
|
|
+ <el-tabs v-model="activeName" class="tabs">
|
|
|
+ <el-tab-pane label="图表" name="chart"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <div class="btn right">
|
|
|
+ <el-button>日期</el-button>
|
|
|
+ <el-button size="mini" :class="{ active: change == 1 }" @click="btn(1)"
|
|
|
+ >近一天</el-button
|
|
|
+ >
|
|
|
+ <el-button size="mini" :class="{ active: change == 2 }" @click="btn(2)"
|
|
|
+ >近七天</el-button
|
|
|
+ >
|
|
|
+ <el-button size="mini" :class="{ active: change == 3 }" @click="btn(3)"
|
|
|
+ >近一月</el-button
|
|
|
+ >
|
|
|
+ <el-button size="mini" :class="{ active: change == 4 }" @click="btn(4)"
|
|
|
+ >近三月</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="div-picker">
|
|
|
+ <el-date-picker
|
|
|
+ size="mini"
|
|
|
+ class="picker"
|
|
|
+ v-model="value1"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="timestamp"
|
|
|
+ @change="DateChange"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 设备信息 -->
|
|
|
+
|
|
|
+ <div class="deviceInfo">
|
|
|
+ <el-card>
|
|
|
+ <div class="info">
|
|
|
+ <span>设备编号:{{ device_id }}</span>
|
|
|
+ <div class="lines"></div>
|
|
|
+ <span class="test">测试名称:{{ device_name }}</span>
|
|
|
+ <div class="lines"></div>
|
|
|
+ <span>安装位置:{{ device_addr }}</span>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 折线图 -->
|
|
|
+ <!-- style="width: 24.5%; height: 25rem" -->
|
|
|
+ <div class="container">
|
|
|
+ <el-row :gutter="10" style="width: 100%;">
|
|
|
+ <el-col
|
|
|
+ v-for="(item, index) in list"
|
|
|
+ :key="index"
|
|
|
+ :sm="12"
|
|
|
+ :md="8"
|
|
|
+ :lg="6"
|
|
|
+ >
|
|
|
+ <el-card class="main" style="width: 100%; height: 25rem">
|
|
|
+ <!-- <div></div> -->
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getChartData } from "./api/getData";
|
|
|
+export default {
|
|
|
+ name: "App",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // activeName: "chart", //el-tags的
|
|
|
+ value1: "", //日期选择器
|
|
|
+ change: 1, //el-button的类
|
|
|
+ device_id: "", //设备id
|
|
|
+ device_name: "", //设备名字
|
|
|
+
|
|
|
+ device_addr: "", //设备地址
|
|
|
+ list: [], //折线图div里面的v-for
|
|
|
+ legends: [], //折线图下边的小图标
|
|
|
+ xData: [], //折线图x轴的数据
|
|
|
+ // arr: [], //存放转换后时间的数组\
|
|
|
+ titles: [], //图表的标题
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ let id = window.location.href; //获取url地址的设备id
|
|
|
+ id = id.split("=")[1];
|
|
|
+
|
|
|
+ let endTime = Date.parse(new Date()) / 1000;
|
|
|
+ let startTime = endTime - 86400;
|
|
|
+
|
|
|
+ this.device_id = id;
|
|
|
+ this.getData(this.device_id, startTime, endTime);
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ // 日期选择器方法
|
|
|
+ DateChange() {
|
|
|
+ this.change = "";
|
|
|
+ var sTime = this.value1[0] / 1000;
|
|
|
+ var eTime = this.value1[1] / 1000;
|
|
|
+ this.getData(this.device_id, sTime, eTime);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 近几天按钮的方法
|
|
|
+ btn(a) {
|
|
|
+ this.change = a;
|
|
|
+ let time = Date.now() / 1000;
|
|
|
+ // console.log(time); //1648178403467 1647847799
|
|
|
+ if (a == 1) {
|
|
|
+ //近一天
|
|
|
+ this.getData(
|
|
|
+ this.device_id,
|
|
|
+ Math.floor(time - 86400),
|
|
|
+ Math.floor(time)
|
|
|
+ );
|
|
|
+ }
|
|
|
+ if (a == 2) {
|
|
|
+ //近七天
|
|
|
+ this.getData(
|
|
|
+ this.device_id,
|
|
|
+ Math.floor(time - 86400 * 7),
|
|
|
+ Math.floor(time)
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ if (a == 3) {
|
|
|
+ //近一月
|
|
|
+ this.getData(
|
|
|
+ this.device_id,
|
|
|
+ Math.floor(time - 86400 * 30),
|
|
|
+ Math.floor(time)
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ if (a == 4) {
|
|
|
+ //近三月
|
|
|
+ this.getData(
|
|
|
+ this.device_id,
|
|
|
+ Math.floor(time - 86400 * 90),
|
|
|
+ Math.floor(time)
|
|
|
+ );
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 格式化时间yy-mm-dd hh:mm:ss
|
|
|
+ formatTime(value) {
|
|
|
+ if (value) {
|
|
|
+ let date = new Date(value * 1000); // 时间戳为秒：10位数
|
|
|
+ //let date = new Date(value) // 时间戳为毫秒：13位数
|
|
|
+ let year = date.getFullYear();
|
|
|
+ let month =
|
|
|
+ date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}`: date.getMonth() + 1;
|
|
|
+ let day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
|
|
|
+ let hour = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours();
|
|
|
+ let minute = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();
|
|
|
+ let second = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();
|
|
|
+ return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
|
|
|
+ } else {
|
|
|
+ return "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ myEcharts(list) {
|
|
|
+ // 基于准备好的dom，初始化echarts实例
|
|
|
+ var lists = document.getElementsByClassName("main");
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ var arr = [];
|
|
|
+ var arr2 = []; //存放时间戳
|
|
|
+ var arr3 = []; //存放格式化时间
|
|
|
+
|
|
|
+ for (var i = 0; i < lists.length; i++) {
|
|
|
+ // console.log(list[i]);
|
|
|
+ arr = [];
|
|
|
+ arr2 = [];
|
|
|
+ arr3 = [];
|
|
|
+
|
|
|
+ for (var j = 0; j < list[i].length; j++) {
|
|
|
+
|
|
|
+ arr.push(list[i][j].data[0]);
|
|
|
+ arr2.push(list[i][j].data[1]);
|
|
|
+ }
|
|
|
+
|
|
|
+ for (let a = 0; a < list[i].length; a++) {
|
|
|
+ var obj1 = {};
|
|
|
+ var time = new Date(arr2[a] * 1000);
|
|
|
+ var date = time.getDate();
|
|
|
+ var month = time.getMonth() + 1;
|
|
|
+ var hours = time.getHours();
|
|
|
+ var min = time.getMinutes();
|
|
|
+ if ((hours >= 22 && hours < 24) || (hours >= 0 && hours < 2)) {
|
|
|
+ obj1 = [month + "/" + date];
|
|
|
+ } else {
|
|
|
+ obj1 = [hours + ":" + min];
|
|
|
+ obj1 = [(hours < 10 ? `0${hours}` : hours) + ":" + (min < 10 ? `0${min}` : min),];
|
|
|
+ }
|
|
|
+ arr3.push(obj1);
|
|
|
+ }
|
|
|
+
|
|
|
+ // console.log(arr3);
|
|
|
+
|
|
|
+ var myChart = this.$echarts.init(lists[i]);
|
|
|
+ // myChart = this.$echarts.init(lists[i]);
|
|
|
+
|
|
|
+ // console.log(arr3);
|
|
|
+ // 指定图表的配置项和数据
|
|
|
+
|
|
|
+ myChart.setOption({
|
|
|
+ title: {
|
|
|
+ text: this.titles[i].split("#")[0],
|
|
|
+ padding: [20, 20, 100, 30],
|
|
|
+ textStyle: {
|
|
|
+ fontWeight: "normal",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid:{
|
|
|
+ left:"15%"
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ formatter: (params) => {
|
|
|
+ var str = `<div>
|
|
|
+ ${this.formatTime(arr2[params[0].dataIndex])} <br/>
|
|
|
+ ${this.titles[Number(params[0].seriesName.slice(1)) - 1].split("#")[0]}:${params[0].value}
|
|
|
+ ${this.titles[Number(params[0].seriesName.slice(1)) - 1].split("#")[1]}
|
|
|
+ </div>`;
|
|
|
+ return str;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ color: "#00DE94",
|
|
|
+ legend: {
|
|
|
+ orient: "vertical",
|
|
|
+ x: "center",
|
|
|
+ y: "bottom",
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ data: arr3,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#00DE94",
|
|
|
+ },
|
|
|
+ symbol: "none",
|
|
|
+ name: this.legends[i],
|
|
|
+ type: "line",
|
|
|
+ data: arr,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // 暂无数据的设置
|
|
|
+ graphic: {
|
|
|
+ type: "text", // 类型：文本
|
|
|
+ left: "center",
|
|
|
+ top: "middle",
|
|
|
+ silent: true, // 不响应事件
|
|
|
+ invisible: arr.length > 0, // 有数据就隐藏
|
|
|
+ style: {
|
|
|
+ fill: "#9d9d9d",
|
|
|
+ fontWeight: "bold",
|
|
|
+ text: "暂无数据",
|
|
|
+ fontFamily: "Microsoft YaHei",
|
|
|
+ fontSize: "25px",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // console.log(arr);
|
|
|
+ // console.log(arr2);
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+
|
|
|
+ getData(device_id, start_time, end_time) {
|
|
|
+ getChartData(device_id, start_time, end_time).then((response) => {
|
|
|
+ // console.log(response);
|
|
|
+ if (response.status === 200) {
|
|
|
+ // 设备信息
|
|
|
+ this.device_id = response.data.data_info.device_id;
|
|
|
+ this.device_name = response.data.data_info.device_name;
|
|
|
+ this.device_addr = response.data.data_info.device_addr;
|
|
|
+
|
|
|
+ // 将对象转换为数组
|
|
|
+ var keys = Object.keys(response.data.conf); //图表的legends
|
|
|
+ // console.log(keys);
|
|
|
+ this.legends = keys;
|
|
|
+
|
|
|
+ // console.log(response.data.conf);
|
|
|
+ var title = Object.values(response.data.conf); //图表的标题
|
|
|
+
|
|
|
+ title = title.filter((str) => {
|
|
|
+ return !!str;
|
|
|
+ });
|
|
|
+ // console.log(title);
|
|
|
+ this.titles = title;
|
|
|
+ // console.log(this.titles);
|
|
|
+
|
|
|
+ var num = 0;
|
|
|
+ for (var key in response.data.conf) {
|
|
|
+ //遍历对象
|
|
|
+ if (response.data.conf[key]) {
|
|
|
+ num++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.list = num;
|
|
|
+
|
|
|
+ // console.log(num)
|
|
|
+ // console.log(response.data.data);
|
|
|
+ var list = [];
|
|
|
+ var obj = {};
|
|
|
+ for (var i = 0; i < num; i++) {
|
|
|
+ var arr = [];
|
|
|
+ for (var k = 0; k < response.data.data.length; k++) {
|
|
|
+ obj = {};
|
|
|
+ // console.log(response.data.data[k],i)
|
|
|
+ var str = response.data.data[k].dat["e" + (i + 1)].split("#")[0];
|
|
|
+ if (str == -99.99) {
|
|
|
+ // console.log(str);
|
|
|
+ } else {
|
|
|
+ obj["data"] = [Number(str), response.data.data[k].time];
|
|
|
+ arr.push(obj);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ list.push(arr);
|
|
|
+
|
|
|
+ // list.reverse()
|
|
|
+ }
|
|
|
+ // console.log(list);
|
|
|
+ // console.log(list[0]);
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
+ // console.log(list[i]);
|
|
|
+ list[i].reverse();
|
|
|
+ }
|
|
|
+
|
|
|
+ this.myEcharts(list);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+/* pc页面样式 */
|
|
|
+@media screen and (min-width: 992px) {
|
|
|
+ body {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #f6f6f6;
|
|
|
+ }
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 下划线 */
|
|
|
+ .lines {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ #app {
|
|
|
+ width: 95vw;
|
|
|
+ height: 100vh;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav {
|
|
|
+ width: 95vw;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .div-watch {
|
|
|
+ width: 20vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .watch {
|
|
|
+ margin-left: 5px;
|
|
|
+ line-height: 50px;
|
|
|
+
|
|
|
+ letter-spacing: 0.1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* .div-tabs {
|
|
|
+ width: 7vw;
|
|
|
+ } */
|
|
|
+
|
|
|
+ /* .tabs {
|
|
|
+ margin-left: 50px;
|
|
|
+ margin-top: 5px;
|
|
|
+ } */
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 40vw;
|
|
|
+
|
|
|
+ text-align: right;
|
|
|
+ line-height: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ margin-left: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .div-picker {
|
|
|
+ width: 19vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .picker {
|
|
|
+ padding: 0 !important;
|
|
|
+
|
|
|
+ margin: 12px 10px;
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ background-color: #15a478 !important;
|
|
|
+ color: white !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 切换活动项的文字颜色 */
|
|
|
+ .el-tabs__item.is-active {
|
|
|
+ color: #000000 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 切换活动项的长条颜色 */
|
|
|
+ .el-tabs__active-bar {
|
|
|
+ background-color: #15a478;
|
|
|
+ }
|
|
|
+
|
|
|
+ /*去掉tabs底部的下划线*/
|
|
|
+ .el-tabs__nav-wrap::after {
|
|
|
+ position: static !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .deviceInfo {
|
|
|
+ width: 95vw;
|
|
|
+ margin: 10px auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-card {
|
|
|
+ color: grey !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-card__body {
|
|
|
+ padding: 10px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .test {
|
|
|
+ margin: 0 70px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ width: 95vw;
|
|
|
+ margin-top: -9px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ margin-top: 8px;
|
|
|
+ /* border: 1px solid red; */
|
|
|
+ border-radius: 10px;
|
|
|
+ /* margin-right: 11px; */
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn .el-button:nth-of-type(1) {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 时间选择器的小图标 */
|
|
|
+ .el-icon-date:before {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 时间选择器的 "至" */
|
|
|
+ .el-range-editor--mini .el-range-separator {
|
|
|
+ line-height: 26px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 手机页面样式 */
|
|
|
+@media screen and (min-width: 320px) and (max-width: 992px) {
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #f6f6f6;
|
|
|
+ }
|
|
|
+
|
|
|
+ #app {
|
|
|
+ width: 100vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .div-watch {
|
|
|
+ color: white;
|
|
|
+ width: 100vw;
|
|
|
+ height: 3rem;
|
|
|
+ background-color: #3eb983;
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 3rem;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ /* border: 1px solid red; */
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ margin-left: 1rem;
|
|
|
+ background-color: #ffffff;
|
|
|
+ margin: 5px;
|
|
|
+ margin-left: -1px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn .el-button {
|
|
|
+ /* margin: 10px; */
|
|
|
+ margin: 10px 0;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ .btn .el-button:nth-of-type(1) {
|
|
|
+ border: 0px;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ color: #6a6a6a;
|
|
|
+ background-color: #ffffff;
|
|
|
+ margin-left: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .div-picker {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .deviceInfo {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-card__body {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100%;
|
|
|
+ color: gray;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info span {
|
|
|
+ padding: 0.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info span:nth-of-type(1) {
|
|
|
+ margin-top: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info span:nth-of-type(3) {
|
|
|
+ margin-bottom: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main {
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-card {
|
|
|
+ border-radius: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ background-color: #15a478 !important;
|
|
|
+ color: white !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .lines {
|
|
|
+ border-bottom: 1px solid gainsboro;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
