|
|
@@ -5,70 +5,147 @@
|
|
|
<div class="query-item">
|
|
|
<div class="lable">点名：</div>
|
|
|
<div class="search-input">
|
|
|
- <el-input style="width: 250px;" placeholder="请输入点名" size="middle" v-model="form.pointId" clearable></el-input>
|
|
|
+ <el-input
|
|
|
+ style="width: 250px"
|
|
|
+ placeholder="请输入点名"
|
|
|
+ size="middle"
|
|
|
+ v-model="form.pointId"
|
|
|
+ clearable
|
|
|
+ ></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="query-item">
|
|
|
<div class="lable">描述：</div>
|
|
|
<div class="search-input">
|
|
|
- <el-input placeholder="请输入描述" size="middle" v-model="form.pointName" clearable></el-input>
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入描述"
|
|
|
+ size="middle"
|
|
|
+ v-model="form.pointName"
|
|
|
+ clearable
|
|
|
+ ></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="query-item">
|
|
|
<div class="lable"></div>
|
|
|
<div class="search-input">
|
|
|
- <el-checkbox v-model="form.autoReq" label="刷新" border @change="reReqAjax"></el-checkbox>
|
|
|
+ <el-checkbox
|
|
|
+ v-model="form.autoReq"
|
|
|
+ label="刷新"
|
|
|
+ border
|
|
|
+ @change="reReqAjax"
|
|
|
+ ></el-checkbox>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="query-actions">
|
|
|
<button class="btn green" @click="getTableData">查询</button>
|
|
|
- <button class="btn green" @click="exportExcel('tableData')">导出</button>
|
|
|
+ <button class="btn green" @click="exportExcel('tableData')">
|
|
|
+ 导出
|
|
|
+ </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="searchPage">
|
|
|
- <div style="width:200px;height:100vh">
|
|
|
+ <div style="width: 200px; height: 100vh">
|
|
|
<CollapseList :list="menus" @click="clickMenu" />
|
|
|
</div>
|
|
|
<div class="df-table">
|
|
|
- <ComTable height="78vh" :data="tableData" :pageSize="20" @onPagging="onChangePage"></ComTable>
|
|
|
+ <ComTable
|
|
|
+ height="78vh"
|
|
|
+ :data="tableData"
|
|
|
+ :pageSize="20"
|
|
|
+ @onPagging="onChangePage"
|
|
|
+ ></ComTable>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <el-dialog title="查看详情" v-model="showDialog" width="85%" top="10vh" custom-class="modal" :close-on-click-modal="true" @closed="(res) => { pointId=''; }">
|
|
|
+ <el-dialog
|
|
|
+ title="查看详情"
|
|
|
+ v-model="showDialog"
|
|
|
+ width="85%"
|
|
|
+ top="10vh"
|
|
|
+ custom-class="modal"
|
|
|
+ :close-on-click-modal="true"
|
|
|
+ @closed="
|
|
|
+ (res) => {
|
|
|
+ pointId = '';
|
|
|
+ }
|
|
|
+ "
|
|
|
+ >
|
|
|
<div class="query mg-b-8">
|
|
|
- <div class="query-items">
|
|
|
- <div class="query-item">
|
|
|
- <div class="lable">点名：</div>
|
|
|
- <div class="search-input">
|
|
|
- <el-input readonly style="width: 300px;" size="middle" v-model="pointId" clearable></el-input>
|
|
|
+ <div class="query-items">
|
|
|
+ <div class="query-item">
|
|
|
+ <div class="lable">点名：</div>
|
|
|
+ <div class="search-input">
|
|
|
+ <el-input
|
|
|
+ readonly
|
|
|
+ style="width: 300px"
|
|
|
+ size="middle"
|
|
|
+ v-model="pointId"
|
|
|
+ clearable
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="query-item">
|
|
|
- <div class="lable">日期：</div>
|
|
|
- <div class="search-input">
|
|
|
- <el-date-picker size="medium" v-model="form.dateArea" type="datetimerange"
|
|
|
- :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
|
|
|
- @change="(res) => { getDatePickerChange(res); }">
|
|
|
- </el-date-picker>
|
|
|
+ <div class="query-item">
|
|
|
+ <div class="lable">日期：</div>
|
|
|
+ <div class="search-input">
|
|
|
+ <el-date-picker
|
|
|
+ size="medium"
|
|
|
+ v-model="form.dateArea"
|
|
|
+ type="datetimerange"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ align="right"
|
|
|
+ @change="
|
|
|
+ (res) => {
|
|
|
+ getDatePickerChange(res);
|
|
|
+ }
|
|
|
+ "
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="query-item">
|
|
|
- <div class="lable">间隔：</div>
|
|
|
- <div class="search-input">
|
|
|
- <el-input placeholder="请输入间隔" clearable v-model="form.interval" type="number"></el-input>
|
|
|
+ <div class="query-item">
|
|
|
+ <div class="lable">间隔：</div>
|
|
|
+ <div class="search-input">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入间隔"
|
|
|
+ clearable
|
|
|
+ v-model="form.interval"
|
|
|
+ type="number"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="query-actions">
|
|
|
+ <button class="btn green" @click="getDetails">查询</button>
|
|
|
+ <button
|
|
|
+ class="btn green"
|
|
|
+ @click="exportExcel('detailsTableData')"
|
|
|
+ v-if="detailsTableData.data.length"
|
|
|
+ >
|
|
|
+ 导出
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ class="btn green"
|
|
|
+ @click="renderCharts"
|
|
|
+ v-if="detailsTableData.data.length"
|
|
|
+ >
|
|
|
+ 查看折线图
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="query-actions">
|
|
|
- <button class="btn green" @click="getDetails">查询</button>
|
|
|
- <button class="btn green" @click="exportExcel('detailsTableData')" v-if="detailsTableData.data.length">导出</button>
|
|
|
- <button class="btn green" @click="renderCharts" v-if="detailsTableData.data.length">查看折线图</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <ComTable height="50vh" :data="detailsTableData"></ComTable>
|
|
|
+ <ComTable height="50vh" :data="detailsTableData"></ComTable>
|
|
|
</el-dialog>
|
|
|
- <el-dialog title="查看折线图" v-model="chartDialogShow" width="60%" top="10vh" custom-class="modal" :close-on-click-modal="true">
|
|
|
- <div id="lineChart" style="width:100%;height:500px;"></div>
|
|
|
+ <el-dialog
|
|
|
+ title="查看折线图"
|
|
|
+ v-model="chartDialogShow"
|
|
|
+ width="60%"
|
|
|
+ top="10vh"
|
|
|
+ custom-class="modal"
|
|
|
+ :close-on-click-modal="true"
|
|
|
+ >
|
|
|
+ <div id="lineChart" style="width: 100%; height: 500px"></div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -77,12 +154,13 @@
|
|
|
import CollapseList from "@com/coms/collapse/collapse-list.vue";
|
|
|
import ComTable from "@com/coms/table/table.vue";
|
|
|
import * as echarts from "echarts";
|
|
|
+import api from "@api/economic/index.js";
|
|
|
|
|
|
export default {
|
|
|
- data () {
|
|
|
- const that=this;
|
|
|
+ data() {
|
|
|
+ const that = this;
|
|
|
return {
|
|
|
- menus:[],
|
|
|
+ menus: [],
|
|
|
tableid: "",
|
|
|
pointId: "",
|
|
|
form: {
|
|
|
@@ -90,10 +168,14 @@ export default {
|
|
|
pointName: "",
|
|
|
autoReq: false,
|
|
|
dateArea: [
|
|
|
- this.fmtDate(new Date(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24))),
|
|
|
- this.fmtDate(new Date())
|
|
|
+ this.fmtDate(
|
|
|
+ new Date(
|
|
|
+ new Date().setTime(new Date().getTime() - 3600 * 1000 * 24)
|
|
|
+ )
|
|
|
+ ),
|
|
|
+ this.fmtDate(new Date()),
|
|
|
],
|
|
|
- interval: ""
|
|
|
+ interval: "",
|
|
|
},
|
|
|
showDialog: false,
|
|
|
chartDialogShow: false,
|
|
|
@@ -104,35 +186,35 @@ export default {
|
|
|
field: "index",
|
|
|
is_num: false,
|
|
|
is_light: false,
|
|
|
- sortable: true
|
|
|
+ sortable: true,
|
|
|
},
|
|
|
{
|
|
|
name: "点名",
|
|
|
field: "pointId",
|
|
|
is_num: false,
|
|
|
is_light: false,
|
|
|
- sortable: true
|
|
|
+ sortable: true,
|
|
|
},
|
|
|
{
|
|
|
name: "描述",
|
|
|
field: "pointName",
|
|
|
is_num: false,
|
|
|
is_light: false,
|
|
|
- sortable: true
|
|
|
+ sortable: true,
|
|
|
},
|
|
|
{
|
|
|
name: "值",
|
|
|
field: "value",
|
|
|
is_num: true,
|
|
|
is_light: false,
|
|
|
- sortable: true
|
|
|
+ sortable: true,
|
|
|
},
|
|
|
{
|
|
|
name: "时间戳",
|
|
|
field: "timeDate",
|
|
|
is_num: false,
|
|
|
is_light: false,
|
|
|
- sortable: true
|
|
|
+ sortable: true,
|
|
|
},
|
|
|
{
|
|
|
name: "操作",
|
|
|
@@ -140,12 +222,12 @@ export default {
|
|
|
is_num: false,
|
|
|
is_light: false,
|
|
|
template() {
|
|
|
- return "<el-button type='text' style='cursor: pointer;'>详情</el-button>";
|
|
|
- },
|
|
|
- click(e, row){
|
|
|
+ return "<el-button type='text' style='cursor: pointer;'>详情</el-button>";
|
|
|
+ },
|
|
|
+ click(e, row) {
|
|
|
that.goDetails(row);
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ },
|
|
|
],
|
|
|
data: [],
|
|
|
},
|
|
|
@@ -156,22 +238,22 @@ export default {
|
|
|
field: "index",
|
|
|
is_num: false,
|
|
|
is_light: false,
|
|
|
- sortable: true
|
|
|
+ sortable: true,
|
|
|
},
|
|
|
{
|
|
|
name: "时间戳",
|
|
|
field: "timeDate",
|
|
|
is_num: false,
|
|
|
is_light: false,
|
|
|
- sortable: true
|
|
|
+ sortable: true,
|
|
|
},
|
|
|
{
|
|
|
name: "值",
|
|
|
field: "value",
|
|
|
is_num: true,
|
|
|
is_light: false,
|
|
|
- sortable: true
|
|
|
- }
|
|
|
+ sortable: true,
|
|
|
+ },
|
|
|
],
|
|
|
data: [],
|
|
|
},
|
|
|
@@ -182,49 +264,54 @@ export default {
|
|
|
pagesizereal: 100,
|
|
|
currentPageTotal: 0,
|
|
|
pickerOptions: {
|
|
|
- shortcuts: [{
|
|
|
- text: '最近一天',
|
|
|
- onClick (picker) {
|
|
|
- const end = new Date();
|
|
|
- const start = new Date();
|
|
|
- start.setTime(start.getTime() - 3600 * 1000 * 24);
|
|
|
- picker.$emit('pick', [start, end]);
|
|
|
- }
|
|
|
- }, {
|
|
|
- text: '最近一周',
|
|
|
- onClick (picker) {
|
|
|
- const end = new Date();
|
|
|
- const start = new Date();
|
|
|
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
- picker.$emit('pick', [start, end]);
|
|
|
- }
|
|
|
- }, {
|
|
|
- text: '最近一个月',
|
|
|
- onClick (picker) {
|
|
|
- const end = new Date();
|
|
|
- const start = new Date();
|
|
|
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
- picker.$emit('pick', [start, end]);
|
|
|
- }
|
|
|
- }, {
|
|
|
- text: '最近三个月',
|
|
|
- onClick (picker) {
|
|
|
- const end = new Date();
|
|
|
- const start = new Date();
|
|
|
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
|
- picker.$emit('pick', [start, end]);
|
|
|
- }
|
|
|
- }]
|
|
|
+ shortcuts: [
|
|
|
+ {
|
|
|
+ text: "最近一天",
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24);
|
|
|
+ picker.$emit("pick", [start, end]);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "最近一周",
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
+ picker.$emit("pick", [start, end]);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "最近一个月",
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
+ picker.$emit("pick", [start, end]);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "最近三个月",
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
|
+ picker.$emit("pick", [start, end]);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
- }
|
|
|
+ };
|
|
|
},
|
|
|
|
|
|
- components:{
|
|
|
+ components: {
|
|
|
CollapseList,
|
|
|
- ComTable
|
|
|
+ ComTable,
|
|
|
},
|
|
|
|
|
|
- mounted () {
|
|
|
+ mounted() {
|
|
|
let that = this;
|
|
|
that.$nextTick(() => {
|
|
|
that.tableid = that.$route.query.tableid || "JSFW";
|
|
|
@@ -233,173 +320,135 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
|
|
|
- unmounted () {
|
|
|
+ unmounted() {
|
|
|
clearInterval(this.autoReqTimmer);
|
|
|
this.autoReqTimmer = null;
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
-
|
|
|
// 获取左侧菜单
|
|
|
- getMenuList(){
|
|
|
- let that=this;
|
|
|
- that.API.requestData({
|
|
|
- method: "GET",
|
|
|
- baseURL: "http://10.155.32.4:8031/",
|
|
|
- subUrl: "datacenter/tables",
|
|
|
- success(res){
|
|
|
- let JSFW = {
|
|
|
- text: '计算服务',
|
|
|
- children: []
|
|
|
- };
|
|
|
- let MHS_FDC = {
|
|
|
- text: "麻黄山",
|
|
|
- children: []
|
|
|
- };
|
|
|
- let NSS_FDC = {
|
|
|
- text: "牛首山",
|
|
|
- children: []
|
|
|
- };
|
|
|
- let QS_FDC = {
|
|
|
- text: "青山",
|
|
|
- children: []
|
|
|
- };
|
|
|
- let SBQ_FDC = {
|
|
|
- text: "石板泉",
|
|
|
- children: []
|
|
|
- };
|
|
|
- let XS_FDC = {
|
|
|
- text: "香山",
|
|
|
- children: []
|
|
|
- };
|
|
|
- let DWK_GDC = {
|
|
|
- text: "大武口",
|
|
|
- children: []
|
|
|
- };
|
|
|
- let PL_GDC = {
|
|
|
- text: "平罗",
|
|
|
- children: []
|
|
|
- };
|
|
|
- let XH_GDC = {
|
|
|
- text: "宣和",
|
|
|
- children: []
|
|
|
- };
|
|
|
- let MCH_GDC = {
|
|
|
- text: "马场湖",
|
|
|
- children: []
|
|
|
- };
|
|
|
- res.data.forEach(ele => {
|
|
|
- ele.text=ele.tablename;
|
|
|
- if (ele.windpowerstationid === 'MHS_FDC') {
|
|
|
- MHS_FDC.children.push(ele);
|
|
|
- } else if (ele.windpowerstationid === 'NSS_FDC') {
|
|
|
- NSS_FDC.children.push(ele);
|
|
|
- } else if (ele.windpowerstationid === 'QS_FDC') {
|
|
|
- QS_FDC.children.push(ele);
|
|
|
- } else if (ele.windpowerstationid === 'SBQ_FDC') {
|
|
|
- SBQ_FDC.children.push(ele);
|
|
|
- } else if (ele.windpowerstationid === 'XS_FDC') {
|
|
|
- XS_FDC.children.push(ele);
|
|
|
- } else if (ele.windpowerstationid === 'DWK_GDC') {
|
|
|
- DWK_GDC.children.push(ele);
|
|
|
- } else if (ele.windpowerstationid === 'PL_GDC') {
|
|
|
- PL_GDC.children.push(ele);
|
|
|
- } else if (ele.windpowerstationid === 'XH_GDC') {
|
|
|
- XH_GDC.children.push(ele);
|
|
|
- } else if (ele.windpowerstationid === 'MCH_GDC') {
|
|
|
- MCH_GDC.children.push(ele);
|
|
|
- } else {
|
|
|
- // JSFW.children.push(ele);
|
|
|
- JSFW = ele;
|
|
|
- }
|
|
|
- });
|
|
|
- that.menus.push(JSFW, MHS_FDC, NSS_FDC, QS_FDC, SBQ_FDC, XS_FDC, DWK_GDC, PL_GDC, XH_GDC, MCH_GDC);
|
|
|
- }
|
|
|
+ getMenuList() {
|
|
|
+ api.datacenterTables({}).then((res) => {
|
|
|
+ let JSFW = {
|
|
|
+ text: "计算服务",
|
|
|
+ children: [],
|
|
|
+ };
|
|
|
+ let CL_FDC = {
|
|
|
+ text: "崇礼",
|
|
|
+ children: [],
|
|
|
+ };
|
|
|
+ let KB_FDC = {
|
|
|
+ text: "康保",
|
|
|
+ children: [],
|
|
|
+ };
|
|
|
+ let DX_FDC = {
|
|
|
+ text: "代县",
|
|
|
+ children: [],
|
|
|
+ };
|
|
|
+ let SY_FDC = {
|
|
|
+ text: "寿阳",
|
|
|
+ children: [],
|
|
|
+ };
|
|
|
+ res.data.forEach((ele) => {
|
|
|
+ ele.text = ele.tablename;
|
|
|
+ if (ele.windpowerstationid === "CL_FDC") {
|
|
|
+ CL_FDC.children.push(ele);
|
|
|
+ } else if (ele.windpowerstationid === "KB_FDC") {
|
|
|
+ KB_FDC.children.push(ele);
|
|
|
+ } else if (ele.windpowerstationid === "DX_FDC") {
|
|
|
+ DX_FDC.children.push(ele);
|
|
|
+ } else if (ele.windpowerstationid === "SY_FDC") {
|
|
|
+ SY_FDC.children.push(ele);
|
|
|
+ } else {
|
|
|
+ // JSFW.children.push(ele);
|
|
|
+ JSFW = ele;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.menus.push(JSFW, CL_FDC, KB_FDC, DX_FDC, SY_FDC);
|
|
|
});
|
|
|
},
|
|
|
|
|
|
// 获取表格数据
|
|
|
- getTableData () {
|
|
|
- let that=this;
|
|
|
- that.API.requestData({
|
|
|
- baseURL:"http://10.155.32.4:8031/",
|
|
|
- subUrl:"datacenter/realtimeData",
|
|
|
- method:"GET",
|
|
|
- data:{
|
|
|
- tableid:that.tableid,
|
|
|
- pointId:that.form.pointId,
|
|
|
- pointName:that.form.pointName || "",
|
|
|
- pageNum:that.currentPage,
|
|
|
- pageSize:that.pagesizereal,
|
|
|
- },
|
|
|
- success(res){
|
|
|
- res.data.forEach((ele,index) => {
|
|
|
- ele.index = (index+1);
|
|
|
- ele.timeDate = that.fmtDate(new Date(ele.time));
|
|
|
+ getTableData() {
|
|
|
+ api
|
|
|
+ .datacenterRealtimeData({
|
|
|
+ tableid: this.tableid,
|
|
|
+ pointId: this.form.pointId,
|
|
|
+ pointName: this.form.pointName || "",
|
|
|
+ pageNum: this.currentPage,
|
|
|
+ pageSize: this.pagesizereal,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ res.data.forEach((ele, index) => {
|
|
|
+ ele.index = index + 1;
|
|
|
+ ele.timeDate = this.fmtDate(new Date(ele.time));
|
|
|
if (ele.value > 0) {
|
|
|
ele.value = parseFloat(ele.value).toFixed(4);
|
|
|
}
|
|
|
});
|
|
|
- that.tableData.data = res.data || [];
|
|
|
- that.currentPageTotal = res.count || [];
|
|
|
- }
|
|
|
- });
|
|
|
+ this.tableData.data = res.data || [];
|
|
|
+ this.currentPageTotal = res.count || [];
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
// index渲染函数
|
|
|
- indexMethod (index) {
|
|
|
+ indexMethod(index) {
|
|
|
return index + 1;
|
|
|
},
|
|
|
|
|
|
// 查看详情按钮被点击
|
|
|
- goDetails (row) {
|
|
|
+ goDetails(row) {
|
|
|
this.pointId = row.pointId;
|
|
|
this.getDetails();
|
|
|
},
|
|
|
|
|
|
// 获取详情
|
|
|
- getDetails () {
|
|
|
- let that=this;
|
|
|
+ getDetails() {
|
|
|
+ let that = this;
|
|
|
if (!that.form.dateArea || !that.form.dateArea.length) {
|
|
|
that.BASE.showMsg({
|
|
|
- msg:"请先选择要查询的日期区间后再试"
|
|
|
+ msg: "请先选择要查询的日期区间后再试",
|
|
|
});
|
|
|
} else {
|
|
|
- let begin = (this.form.dateArea.length ? new Date(this.form.dateArea[0]).formatDate("yyyy-MM-dd hh:mm:ss") : '');
|
|
|
- let end = (this.form.dateArea.length ? new Date(this.form.dateArea[1]).formatDate("yyyy-MM-dd hh:mm:ss") : '');
|
|
|
+ let begin = this.form.dateArea.length
|
|
|
+ ? new Date(this.form.dateArea[0]).formatDate("yyyy-MM-dd hh:mm:ss")
|
|
|
+ : "";
|
|
|
+ let end = this.form.dateArea.length
|
|
|
+ ? new Date(this.form.dateArea[1]).formatDate("yyyy-MM-dd hh:mm:ss")
|
|
|
+ : "";
|
|
|
|
|
|
let data = {
|
|
|
- pointId:that.pointId || "",
|
|
|
+ pointId: that.pointId || "",
|
|
|
begin,
|
|
|
end,
|
|
|
};
|
|
|
|
|
|
- if(this.form.interval) data.interval = that.form.interval;
|
|
|
-
|
|
|
- that.API.requestData({
|
|
|
- baseURL:"http://10.155.32.4:8031/",
|
|
|
- subUrl:"datacenter/historyData",
|
|
|
- method:"GET",
|
|
|
- data,
|
|
|
- success(res){
|
|
|
+ if (this.form.interval) data.interval = that.form.interval;
|
|
|
+
|
|
|
+ api
|
|
|
+ .datacenterHistoryData({
|
|
|
+ pointId: this.pointId || "",
|
|
|
+ begin: begin,
|
|
|
+ end: end,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
if (res.data.length) {
|
|
|
- res.data.forEach((ele,index) => {
|
|
|
- ele.index = (index+1);
|
|
|
- ele.timeDate = that.fmtDate(new Date(ele.time));
|
|
|
+ res.data.forEach((ele, index) => {
|
|
|
+ ele.index = index + 1;
|
|
|
+ ele.timeDate = this.fmtDate(new Date(ele.time));
|
|
|
if (ele.value > 0) {
|
|
|
ele.value = parseFloat(ele.value).toFixed(4);
|
|
|
}
|
|
|
});
|
|
|
- that.detailsTableData.data = res.data || [];
|
|
|
+ this.detailsTableData.data = res.data || [];
|
|
|
} else {
|
|
|
- that.BASE.showMsg({
|
|
|
- type:"warning",
|
|
|
- msg:"所选日期区间之内暂无数据，请重试"
|
|
|
+ this.BASE.showMsg({
|
|
|
+ type: "warning",
|
|
|
+ msg: "所选日期区间之内暂无数据，请重试",
|
|
|
});
|
|
|
}
|
|
|
- that.showDialog = true;
|
|
|
- }
|
|
|
- });
|
|
|
+ this.showDialog = true;
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
|
|
|
@@ -417,73 +466,72 @@ export default {
|
|
|
},
|
|
|
|
|
|
// 导出excel
|
|
|
- exportExcel (tableDataName) {
|
|
|
- let that = this;
|
|
|
- if (tableDataName === 'tableData') {
|
|
|
- let tableid = that.tableid;
|
|
|
- let pointId = that.form.pointId || '';
|
|
|
- let pointName = that.form.pointName || '';
|
|
|
-
|
|
|
- that.API.requestData({
|
|
|
- baseURL:"http://10.155.32.4:8031/",
|
|
|
- subUrl:"datacenter/realtimeExport",
|
|
|
- method:"GET",
|
|
|
- data:{
|
|
|
- tableid,
|
|
|
- pointId,
|
|
|
- pointName
|
|
|
- },
|
|
|
- success(res){
|
|
|
- const { export_json_to_excel } = require('@tools/excel/Export2Excel.js'); // 注意这个Export2Excel路径
|
|
|
- const tHeader = ['点名', '描述']; // 上面设置Excel的表格第一行的标题
|
|
|
- const filterVal = ['id', 'name']; // 上面的index、nickName、name是tableData里对象的属性key值
|
|
|
- const list = res.data; //把要导出的数据tableData存到list
|
|
|
- const data = that.formatJson(filterVal, list);
|
|
|
- export_json_to_excel(tHeader, data, '导出的Excel'); // 最后一个是表名字
|
|
|
- }
|
|
|
- });
|
|
|
+ exportExcel(tableDataName) {
|
|
|
+ // let that = this;
|
|
|
+ if (tableDataName === "tableData") {
|
|
|
+ let tableid = this.tableid;
|
|
|
+ let pointId = this.form.pointId || "";
|
|
|
+ let pointName = this.form.pointName || "";
|
|
|
+ api
|
|
|
+ .datacenterRealtimeExport({
|
|
|
+ tableid: tableid,
|
|
|
+ pointId: pointId,
|
|
|
+ pointName: pointName,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ const {
|
|
|
+ export_json_to_excel,
|
|
|
+ } = require("@tools/excel/Export2Excel.js"); // 注意这个Export2Excel路径
|
|
|
+ const tHeader = ["点名", "描述"]; // 上面设置Excel的表格第一行的标题
|
|
|
+ const filterVal = ["id", "name"]; // 上面的index、nickName、name是tableData里对象的属性key值
|
|
|
+ const list = res.data; //把要导出的数据tableData存到list
|
|
|
+ const data = this.formatJson(filterVal, list);
|
|
|
+ export_json_to_excel(tHeader, data, "导出的Excel"); // 最后一个是表名字
|
|
|
+ });
|
|
|
} else {
|
|
|
- const { export_json_to_excel } = require('@tools/excel/Export2Excel.js'); // 注意这个Export2Excel路径
|
|
|
- const tHeader = ['点名', '描述', '时间戳', '值']; // 上面设置Excel的表格第一行的标题
|
|
|
- const filterVal = ['pointId', 'pointName', 'timeDate', 'value']; // 上面的index、nickName、name是tableData里对象的属性key值
|
|
|
- const list = that[tableDataName].data; //把要导出的数据tableData存到list
|
|
|
- const data = that.formatJson(filterVal, list);
|
|
|
- export_json_to_excel(tHeader, data, '导出的Excel'); // 最后一个是表名字
|
|
|
+ const {
|
|
|
+ export_json_to_excel,
|
|
|
+ } = require("@tools/excel/Export2Excel.js"); // 注意这个Export2Excel路径
|
|
|
+ const tHeader = ["点名", "描述", "时间戳", "值"]; // 上面设置Excel的表格第一行的标题
|
|
|
+ const filterVal = ["pointId", "pointName", "timeDate", "value"]; // 上面的index、nickName、name是tableData里对象的属性key值
|
|
|
+ const list = this[tableDataName].data; //把要导出的数据tableData存到list
|
|
|
+ const data = this.formatJson(filterVal, list);
|
|
|
+ export_json_to_excel(tHeader, data, "导出的Excel"); // 最后一个是表名字
|
|
|
}
|
|
|
},
|
|
|
|
|
|
- formatJson (filterVal, jsonData) {
|
|
|
- return jsonData.map(v => filterVal.map(j => v[j]));
|
|
|
+ formatJson(filterVal, jsonData) {
|
|
|
+ return jsonData.map((v) => filterVal.map((j) => v[j]));
|
|
|
},
|
|
|
|
|
|
// 刷新开关
|
|
|
- reReqAjax () {
|
|
|
+ reReqAjax() {
|
|
|
clearInterval(this.autoReqTimmer);
|
|
|
this.autoReqTimmer = null;
|
|
|
if (this.form.autoReq) {
|
|
|
this.BASE.showMsg({
|
|
|
- type:"success",
|
|
|
- msg:"已开启自动刷新数据，每间隔 1 秒自动刷新一次数据"
|
|
|
+ type: "success",
|
|
|
+ msg: "已开启自动刷新数据，每间隔 1 秒自动刷新一次数据",
|
|
|
});
|
|
|
this.autoReqTimmer = setInterval(() => {
|
|
|
this.getTableData(true);
|
|
|
}, 1000);
|
|
|
} else {
|
|
|
this.BASE.showMsg({
|
|
|
- type:"warning",
|
|
|
- msg:"已关闭自动刷新数据"
|
|
|
+ type: "warning",
|
|
|
+ msg: "已关闭自动刷新数据",
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 分页器每页数量修改
|
|
|
- getPaginationSize (value) {
|
|
|
+ getPaginationSize(value) {
|
|
|
this.currentPageSize = value;
|
|
|
this.getDetails();
|
|
|
},
|
|
|
|
|
|
// 分页器页数修改
|
|
|
- getPaginationCurrent (value) {
|
|
|
+ getPaginationCurrent(value) {
|
|
|
this.currentPage = value;
|
|
|
this.getTableData();
|
|
|
},
|
|
|
@@ -493,56 +541,59 @@ export default {
|
|
|
},
|
|
|
|
|
|
// 获取选中的时间
|
|
|
- getDatePickerChange (value) {
|
|
|
+ getDatePickerChange(value) {
|
|
|
this.detailsTableData.data = [];
|
|
|
},
|
|
|
|
|
|
// 渲染折线图
|
|
|
- renderCharts () {
|
|
|
+ renderCharts() {
|
|
|
this.chartDialogShow = true;
|
|
|
this.$nextTick(() => {
|
|
|
-
|
|
|
let xAxisData = [];
|
|
|
let seriesData = [];
|
|
|
|
|
|
- this.detailsTableData.data.forEach(ele => {
|
|
|
+ this.detailsTableData.data.forEach((ele) => {
|
|
|
xAxisData.push(ele.timeDate);
|
|
|
seriesData.push(ele.value);
|
|
|
});
|
|
|
- document.getElementById("lineChart").removeAttribute("_echarts_instance_");
|
|
|
- let chartDom = document.getElementById('lineChart');
|
|
|
+ document
|
|
|
+ .getElementById("lineChart")
|
|
|
+ .removeAttribute("_echarts_instance_");
|
|
|
+ let chartDom = document.getElementById("lineChart");
|
|
|
let myChart = echarts.init(chartDom);
|
|
|
|
|
|
let option = {
|
|
|
xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: xAxisData
|
|
|
+ type: "category",
|
|
|
+ data: xAxisData,
|
|
|
},
|
|
|
yAxis: {
|
|
|
- type: 'value'
|
|
|
+ type: "value",
|
|
|
},
|
|
|
- series: [{
|
|
|
- data: seriesData,
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- name: "值"
|
|
|
- }],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: seriesData,
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ name: "值",
|
|
|
+ },
|
|
|
+ ],
|
|
|
tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
+ trigger: "axis",
|
|
|
axisPointer: {
|
|
|
- type: 'cross',
|
|
|
+ type: "cross",
|
|
|
label: {
|
|
|
- backgroundColor: '#6a7985'
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ backgroundColor: "#6a7985",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
option && myChart.setOption(option);
|
|
|
});
|
|
|
},
|
|
|
|
|
|
// 格式化日期
|
|
|
- fmtDate (date) {
|
|
|
+ fmtDate(date) {
|
|
|
let curDate = date || new Date();
|
|
|
let year = curDate.getFullYear();
|
|
|
let mouth = curDate.getUTCMonth() + 1;
|
|
|
@@ -550,16 +601,28 @@ export default {
|
|
|
let hour = curDate.getHours();
|
|
|
let minutes = curDate.getMinutes();
|
|
|
let seconds = curDate.getSeconds();
|
|
|
- return year + '-' + (mouth < 10 ? '0' + mouth : mouth) + '-' + (day < 10 ? '0' + day : day) + ' ' + (hour < 10 ? '0' + hour : hour) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);
|
|
|
+ return (
|
|
|
+ year +
|
|
|
+ "-" +
|
|
|
+ (mouth < 10 ? "0" + mouth : mouth) +
|
|
|
+ "-" +
|
|
|
+ (day < 10 ? "0" + day : day) +
|
|
|
+ " " +
|
|
|
+ (hour < 10 ? "0" + hour : hour) +
|
|
|
+ ":" +
|
|
|
+ (minutes < 10 ? "0" + minutes : minutes) +
|
|
|
+ ":" +
|
|
|
+ (seconds < 10 ? "0" + seconds : seconds)
|
|
|
+ );
|
|
|
},
|
|
|
|
|
|
// 点击左侧菜单
|
|
|
- clickMenu(item){
|
|
|
+ clickMenu(item) {
|
|
|
this.tableid = item.tableid;
|
|
|
this.getTableData();
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
@@ -597,27 +660,27 @@ export default {
|
|
|
}
|
|
|
|
|
|
.df-table {
|
|
|
- border: 0.093vh solid fade(@darkgray, 50%);
|
|
|
- position: relative;
|
|
|
- overflow: auto;
|
|
|
- width:calc(100% - 220px);
|
|
|
- height: 87vh;
|
|
|
- margin-left:20px;
|
|
|
-
|
|
|
- &:before {
|
|
|
- content: "";
|
|
|
- width: 0.37vh;
|
|
|
- height: 0.37vh;
|
|
|
- background: @write;
|
|
|
- position: absolute;
|
|
|
- left: 0.278vh;
|
|
|
- top: 0.278vh;
|
|
|
- }
|
|
|
-
|
|
|
- tbody {
|
|
|
- height: calc(100vh - 166px);
|
|
|
- }
|
|
|
+ border: 0.093vh solid fade(@darkgray, 50%);
|
|
|
+ position: relative;
|
|
|
+ overflow: auto;
|
|
|
+ width: calc(100% - 220px);
|
|
|
+ height: 87vh;
|
|
|
+ margin-left: 20px;
|
|
|
+
|
|
|
+ &:before {
|
|
|
+ content: "";
|
|
|
+ width: 0.37vh;
|
|
|
+ height: 0.37vh;
|
|
|
+ background: @write;
|
|
|
+ position: absolute;
|
|
|
+ left: 0.278vh;
|
|
|
+ top: 0.278vh;
|
|
|
}
|
|
|
+
|
|
|
+ tbody {
|
|
|
+ height: calc(100vh - 166px);
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
<style lang="less">
|
|
|
.tableBox {
|
|
|
@@ -630,7 +693,7 @@ export default {
|
|
|
display: flex;
|
|
|
justify-content: start;
|
|
|
align-items: flex-start;
|
|
|
- width:100%;
|
|
|
+ width: 100%;
|
|
|
|
|
|
.el-dialog__body {
|
|
|
padding: 10px 20px;
|
Biao