Skip to content

W
web-project
Commit 0cd56232 authored by qjeslks's avatar qjeslks
Browse files
Options

7.25.1

parent 5564b5f8
Show whitespace changes
Inline Side-by-side
Showing with 411 additions and 602 deletions
public/config.js
View file @ 0cd56232
export const ExternalSERVEICE='http://218.69.97.198:8001' // export const ExternalSERVEICE='http://218.69.97.198:8001'
export const WithinSERVEICE='http://192.168.1.252:8001' // export const WithinSERVEICE='http://192.168.1.252:8001'
//export const ExternalSERVEICE='http://localhost:5013' export const ExternalSERVEICE='http://localhost:5013'
//export const WithinSERVEICE='http://localhost:5013' export const WithinSERVEICE='http://localhost:5013'
export const CURRLOGO="LOGO_gangyi.png" export const CURRLOGO="LOGO_gangyi.png"
src/views/AlarmPage/AlarmInfoPage.vue
View file @ 0cd56232
...@@ -2,62 +2,48 @@ ...@@ -2,62 +2,48 @@
<!-- 条件筛选卡片 --> <!-- 条件筛选卡片 -->
<el-card class="card-contianer"> <el-card class="card-contianer">
<div class="div-header"> <div class="div-header">
<!-- 控制表格和图表的开关 --> <el-form-item label="查询类型：">
<el-form-item> <el-select v-model="type" placeholder="请选择" style="width: 150px" @change="getoptions" >
<el-switch v-model="value" active-text="表格" inactive-text="曲线图" <el-option label="换热机组" value="GetTransAlarmData" />
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;min-width: 130px;" @change="getchart" /> <el-option label="锅炉" value="GetBoilerAlarmData" />
</el-form-item> <el-option label="总管" value="GetPipeAlarmData" />
<el-form-item label="供热站：">
<el-select v-model="HisPipeInfo.id" multiple="true" collapse-tags placeholder="请选择" style="min-width: 170px"
@change="checkAge">
<el-option v-for="item in options" :label="item.label" :value="item.value"
:disabled="item.disabled" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="换热机组：">
<el-cascader :options="options" v-model="AlarmInfo.Id" :props="props" collapse-tags clearable :show-all-levels="false"
placeholder="请选择" style="min-width: 210px;" />
</el-form-item>
<el-form-item label="开始时间："> <el-form-item label="开始时间：">
<el-config-provider :locale="zhCn"> <el-config-provider :locale="zhCn">
<el-date-picker v-model="HisPipeInfo.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" <el-date-picker v-model="AlarmInfo.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择开始时间" style="min-width: 180px;" /> <!-- 日期时间格式 2024-1-1 00:00:00--> placeholder="选择开始时间" style="min-width: 180px;" /> <!-- 日期时间格式 2024-01-01 00:00:00-->
</el-config-provider> </el-config-provider>
</el-form-item> </el-form-item>
<el-form-item label="结束时间："> <el-form-item label="结束时间：">
<el-config-provider :locale="zhCn"> <el-config-provider :locale="zhCn">
<el-date-picker v-model="HisPipeInfo.endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" <el-date-picker v-model="AlarmInfo.endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择结束时间" style="min-width: 180px;" /> placeholder="选择结束时间" style="min-width: 180px;" />
</el-config-provider> </el-config-provider>
</el-form-item> </el-form-item>
<el-form-item label="时间间隔">
<el-select v-model="HisPipeInfo.interval" placeholder="1小时/次" style="min-width: 105px" clearable>
<el-option label="全部" :value=0 />
<el-option label="1分钟/次" :value=1 />
<el-option label="1小时/次" :value=2 />
<el-option label="1天/次" :value=3 />
<el-option label="1周/次" :value=4 />
</el-select>
</el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="getdata" style="min-width: 70px;">查询</el-button> <el-button type="primary" @click="getdata" style="min-width: 70px;">查询</el-button>
</el-form-item> </el-form-item>
<el-form-item>
<el-button type="primary" style="min-width: 70px;" @click="autoColBoxShow = !autoColBoxShow">自定义列</el-button>
</el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="exportExcel" style="min-width: 70px;">导出表格</el-button> <el-button type="primary" @click="exportExcel" style="min-width: 70px;">导出表格</el-button>
</el-form-item> </el-form-item>
</div> </div>
</el-card> </el-card>
<el-card class="moduleCard" :height="tableHeight">
<el-card v-show="value" class="moduleCard" :height="tableHeight">
<el-table :data="tableData" :height="tableHeight" v-loading="loading" :cell-style="setCellStyle" id="out-table" <el-table :data="tableData" :height="tableHeight" v-loading="loading" :cell-style="setCellStyle" id="out-table"
border highlight-current-row :header-cell-style="setHeaderCellStyle" @sort-change="sortMethod" :header-cell-class-name="handleHeadAddClass"> border highlight-current-row :header-cell-style="setHeaderCellStyle" @sort-change="sortMethod" :header-cell-class-name="handleHeadAddClass" >
<el-table-column v-for="(item, i) in frozenList" :prop="item.field" :label="item.alias" :width="item.width" :sortable="(item.field === 'name' || item.field === 'gatherTime') ? true : false" <el-table-column prop="name" label="设施名称" :sortable="true" width="200px" fixed />
fixed /> <el-table-column prop="cnName" label="报警类型" :sortable="false" width="200px" fixed />
<template v-for="(item, i) in otherList"> <el-table-column prop="alarmDate" label="报警时间" :sortable="true" width="200px" fixed />
<el-table-column v-if="item.isVisible" :prop="item.enName" :label="item.alias" :width="item.width"></el-table-column> <el-table-column prop="alarmMessage" label="报警信息" :sortable="false" width="700px" fixed />
</template> <el-table-column prop="alarmPlan" label="报警预案" :sortable="false" fixed />
</el-table> </el-table>
</el-card> </el-card>
<el-footer style="height: 8px;" v-show="value"> <el-footer style="height: 8px;">
<el-config-provider :locale="zhCn"> <el-config-provider :locale="zhCn">
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
:page-sizes="[30, 40, 50, 100, 200, 300]" :small="true" :disabled="disabled" :background="background" :page-sizes="[30, 40, 50, 100, 200, 300]" :small="true" :disabled="disabled" :background="background"
...@@ -65,69 +51,46 @@ ...@@ -65,69 +51,46 @@
class="pagination" /> class="pagination" />
</el-config-provider> </el-config-provider>
</el-footer> </el-footer>
<el-card v-show="(value === false)"> </template>
<div id="chart" style="width: 99%; height: 690px" ></div>
</el-card> <script lang="ts" setup>
<CfgSupply v-model="autoColBoxShow" @onChangeDialog="onChangeDialog" :titleData="value? titleData:curveTitleData" :height="500" :width="950" :deviceType="HisPipeInfo.deviceType" :title="title" :cfgType="value?0:1"/> import { ref, reactive, onMounted, onUnmounted } from 'vue';
</template> import http from '../../api/http';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
<script lang="ts" setup> import store from "../../store/index";
import { ref, reactive, onMounted, onUnmounted } from 'vue'; import { getFileName } from '../../utils/utils';
import * as echarts from 'echarts';//引入echarts核心模块 import CfgSupply from '../../components/CfgSupply.vue';
import http from '../../api/http'; import { column } from 'element-plus/es/components/table-v2/src/common.mjs';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
// // 引入导出Excel表格依赖 //分页设置
// import * as XLSX from "xlsx"; const currentPage = ref(1)
import store from "../../store/index"; var pageSize = ref(30)
import { getFileName } from '../../utils/utils'; const disabled = ref(false)
import CfgSupply from '../../components/CfgSupply.vue'; const background = ref(false)
const total = ref()
//分页设置 const options = reactive([]);
const currentPage = ref(1) const tableData = ref([]);
var pageSize = ref(30) const tableHeight = ref(500);
const disabled = ref(false) const enterpriseId = ref();
const background = ref(false) const loading = ref(true);
const total = ref() const sortField = reactive({});
const options = reactive([]); const type = ref('GetTransAlarmData');
var frozenList = reactive([]);
var otherList = reactive([]); getEnterprise();
const tableData = ref([]); function getEnterprise(){
const timeList = reactive([]);
const option = ref([]);
const value = ref(true);//控制表格和图表的开关
const loading = ref(true);
const tableHeight = ref(500);
const enterpriseId = ref();
const sortField = reactive({});
const titleData = ref([]);//自定义标题
const autoColBoxShow = ref(false);//显示自定义列
const curveTitleData = ref([]);//曲线图自定义标题
const title = ref('总管历史数据自定义列');
const onChangeDialog = (val) => {
// console.log('onclick',val);
autoColBoxShow.value = false;
if(value){
getPipe();
}else{
getchart();
}
}
getEnterprise();
function getEnterprise(){
var result = store.getters.getEnterprise(); var result = store.getters.getEnterprise();
if (result) { if (result) {
enterpriseId.value = result[0].enterpriseId; enterpriseId.value = result[0].enterpriseId;
} }
} }
const props = { multiple: true, emitPath: false }
function setContentHeight() { function setContentHeight() {
tableHeight.value = window.innerHeight - 240; tableHeight.value = window.innerHeight - 232;
} }
//获取排序的方法 //获取排序的方法
function sortMethod({ order, prop }){ function sortMethod({ order, prop }){
// 触发的排序和缓存的排序相同时，取消该字段的排序 // 触发的排序和缓存的排序相同时，取消该字段的排序
if (!order || sortField[prop] === order) { if (!order || sortField[prop] === order) {
sortField[prop] = null sortField[prop] = null
...@@ -145,9 +108,9 @@ ...@@ -145,9 +108,9 @@
direction = 'DESC' direction = 'DESC'
} }
if(i === "name"){ if(i === "name"){
sortname = "PipeName"; sortname = "name";
}else if(i === "gatherTime"){ }else if(i === "alartDate"){
sortname = "GatherTime"; sortname = "alartDate";
} }
// console.log(sortname) // console.log(sortname)
if(sortnames===""){ if(sortnames===""){
...@@ -155,443 +118,293 @@ ...@@ -155,443 +118,293 @@
}else{ }else{
sortnames = sortnames + "," + sortname + " " + direction; sortnames = sortnames + "," + sortname + " " + direction;
} }
HisPipeInfo.sort = sortnames; AlarmInfo.sort = sortnames;
} }
console.log(AlarmInfo.sort)
getdata() //调用后端查询接口 getdata() //调用后端查询接口
} }
function handleHeadAddClass({ column }) { function handleHeadAddClass({ column }) {
if (sortField[column.property]) { if (sortField[column.property]) {
column.order = sortField[column.property] column.order = sortField[column.property]
} }
} }
var date = new Date(); var date = new Date();
var year = date.getFullYear(); var year = date.getFullYear();
var day = 0; var day = 0;
var dateArr = [ var dateArr = [
date.getMonth() + 1, //月份从0~11，所以加一 date.getMonth() + 1, //月份从0~11，所以加一
date.getDate(), date.getDate(),
date.getHours(), date.getHours(),
date.getMinutes(), date.getMinutes(),
date.getSeconds(), date.getSeconds(),
]; ];
for (var i = 0; i < dateArr.length; i++) { for (var i = 0; i < dateArr.length; i++) {
if (dateArr[i] >= 1 && dateArr[i] <= 9) { if (dateArr[i] >= 1 && dateArr[i] <= 9) {
dateArr[i] = "0" + dateArr[i]; dateArr[i] = "0" + dateArr[i];
} }
} }
day = dateArr[1] - 1;
if (day >= 1 && day <= 9) {
day = "0" + day;
}
// var endTime = year + "-" + dateArr[0] + "-" + dateArr[1] + " " + dateArr[2] + ":" + dateArr[3] + ":" + dateArr[4]; day = dateArr[1] - 1;
// var startTime = year + "-" + dateArr[0] + "-" + day + " " + dateArr[2] + ":" + dateArr[3] + ":" + dateArr[4]; if (day >= 1 && day <= 9) {
var startTime = sessionStorage.getItem("DeviceQueryStart"); day = "0" + day;
if(!startTime){ }
startTime = year + "-" + dateArr[0] + "-" + day + " " + dateArr[2] + ":" + dateArr[3] + ":" + dateArr[4]; var startTime = sessionStorage.getItem("DeviceQueryStart");
if(!startTime){
startTime = year + "-" + dateArr[0] + '-' + day + " " + dateArr[2] + ":" + dateArr[3] + ":" + dateArr[4];
sessionStorage.setItem("DeviceQueryStart", startTime); sessionStorage.setItem("DeviceQueryStart", startTime);
} }
var endTime = sessionStorage.getItem("DeviceQueryEnd"); var endTime = sessionStorage.getItem("DeviceQueryEnd");
if(!endTime){ if(!endTime){
endTime = year + "-" + dateArr[0] + "-" + dateArr[1] + " " + dateArr[2] + ":" + dateArr[3] + ":" + dateArr[4]; endTime = year + "-" + dateArr[0] + "-" + dateArr[1] + " " + dateArr[2] + ":" + dateArr[3] + ":" + dateArr[4];
sessionStorage.setItem("DeviceQueryEnd", endTime); sessionStorage.setItem("DeviceQueryEnd", endTime);
} }
const HisPipeInfo = reactive({ const AlarmInfo = reactive({
"enterpriseId": enterpriseId.value, "Id": [],
"supplyId": [],
"deviceType": 8,
"id": [],
"startTime": startTime, "startTime": startTime,
"endTime": endTime, "endTime": endTime,
"interval": 2, "start": 0,
"sort": "", "count": 30,
"pageIndex": 0, "sort": ""
"pageCount": 30 })
})
getSupplys();
getdata();
function getdata() {
sessionStorage.setItem("DeviceQueryStart", AlarmInfo.startTime);
sessionStorage.setItem("DeviceQueryEnd", AlarmInfo.endTime);
gettransfer();
}
//获取选择列表
function getoptions(){
if(type.value === "GetPipeAlarmData"){
getPipes();
}else if(type.value === "GetBoilerAlarmData"){
getBoilers();
}else{
getSupplys();
}
gettransfer();
}
//获取下拉列表 //获取锅炉列表
function getoptions(){ function getBoilers(){
loading.value = true;
tableData.value.length = 0;
AlarmInfo.Id.length = 0;
options.length = 0;
var result = store.getters.getEnterprise(); var result = store.getters.getEnterprise();
if (result) { if (result) {
console.log(result)
result.forEach(element=>{ result.forEach(element=>{
if(element.enterpriseId === enterpriseId.value){ if(element.enterpriseId === enterpriseId.value){
if(element.enterpriseId === "9BCA54BC-8F27-4849-8D7D-50C5099E1949".toLowerCase()){ if(element.enterpriseId === "9BCA54BC-8F27-4849-8D7D-50C5099E1949".toLowerCase()){
element.serviceCenterList.forEach(center=>{ element.serviceCenterList.forEach(center=>{
center.supplyList.forEach(supply => { center.supplyList.forEach(supply => {
options.push({ value: supply.pipeInfo.pipeId, label: supply.pipeInfo.pipeName,pipeType: (supply.pipeInfo.pipeType === 1 ? 8 : 1),disabled: true }); supply.boilerList.forEach(boiler => {
options.push({ value: boiler.boilerId, label: boiler.description });
})
}); });
}) })
}else{ }else{
element.supplyList.forEach(supply => { element.supplyList.forEach(supply => {
options.push({ value: supply.pipeInfo.pipeId, label: supply.pipeInfo.pipeName,pipeType: (supply.pipeInfo.pipeType === 1 ? 8 : 1),disabled: true }); supply.boilerList.forEach(boiler => {
options.push({ value: boiler.boilerId, label: boiler.description });
})
}) })
} }
} }
}); });
}
options.forEach(element =>{ options.forEach(element =>{
if(element.pipeType === 8){ AlarmInfo.Id.push(element.value);
HisPipeInfo.id.push(element.value);
}
}) })
} }
}
function checkAge() { //获取总管列表
options.forEach(element => { function getPipes(){
if(element.value === HisPipeInfo.id[0]){ loading.value = true;
HisPipeInfo.deviceType = element.pipeType; tableData.value.length = 0;
} AlarmInfo.Id.length = 0;
var result = store.getters.getEnterprise();
if (result) {
options.length = 0;
result.forEach(element=>{
if(element.enterpriseId === enterpriseId.value){
if(element.enterpriseId === "9BCA54BC-8F27-4849-8D7D-50C5099E1949".toLowerCase()){
element.serviceCenterList.forEach(center=>{
center.supplyList.forEach(supply => {
options.push({ value: supply.pipeInfo.pipeId, label: supply.pipeInfo.pipeName});
}); });
if (HisPipeInfo.id.length === 0) {
options.forEach(element => {
element.disabled = false;
}) })
} else {
options.forEach(element => {
if(element.value === HisPipeInfo.id[0]){
options.forEach(opt =>{
if(opt.pipeType !== element.pipeType){
opt.disabled = true;
}else{ }else{
opt.disabled = false; element.supplyList.forEach(supply => {
} options.push({ value: supply.pipeInfo.pipeId, label: supply.pipeInfo.pipeName});
}) })
} }
})
} }
}; });
getdata();
getoptions();
checkAge();
getcolumn();
function getdata() {
loading.value = true;
sessionStorage.setItem("DeviceQueryStart", HisPipeInfo.startTime);
sessionStorage.setItem("DeviceQueryEnd", HisPipeInfo.endTime);
getcolumn();
getPipe();
getchart();
} }
console.log(options);
options.forEach(element =>{
AlarmInfo.Id.push(element.value);
})
console.log(AlarmInfo.Id);
}
function getcolumn() { //获取换热机组列表
http.post("/api/pipe/Title", { enterpriseId: enterpriseId.value, deviceType: HisPipeInfo.deviceType }).then((result) => { function getSupplys(){
if(result.success){ loading.value = true;
titleData.value = result.data.otherList; tableData.value.length = 0;
frozenList.length = 0; options.length = 0;
result.data.frozenList.forEach((element) => { AlarmInfo.Id.length = 0;
//生成固定表头 var result = store.getters.getEnterprise();
frozenList.push({ if (result) {
field: element.field[0].toLowerCase() + element.field.substring(1), result.forEach(element=>{
alias: element.title, if(element.enterpriseId=== enterpriseId.value){
sortable: element.sortable, if(element.enterpriseId === "9BCA54BC-8F27-4849-8D7D-50C5099E1949".toLowerCase()){
width: element.width, element.serviceCenterList.forEach(center=>{
filter: element.filter, let c = [];
color: element.color, center.supplyList.forEach(supply => {
isVisible: true let chi = [];
supply.transferList.forEach(unit => {
chi.push({ value: unit.unitId, label: unit.unitName });
}); });
c.push({ children: chi, label: supply.supplyName});
}); });
options.push({children: c, label: center.serviceCenterName});
let i = 0;
otherList.length = 0;
result.data.otherList.forEach((element) => {
//生成非固定表头
otherList.push({
alias: element.alias,
backColor: element.backColor,
baseId: element.baseId,
decimalPoint: element.decimalPoint,
enName: element.enName[0].toLowerCase() + element.enName.substring(1),
orderNum: element.orderNum,
width: element.width,
isVisible: element.isVisible
}) })
i++; }else{
element.supplyList.forEach(element => {
let chi = [];
element.transferList.forEach(unit => {
chi.push({ value: unit.unitId, label: unit.unitName });
}) })
} options.push({ children: chi, label: element.supplyName});
}) })
} }
}
//获取数据列表 });
function getPipe() { }
console.log(HisPipeInfo.startTime); AlarmInfo.Id.push(options[0].children[0].children[0].value);
}
//获取数据列表
function gettransfer() {
loading.value = true;
if (currentPage.value == 1) { if (currentPage.value == 1) {
HisPipeInfo.pageIndex = 0; AlarmInfo.start = 0;
HisPipeInfo.pageCount = pageSize.value; AlarmInfo.count = pageSize.value;
} else { } else {
HisPipeInfo.pageIndex = ((currentPage.value - 1) * pageSize.value) + 1; AlarmInfo.start = ((currentPage.value - 1) * pageSize.value) + 1;
HisPipeInfo.pageCount = pageSize.value - 1; AlarmInfo.count = pageSize.value - 1;
}
if (HisPipeInfo.interval === undefined) {
HisPipeInfo.interval = 2;
} }
http.post("/api/pipe/History", HisPipeInfo).then((result) => { http.post("/api/alarm/" + type.value, AlarmInfo).then((result) => {
console.log(result.data);
if(result.data !== null){
tableData.value = result.data.dataInfoList; tableData.value = result.data.dataInfoList;
total.value = result.data.rowCount; total.value = result.data.rowCount;
if(result.data === null || HisPipeInfo.id.length < 1){ }
if(result.data === null || AlarmInfo.Id.length < 1){
tableData.value = null; tableData.value = null;
total.value = 0; total.value = 0;
} }
loading.value = false; loading.value = false;
}); });
} }
function setCellStyle({ row, column, rowIndex, columnIndex }) { function setCellStyle({ row, column, rowIndex, columnIndex }) {
let css_color = {}; let css_color = {};
css_color['padding-left'] = '0px'; css_color['padding-left'] = '0px';
css_color['padding-right'] = '0px'; css_color['padding-right'] = '0px';
css_color['borderColor'] = '#97d5fd'; css_color['borderColor'] = '#97d5fd';
css_color['padding'] = '0px'; css_color['padding'] = '0px';
frozenList.forEach(element => {
if (element.field === column.property) {
css_color['background-color'] = '#' + element.color;
}
})
otherList.forEach(element => {
if (element.enName === column.property) {
css_color['background-color'] = '#' + element.backColor;
}
})
return css_color; return css_color;
} }
function setHeaderCellStyle({ row, column, rowIndex, columnIndex }) { function setHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
let css_color; let css_color;
frozenList.forEach(element => { var backcolor = 'd9f1ff';
if (element.field === column.property) {
var backcolor = (element.color == 'FFFFFF') ? 'd9f1ff' : element.color;
css_color = { 'background-color': '#' + backcolor, 'padding-left': '0px', 'padding-right': '0px', 'borderColor': '#97d5fd', 'color': '#000', 'text-align': 'center', 'vertical-align': 'top' }; css_color = { 'background-color': '#' + backcolor, 'padding-left': '0px', 'padding-right': '0px', 'borderColor': '#97d5fd', 'color': '#000', 'text-align': 'center', 'vertical-align': 'top' };
}
}) var backcolor = 'd9f1ff';
otherList.forEach(element => {
if (element.enName === column.property) {
var backcolor = (element.backColor == 'FFFFFF') ? 'd9f1ff' : element.backColor;
css_color = { 'background-color': '#' + backcolor, 'padding-left': '0px', 'padding-right': '0px', 'borderColor': '#97d5fd', 'color': '#000', 'text-align': 'center', 'vertical-align': 'top' }; css_color = { 'background-color': '#' + backcolor, 'padding-left': '0px', 'padding-right': '0px', 'borderColor': '#97d5fd', 'color': '#000', 'text-align': 'center', 'vertical-align': 'top' };
}
})
return css_color; return css_color;
} }
/** // // 导出表格 按钮点击后触发事件
* 获取当前时间 // async function exportExcel () {
*/ // sessionStorage.setItem("DeviceQueryStart", AlarmInfo.startTime);
// function currentTime() { // sessionStorage.setItem("DeviceQueryEnd", AlarmInfo.endTime);
// var date = new Date(); // AlarmInfo.pageIndex = 0;
// var year = date.getFullYear(); //月份从0~11，所以加一 // AlarmInfo.pageCount = 100000;
// let month = date.getMonth();
// console.log("month", month); // if (AlarmInfo.interval === undefined) {
// var dateArr = [ // AlarmInfo.interval = 2;
// date.getMonth() + 1, // }
// date.getDate(), // var fileName = getFileName("换热站历史数据");
// date.getHours(),
// date.getMinutes(), // await http.post("/api/transfer/hisExport", AlarmInfo, '正在导出数据....', { responseType: 'blob' }).then((content) => {
// date.getSeconds(), // try{
// ]; // const blob = new Blob([content]);
// //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉 // if ('download' in document.createElement('a')) {
// for (var i = 0; i < dateArr.length; i++) { // // 非IE下载
// if (dateArr[i] >= 1 && dateArr[i] <= 9) { // const elink = document.createElement('a');
// dateArr[i] = "0" + dateArr[i]; // elink.download = fileName;
// } // elink.style.display = 'none';
// } // elink.href = URL.createObjectURL(blob);
// var strDate = year + dateArr[0] + dateArr[1] + dateArr[2] + dateArr[3] + dateArr[4]; // document.body.appendChild(elink);
// //此处可以拿外部的变量接收 strDate:2022-05-01 13:25:30 // elink.click();
// //this.date = strDate; // URL.revokeObjectURL(elink.href);
// return strDate; // document.body.removeChild(elink);
// } // } else {
// // IE10+下载
// 导出表格 按钮点击后触发事件 // navigator.msSaveBlob(blob, fileName);
async function exportExcel() { // }
sessionStorage.setItem("DeviceQueryStart", HisPipeInfo.startTime); // }catch(error){
sessionStorage.setItem("DeviceQueryEnd", HisPipeInfo.endTime); // console.log(error);
HisPipeInfo.pageIndex = 0; // }
HisPipeInfo.pageCount = 100000; // });
// }
if (HisPipeInfo.interval === undefined) { onMounted(() => {
HisPipeInfo.interval = 2;
}
var fileName = getFileName("总管历史数据");
await http.post("/api/pipe/hisExport", HisPipeInfo, '正在导出数据....', { responseType: 'blob' }).then((content) => {
try{
const blob = new Blob([content]);
if ('download' in document.createElement('a')) {
// 非IE下载
const elink = document.createElement('a');
elink.download = fileName;
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href);
document.body.removeChild(elink);
} else {
// IE10+下载
navigator.msSaveBlob(blob, fileName);
}
}catch(error){
console.log(error);
}
});
// const enNameToCnName = {};
// HisPipeInfo.pageCount = 999999;
// frozenList.forEach(element => {
// enNameToCnName[element.field] = element.alias;
// })
// otherList.forEach(element => {
// enNameToCnName[element.enName] = element.alias;
// })
// console.log(enNameToCnName);
// http.post("/api/pipe/History", HisPipeInfo).then((result) => {
// console.log(result);
// let excelData = result.data.dataInfoList.map(n => {
// // console.log(Object.keys(n))
// let newItem = [];
// Object.keys(n).forEach(k => {
// // console.log(n[k])
// newItem[enNameToCnName[k]] = n[k]
// })
// return newItem
// });
// const xlsx0bj = {
// SheetNames: ['sheet1'],//指定有序 sheet 的 name
// Sheets: {
// // 表格数据内容
// ['sheet1']: XLSX.utils.json_to_sheet(excelData)
// }
// }
// XLSX.writeFile(xlsx0bj, '123.xlsx');
// });
}
onMounted(() => {
setContentHeight(); setContentHeight();
window.addEventListener('resize', setContentHeight); window.addEventListener('resize', setContentHeight);
}) })
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('resize', setContentHeight); window.removeEventListener('resize', setContentHeight);
}) })
</script>
//获取折线图 <style lang="less" scoped>
function getchart() { .moduleCard {
if (value.value === false) {
const series = reactive([]);
const titles = reactive([]);
const title = ref();
let id = "";
id = HisPipeInfo.id[0];
HisPipeInfo.id = [];
HisPipeInfo.id.push(id);
HisPipeInfo.pageCount = 999999;
options.forEach(element =>{
if(element.value === id){
title.value = element.label;
}
})
http.post("/api/pipe/Curve", HisPipeInfo).then((result) => {
curveTitleData.value = result.data.title;
console.log(result);
result.data.title.forEach(element => {
titles.push(element.alias);
let da = new Array();
result.data.data.forEach(elements => {
da.push(elements[element.enName[0].toLowerCase() + element.enName.substring(1)])
})
timeList.length = 0;
result.data.data.forEach(ele => {
timeList.push(ele.gatherTime)
})
series.push({
name: element.alias,
type: 'line',
data: da
})
})
option.value = {
title: {
text: title.value + '历史数据'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: titles
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: timeList
},
yAxis: {
type: 'value',
axisLabel: {
formatter:'{value} ℃'
}
},
series: series
};
console.log(option.value);
var myChart = echarts.init(document.getElementById('chart'));
myChart.setOption(option.value);
//图表响应式
window.addEventListener('resize', () => {
myChart.resize();
})
})
}
}
</script>
<style lang="less" scoped>
.moduleCard {
width: auto; width: auto;
overflow: auto; overflow: auto;
//max-height: 540px; //max-height: 540px;
padding: 2px; padding: 0px;
::v-deep .el-card__body { ::v-deep .el-card__body {
padding: 0px; padding: 0px;
} }
} }
.pagination { .pagination {
padding: 4px; padding: 4px;
margin-left: 20px; margin-left: 20px;
height: 30px; height: 30px;
//background-color: #8939cf; //background-color: #8939cf;
vertical-align: middle; vertical-align: middle;
} }
//鼠标所在行的颜色 //鼠标所在行的颜色
::v-deep .el-table__body tr:hover>td { ::v-deep .el-table__body tr:hover>td {
background: linear-gradient(to top, rgb(0, 198, 255), rgb(255, 255, 255)) !important; background: linear-gradient(to top, rgb(0, 198, 255), rgb(255, 255, 255)) !important;
} }
::v-deep .el-table__body tr.current-row>td { ::v-deep .el-table__body tr.current-row>td {
background-color: #92cbf1 !important; background-color: #92cbf1 !important;
} }
.card-contianer { .card-contianer {
width: auto; width: auto;
height: 70px; height: 70px;
...@@ -600,25 +413,21 @@ ...@@ -600,25 +413,21 @@
display: flex; display: flex;
margin: 20px; margin: 20px;
} }
} }
.el-form-item { .el-form-item {
margin-top: -20px; margin-top: -20px;
margin-right: 30px; margin-right: 30px;
} }
.search-box { .el-tag--mini {
background: #fefefe; height: 21px !important
margin-top: 0px; }
border: 1px solid #eae8e8; .el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner{
position: absolute; height: 33px; //这里高度根据需求自己设定
z-index: 999; }
//left: 15px; .el-cascader__tags {
// right: 15px; display: inline-flex;
padding: 25px 20px; margin-right: 10px;
padding-bottom: 0; flex-wrap: nowrap;
border-top: 0; }
box-shadow: 0 7px 18px -12px #bdc0bb; </style>
width: 100%; \ No newline at end of file
height: 160px;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment