|
|
@@ -12,31 +12,43 @@
|
|
|
<p class="baselistbox_top_line"></p>
|
|
|
<div class="baselistbox_top_search">
|
|
|
<div class="search_left">
|
|
|
- <div class="timebtn" @click="deriveData">导出</div>
|
|
|
- <div class="timebtn" @click="refresh">刷新</div>
|
|
|
+ <div
|
|
|
+ :class="tabtable == 1 ? 'timebtn timebtn1' : 'timebtn timebtn2'"
|
|
|
+ @click="tabtable = 1"
|
|
|
+ >
|
|
|
+ 表格
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="tabtable == 2 ? 'timebtn timebtn1' : 'timebtn timebtn2'"
|
|
|
+ @click="tabtable = 2"
|
|
|
+ >
|
|
|
+ 图表
|
|
|
+ </div>
|
|
|
+ <div class="timebtn timebtn1" @click="deriveData">导出</div>
|
|
|
+ <div class="timebtn timebtn1" @click="refresh">刷新</div>
|
|
|
</div>
|
|
|
<div class="search_right">
|
|
|
<div
|
|
|
:class="timeindex == 1 ? 'timebtn timebtn1' : 'timebtn timebtn2'"
|
|
|
- @click="empty(1),flag = true;"
|
|
|
+ @click="empty(1), (flag = true)"
|
|
|
>
|
|
|
近一天
|
|
|
</div>
|
|
|
<div
|
|
|
:class="timeindex == 2 ? 'timebtn timebtn1' : 'timebtn timebtn2'"
|
|
|
- @click="empty(2),flag = true;"
|
|
|
+ @click="empty(2), (flag = true)"
|
|
|
>
|
|
|
近七天
|
|
|
</div>
|
|
|
<div
|
|
|
:class="timeindex == 3 ? 'timebtn timebtn1' : 'timebtn timebtn2'"
|
|
|
- @click="empty(3),flag = true;"
|
|
|
+ @click="empty(3), (flag = true)"
|
|
|
>
|
|
|
近一月
|
|
|
</div>
|
|
|
<div
|
|
|
:class="timeindex == 4 ? 'timebtn timebtn1' : 'timebtn timebtn2'"
|
|
|
- @click="empty(4),flag = true;"
|
|
|
+ @click="empty(4), (flag = true)"
|
|
|
>
|
|
|
近三月
|
|
|
</div>
|
|
|
@@ -54,31 +66,52 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="baselistbox_table">
|
|
|
- <el-table :data="hisData" stripe style="width: 100%" height="530px">
|
|
|
- <el-table-column
|
|
|
- v-for="(item, index) in tableHead"
|
|
|
- :key="index"
|
|
|
- width="160px"
|
|
|
- :label="item.label"
|
|
|
- :prop="item.property"
|
|
|
- >
|
|
|
- <template slot-scope="scope">{{
|
|
|
- scope.row[scope.column.property]
|
|
|
- }}</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="" prop=""></el-table-column>
|
|
|
- </el-table>
|
|
|
- <div class="pagination">
|
|
|
- <el-pagination
|
|
|
- background
|
|
|
- layout="prev, pager, next,sizes,jumper"
|
|
|
- :total="totalNum"
|
|
|
- :page-sizes="[10, 20, 30, 50]"
|
|
|
- :page-size="10"
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- >
|
|
|
- </el-pagination>
|
|
|
+ <div v-show="tabtable == 1">
|
|
|
+ <el-table :data="hisData" stripe style="width: 100%" height="530px">
|
|
|
+ <el-table-column
|
|
|
+ v-for="(item, index) in tableHead"
|
|
|
+ :key="index"
|
|
|
+ width="160px"
|
|
|
+ :label="item.label"
|
|
|
+ :prop="item.property"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">{{
|
|
|
+ scope.row[scope.column.property]
|
|
|
+ }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="" prop=""></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="pagination">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="prev, pager, next,sizes,jumper"
|
|
|
+ :total="totalNum"
|
|
|
+ :page-sizes="[10, 20, 30, 50]"
|
|
|
+ :page-size="page_size"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-size.sync="page"
|
|
|
+ :key="pagekey"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-show="tabtable == 2">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col
|
|
|
+ :xs="24"
|
|
|
+ :sm="24"
|
|
|
+ :md="12"
|
|
|
+ :lg="6"
|
|
|
+ :xl="6"
|
|
|
+ v-for="(item, index) in echartOptions"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <el-card class="box-card" style="margin-bottom: 15px">
|
|
|
+ <highcharts :options="item"></highcharts>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 导出对话框 -->
|
|
|
@@ -150,6 +183,7 @@ export default {
|
|
|
totalNum: 10,
|
|
|
page: 1,
|
|
|
page_size: 10,
|
|
|
+ pagekey: 1,
|
|
|
dialogVisible: false,
|
|
|
value: "",
|
|
|
value1: "",
|
|
|
@@ -169,7 +203,9 @@ export default {
|
|
|
device_id: this.$route.params.id,
|
|
|
page: 1,
|
|
|
},
|
|
|
- flag:false
|
|
|
+ flag: false,
|
|
|
+ tabtable: 1,
|
|
|
+ echartOptions: [],
|
|
|
};
|
|
|
},
|
|
|
//监听属性 类似于data概念
|
|
|
@@ -198,16 +234,21 @@ export default {
|
|
|
this.start_time = Math.floor(time.setMonth(mouth - 3) / 1000);
|
|
|
}
|
|
|
console.log(this.start_time);
|
|
|
+ this.page = 1;
|
|
|
+ this.pagekey = Math.random() * 10 + 1;
|
|
|
this.getHisDataList();
|
|
|
+ this.getEchartsHisDataList();
|
|
|
},
|
|
|
timechange(e) {
|
|
|
console.log(e);
|
|
|
- this.flag = true
|
|
|
+ this.flag = true;
|
|
|
if (e) {
|
|
|
this.start_time = Math.floor(+new Date(e[0]) / 1000);
|
|
|
this.end_time = Math.floor(+new Date(e[1]) / 1000);
|
|
|
this.page = 1;
|
|
|
+ this.pagekey = Math.random() * 10 + 1;
|
|
|
this.getHisDataList();
|
|
|
+ this.getEchartsHisDataList();
|
|
|
} else {
|
|
|
this.empty(1);
|
|
|
}
|
|
|
@@ -276,6 +317,7 @@ export default {
|
|
|
// this.$message.success("刷新成功");
|
|
|
setTimeout(() => {
|
|
|
this.getHisDataList();
|
|
|
+ this.getEchartsHisDataList();
|
|
|
// this.refreshload = false;
|
|
|
}, 2000);
|
|
|
} else {
|
|
|
@@ -380,6 +422,7 @@ export default {
|
|
|
},
|
|
|
handleSizeChange(e) {
|
|
|
this.page = 1;
|
|
|
+ this.pagekey = Math.random() * 10 + 1;
|
|
|
this.page_size = e;
|
|
|
this.getHisDataList();
|
|
|
},
|
|
|
@@ -387,11 +430,167 @@ export default {
|
|
|
this.page = e;
|
|
|
this.getHisDataList();
|
|
|
},
|
|
|
+ //获取图表历史数据
|
|
|
+ getEchartsHisDataList() {
|
|
|
+ this.$axios({
|
|
|
+ method: "POST",
|
|
|
+ url: "/api/api_gateway?method=weather.weather.qxz_data_chart",
|
|
|
+ data: this.qs.stringify({
|
|
|
+ begin: this.start_time,
|
|
|
+ end: this.end_time,
|
|
|
+ device_id: this.$route.params.id,
|
|
|
+ }),
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res.data.data);
|
|
|
+ this.echartsFn(res.data.data);
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ echartsFn(data) {
|
|
|
+ let conf = data.conf;
|
|
|
+ let eData = data.data;
|
|
|
+ let ChartData = [];
|
|
|
+ console.log(conf);
|
|
|
+ console.log(eData);
|
|
|
+ console.log(eData.length);
|
|
|
+ if (conf && eData && eData.length > 0) {
|
|
|
+ this.isEchartData = true;
|
|
|
+ for (let i in conf) {
|
|
|
+ if (conf[i]) {
|
|
|
+ //判断是否有值
|
|
|
+ ChartData.push({
|
|
|
+ name: i,
|
|
|
+ tit: conf[i].split("#")[0],
|
|
|
+ unit: conf[i].split("#")[1],
|
|
|
+ dat: [],
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ for (let m of eData) {
|
|
|
+ //m是对象
|
|
|
+ for (let n in m.dat) {
|
|
|
+ //dat是对象 n是key
|
|
|
+ for (let j of ChartData) {
|
|
|
+ //j是对象
|
|
|
+ if (j.name == n && m.dat[n].split("#")[0] != "-99.99") {
|
|
|
+ j.dat.push([
|
|
|
+ m.time * 1000 + 8 * 3600000,
|
|
|
+ Number(m.dat[n].split("#")[0]),
|
|
|
+ ]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.isEchartData = false;
|
|
|
+ }
|
|
|
+ console.log(ChartData);
|
|
|
+
|
|
|
+ // 判断是否有数据
|
|
|
+ if (ChartData.length !== 0) {
|
|
|
+ this.isEchartData = true;
|
|
|
+ this.echartOptions = ChartData.map((item) => {
|
|
|
+ return this.OptionFn(item);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.isEchartData = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ OptionFn(item) {
|
|
|
+ return {
|
|
|
+ title: {
|
|
|
+ text: item.tit,
|
|
|
+ align: "left",
|
|
|
+ },
|
|
|
+ lang: {
|
|
|
+ noData: "暂无数据",
|
|
|
+ },
|
|
|
+ noData: {
|
|
|
+ style: {
|
|
|
+ fontWeight: "bold",
|
|
|
+ fontSize: "15px",
|
|
|
+ color: "#303030",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ crosshair: true, //十字基准线
|
|
|
+ type: "datetime",
|
|
|
+ dateTimeLabelFormats: {
|
|
|
+ //根据时间间距X轴自动显示哪种格式
|
|
|
+ millisecond: "%H:%M:%S.%L",
|
|
|
+ second: "%H:%M:%S",
|
|
|
+ minute: "%H:%M",
|
|
|
+ hour: "%H:%M",
|
|
|
+ day: "%m-%d",
|
|
|
+ week: "%m-%d",
|
|
|
+ month: "%Y-%m",
|
|
|
+ year: "%Y",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ title: { text: "" },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ // layout: 'vertical',
|
|
|
+ align: "right",
|
|
|
+ verticalAlign: "top",
|
|
|
+ },
|
|
|
+ plotOptions: {
|
|
|
+ series: {
|
|
|
+ label: {
|
|
|
+ connectorAllowed: false,
|
|
|
+ },
|
|
|
+ pointStart: 2010, //该参数定义了数据点的起点
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: item.name,
|
|
|
+ data: item.dat,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ colors: ["#00e29d", "#6cbbff", "#ff3f3f"],
|
|
|
+ credits: {
|
|
|
+ //去掉默认的highcharts.com
|
|
|
+ enabled: false,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ // crosshairs: true,
|
|
|
+ shared: true, //折线共享
|
|
|
+ headerFormat: "<b>{point.x:%Y-%m-%e %H:%M:%S}</b><br>",
|
|
|
+ pointFormatter: function () {
|
|
|
+ return item.tit + ":" + this.y + item.unit;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ responsive: {
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ condition: {
|
|
|
+ maxWidth: 500,
|
|
|
+ },
|
|
|
+ chartOptions: {
|
|
|
+ legend: {
|
|
|
+ layout: "horizontal",
|
|
|
+ align: "center",
|
|
|
+ verticalAlign: "bottom",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
},
|
|
|
beforeCreate() {}, //生命周期 - 创建之前
|
|
|
//生命周期 - 创建完成(可以访问当前this实例)
|
|
|
created() {
|
|
|
+ this.end_time = Math.floor(+new Date() / 1000);
|
|
|
+ this.start_time = this.end_time - 24 * 60 * 60;
|
|
|
this.getHisDataList();
|
|
|
+ this.getEchartsHisDataList();
|
|
|
},
|
|
|
beforeMount() {}, //生命周期 - 挂载之前
|
|
|
//生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
@@ -452,9 +651,14 @@ export default {
|
|
|
font-size: 14px;
|
|
|
margin-right: 20px;
|
|
|
line-height: 26px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .timebtn1 {
|
|
|
background-color: #4f71ff;
|
|
|
color: #fff;
|
|
|
- cursor: pointer;
|
|
|
+ }
|
|
|
+ .timebtn2 {
|
|
|
+ color: #4f71ff;
|
|
|
}
|
|
|
}
|
|
|
.search_right {
|