<!-- 数据浏览图形 -->
<template>
<div
id="dataBrowsingQuery"
class="tab"
:element-loading-text="loadingTitle"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(245, 245, 245, 0.8)"
v-loading="loading"
>
<!-- 搜索按钮 -->
<div class="btns">
<xf-buttons :btnAuthority="authority">
<template #dataSource>
<el-input
style="width: 130px"
placeholder="请输入查询名称"
class="m-r-10"
v-model="programme"
></el-input>
<el-button
v-if="draw"
type="primary"
size="mini"
style="height: 31px"
@click="getCharts('ruleForm', 1)"
>保存
</el-button>
<el-button
v-if="!draw"
type="primary"
size="mini"
style="height: 31px"
@click="getCharts('ruleForm', 2)"
>修改
</el-button>
<el-button
type="primary"
size="mini"
style="height: 31px"
@click="getCharts('ruleForm', 3)"
>获取平均值
</el-button>
<el-button
type="primary"
v-show="showFile"
size="mini"
style="height: 31px"
@click="exprotXlsx()"
>导出
</el-button>
</template>
<!-- 上传按钮 -->
<template #search>
<el-date-picker
v-model="dates"
type="datetimerange"
:picker-options="pickerOptions"
:editable="false"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="timestamp"
align="right"
>
</el-date-picker>
<el-button
class="dateSearch"
style="margin-left: 10px"
size="mini"
type="primary"
@click="getCharts('ruleForm')"
>
搜索
</el-button>
</template>
</xf-buttons>
</div>
<!-- 搜索条件 -->
<div class="searchCondition">
<el-form
status-icon
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="auto"
class="demo-ruleForm"
>
<div
class="condition"
:style="{ height: conditionHeight[parentIndex] }"
v-for="(parentItem, parentIndex) in ruleForm.dataPreviewLists"
:key="parentIndex"
>
<el-row>
<el-col :span="24" class="sign">
<span @click="conditional(parentIndex)" title="条件窗开关">
<i
:class="conditionIcon[parentIndex]"
style="transform: rotateZ(-90deg)"
></i>
Series{{ parentIndex + 1 }}
</span>
<!-- 删除条件按钮 -->
<div
class="deleteBtns f_right"
v-if="closeWindow[parentIndex]"
@click="deleteWin(parentIndex)"
title="关闭此条件框"
>
<i class="el-icon-close"></i>
</div>
<!-- 复制数据按钮 -->
<div
class="telescopic f_right"
v-if="copyBtn[parentIndex]"
title="复制窗口"
@click="copyDatas(parentIndex)"
>
<i class="el-icon-document-copy"></i>
</div>
<!-- 添加按钮 -->
<div
class="telescopic f_right"
v-if="copyBtn[parentIndex]"
title="添加数据"
@click="modelAdd(parentIndex)"
>
<i class="el-icon-plus"></i>
</div>
</el-col>
</el-row>
<el-row class="conditionContent conditionContent1">
<el-col :span="5" class="p-r-10">
<el-form-item
label="连接名"
:prop="'dataPreviewLists.' + parentIndex + '.dataSourceName'"
>
<el-select
@change="dataSourceChange"
@visible-change="fieldNameFocus(parentIndex)"
v-model="parentItem.dataSourceName"
placeholder="请选择连接"
>
<el-option
v-for="(item, index) in datasSources"
:key="index + 99"
:label="item.value"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4" class="p-r-10">
<el-form-item
label="数据表名"
:prop="'dataPreviewLists.' + parentIndex + '.tableName'"
>
<el-autocomplete
@focus="fieldNameFocus(parentIndex)"
@select="dataSourceTable(parentIndex)"
v-model="parentItem.tableName"
:fetch-suggestions="querySearch"
placeholder="请选择数据表"
>
</el-autocomplete>
</el-form-item>
</el-col>
<el-col :span="4" class="p-r-10">
<el-form-item
label="时间字段"
:prop="'dataPreviewLists.' + parentIndex + '.timeColumnName'"
>
<el-select
v-model="parentItem.timeColumnName"
placeholder="请选择时间字段"
>
<el-option
v-for="(item, index) in parentItem.datas.dateColumn"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item
label="查询字段"
:prop="'dataPreviewLists.' + parentIndex + '.queryColumnNames'"
>
<el-select
v-model="parentItem.queryColumnNames"
multiple
placeholder="请选择查询字段"
>
<el-option
v-for="(item, index) in parentItem.datas.numberColumn"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<!-- 字段名称 - 过滤条件 -->
<el-row
v-for="(items, indexs) in parentItem.queryConditions"
:key="indexs + 999"
>
<el-col :span="4" class="p-r-10 conditionContent">
<el-form-item label="过滤条件">
<el-select
v-model="items.name"
placeholder="请选择字段名称"
@change="fieldNameChange"
@visible-change="fieldNameFocus(parentIndex, indexs)"
>
<el-option
v-for="(item, index) in parentItem.datas.sourcesField"
:key="item.value"
:label="item.value"
:value="item.isStringL"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="2" class="p-r-10">
<el-select
v-model="items.symbol"
style="line-height: 40px"
placeholder="类型"
>
<el-option
v-for="(item, index) in parentItem.datas.symbolNum"
:key="index"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-col>
<el-col :span="4">
<el-input
v-if="items.select"
v-model.trim="items.value"
style="margin-top: 5px"
placeholder="输入字段值"
>
</el-input>
<el-date-picker
v-if="!items.select"
v-model="items.value"
type="datetime"
placeholder="选择字段值"
style="margin-top: 5px"
align="right"
value-format="yyyy-MM-dd HH:mm:ss"
>
</el-date-picker>
</el-col>
<el-col :span="1" class="addendumNames text-right">
<i
@click="deleteAutoIcons('queryConditions', parentIndex, indexs)"
class="iconfont icon-qiyong deleteIcon"
></i>
</el-col>
</el-row>
<div class="addFilter">
<span @click="filterCondition(parentIndex)"
><i class="iconfont icon-jia"></i> 添加</span
>
</div>
</div>
</el-form>
</div>
<!-- 图形展示 -->
<div id="charts" ref="Echarts"></div>
<!-- 平均值表格展示 -->
<div class="m-t-20 p-l-20 p-r-20 m-b-30 text-center">
<el-table :data="avgDatas" style="width: 100%">
<el-table-column label="序号">
<template slot-scope="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="showTime" label="日期"> </el-table-column>
<el-table-column label="流量（m³/h）">
<el-table-column prop="flowMax" label="最大值"> </el-table-column>
<el-table-column prop="flowMin" label="最小值"> </el-table-column>
<el-table-column prop="flowAvg" label="平均值"> </el-table-column>
</el-table-column>
<el-table-column label="水位（m）">
<el-table-column prop="waterLevelMax" label="最大值">
</el-table-column>
<el-table-column prop="waterLevelMin" label="最小值">
</el-table-column>
<el-table-column prop="waterLevelAvg" label="平均值">
</el-table-column>
</el-table-column>
<el-table-column prop="outFlow" label="排水量"> </el-table-column>
</el-table>
</div>
<!-- 向上滚动 -->
<!-- <el-backtop target="#dataBrowsingQuery" :visibility-height='150'></el-backtop> -->
</div>
</template>
<script>
import echarts from "echarts";
import project from "../../mixins/project";
import devisor from "../../util/devisor";
import config from "../../util/config";
import { randomColor, headTitle, deepClone } from "../../util";
import { notify, getSession } from "../../util/item";
let moment = require("moment");
export default {
data() {
return {
dates: "",
datasSources: [],
fieldParentIndex: 0, //记录当前表格状态
fieldIndex: 0,
chart: "",
centers: "center",
filePath: "",
$echarts: "",
programme: "",
draw: true,
loading: false,
showFile: false,
loadingTitle: config.loadingTitle,
datasSourceTypes: [],
avgDatas: [], //平均值
copyBtn: [true, true],
closeWindow: [false, false],
datasSourceTypes1: [],
conditionHeight: ["auto", "auto"], //条件窗口高度
conditionIcon: ["el-icon-d-arrow-right", "el-icon-d-arrow-right"], //条件窗口高度
pickerOptions: {
shortcuts: [
{
text: "最近一周",
onClick(picker) {
let end = moment()
.subtract("days", 0)
.format("YYYY-MM-DD HH:mm:ss");
let start = moment()
.subtract("days", 7)
.format("YYYY-MM-DD HH:mm:ss");
end = moment(end, "YYYY-MM-DD HH:mm:ss").valueOf();
start = moment(start, "YYYY-MM-DD HH:mm:ss").valueOf();
picker.$emit("pick", [start, end]);
}
},
{
text: "最近一个月",
onClick(picker) {
let end = moment()
.subtract("days", 0)
.format("YYYY-MM-DD HH:mm:ss");
let start = moment()
.subtract("days", 30)
.format("YYYY-MM-DD HH:mm:ss");
end = moment(end, "YYYY-MM-DD HH:mm:ss").valueOf();
start = moment(start, "YYYY-MM-DD HH:mm:ss").valueOf();
picker.$emit("pick", [start, end]);
}
},
{
text: "最近三个月",
onClick(picker) {
let end = moment()
.subtract("days", 0)
.format("YYYY-MM-DD HH:mm:ss");
let start = moment()
.subtract("days", 90)
.format("YYYY-MM-DD HH:mm:ss");
end = moment(end, "YYYY-MM-DD HH:mm:ss").valueOf();
start = moment(start, "YYYY-MM-DD HH:mm:ss").valueOf();
picker.$emit("pick", [start, end]);
}
}
]
},
ruleForm: {
dataPreviewLists: [
{
dataSourceName: "", //连接名称
tableName: "", //数据表名称
timeColumnName: "", //时间字段名称
queryColumnNames: [], //待查询字段名称
datas: {
//存储改变字段，进行数据区分，比较改变数值，修改不必要字段
dateColumn: [], //时间字段
numberColumn: [], //查询字段
sourcesField: [], //字段名称
symbolNum: [] //类型
},
queryConditions: [
{
name: "",
symbol: "",
value: "",
select: true
}
] //过滤条件
}
]
},
symbolNum1: [
{
label: ">",
value: ">"
},
{
label: ">=",
value: ">="
},
{
label: "<",
value: "<"
},
{
label: "<=",
value: "<="
},
{
label: "=",
value: "="
}
],
symbolNum2: [
{
label: "=",
value: "="
}
],
rules: {
dataPreviewLists: [
{
queryConditions: [
{
name: [
{
required: true,
message: "请选择字段名称",
trigger: "change"
}
], //检测字段
minVal: [
{
required: true,
message: "请输入小于阈值",
trigger: "blur"
}
], //小于阈值
maxVal: [
{
required: true,
message: "请输入大于阈值",
trigger: "blur"
}
] //大于阈值
}
],
queryColumnNames: [
{
required: true,
message: "请选择查询字段",
trigger: "change"
}
],
timeColumnName: [
{
required: true,
message: "请选择时间字段",
trigger: "change"
}
],
tableName: [
{
required: true,
message: "请选择数据表",
trigger: "change"
}
],
dataSourceName: [
{
required: true,
message: "请选择连接",
trigger: "change"
}
]
},
{
queryConditions: [
{
name: [
{
required: true,
message: "请选择字段名称",
trigger: "change"
}
], //检测字段
minVal: [
{
required: true,
message: "请输入小于阈值",
trigger: "blur"
}
], //小于阈值
maxVal: [
{
required: true,
message: "请输入大于阈值",
trigger: "blur"
}
] //大于阈值
}
],
queryColumnNames: [
{
required: true,
message: "请选择查询字段",
trigger: "change"
}
],
timeColumnName: [
{
required: true,
message: "请选择时间字段",
trigger: "change"
}
],
tableName: [
{
required: true,
message: "请选择数据表",
trigger: "change"
}
],
dataSourceName: [
{
required: true,
message: "请选择连接",
trigger: "change"
}
]
}
]
}
};
},
mixins: [project],
components: {},
computed: {},
mounted() {
/**
* 页面注意事项
* 每组数值，动态进行数据的添加，方法相同，但是数据组不同
*/
this.getPlatform();
// 获取内容
this.getStorageId();
this.$nextTick(function() {
setTimeout(() => {
this.defaultDrawCanvas();
}, 300);
});
this.dataSourceChanges();
},
methods: {
async getStorageId() {
// 获取上个页面的内容，并进行数据展示，为[]的时候是新增过程，否则为修改过程
let row = JSON.parse(sessionStorage.getItem("dataBrowsing"));
// row = row === [] ? [] : row;
console.log(row);
if (row == false) {
// 新增过程
this.draw = true;
return;
}
console.log(this.draw);
this.draw = false;
// 数据回显
let response = await this.getHttpDatas(this.nozzle.dataPreviewQueryById, {
id: row["id"]
});
response = response ? response : [];
let queryCondition = JSON.parse(response["queryCondition"]);
this.$set(this.ruleForm, "dataPreviewLists", queryCondition);
// 数据表名称获取
for (let [key, values] of queryCondition.entries()) {
this.dataSourceChange(values["dataSourceName"], 2);
this.dataSourceTable(key, 2);
}
// 任务名称
this.programme = response.name;
// 任务时间
this.dates = [
Date.parse(response.startTime),
Date.parse(response.endTime)
];
// 窗口复制按钮进行处理
if (queryCondition.length >= 2) {
this.copyBtn = [false, false];
this.closeWindow = [true, true];
}
},
getCharts(formName = "ruleForm", dif = 0) {
// 获取图形参数
if (this.dates === null || this.dates === "") {
this.$notify({
type: "warning",
message: "请选择需要查询的时间段"
});
return;
}
if (this.ruleForm.dataPreviewLists.length === 0) {
this.$notify({
type: "warning",
message: "至少添加一组数据，进行浏览"
});
return;
}
this.$refs[formName].validate(valid => {
if (valid) {
// this.loading = true;
// 成功请求数据,确认按钮图形查询
switch (dif) {
case 0:
this.getChart();
break;
case 1:
this.dermire(1); //新增数据回掉函数
break;
case 2:
this.dermire(2); //修改数据
break;
default:
this.average(); //修改数据
break;
}
} else {
this.loading = false;
console.log("error submit!!");
return false;
}
});
},
drawChart(res) {
let [
xAxis,
devisors,
seriesFactorValue,
devisorsShowOrHidd,
colorPump
] = [[], [], [], [], 0];
//自定义色彩搭配
let colors = [
"#fa541c",
"#13c2c2",
"#52c41a",
"#2f54eb",
"#fa8c16",
"#1890ff",
"#f5222d",
"#91d5ff",
"#0050b3",
"#10239e",
"#3366CC"
];
for (let i = 0; i < 100; i++) {
colors.push(randomColor());
}
for (let [keys, values] of res.entries()) {
for (let [ii, vv] of Object.entries(values)) {
var xName = devisor[ii.toLowerCase()] || "无";
// 站点图例
devisors.push(xName + "(Series" + (1 + keys) + ")");
var color = colors[colorPump];
colorPump++;
// 站点内容
seriesFactorValue.push({
name: xName + "(Series" + (1 + keys) + ")",
type: "line",
smooth: true,
itemStyle: {
normal: {
color: color
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: color + "E6"
},
{
offset: 0.6,
color: color + "66"
},
{
offset: 1,
color: color
}
])
}
},
smooth: true,
data: Object.values(vv)
});
if (keys === 0 && Object.keys(values)[0] === ii) {
xAxis = Object.keys(vv);
}
}
}
// 默认显示数据
if (devisors.length > 0) {
for (let [index, values] of devisors.entries()) {
if (index > 3) {
var keys = {};
keys[devisors[index]] = false;
devisorsShowOrHidd.push(keys);
} else {
var keys = {};
keys[devisors[index]] = true;
devisorsShowOrHidd.push(keys);
}
}
}
/**
* 流速（VA）处理对比分析图
*/
let dom = document.getElementById("charts");
let myChart = echarts.init(dom);
this.$echarts = myChart;
let option = {
// backgroundColor: '#F6F9FE',
title: {
text: "",
textStyle: {
color: "#1890fd80" //标题文字颜色
},
y: 15,
x: "center"
},
tooltip: {
trigger: "axis"
},
grid: {
x: 55,
x2: 25
},
xAxis: {
axisLine: {
//设置地名及x轴线条颜色
show: true,
lineStyle: {
type: "dashed", //设置x轴线条样式
color: "#ced0d1"
}
},
axisLabel: {
show: true,
textStyle: {
color: "#ced0d1", //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小
}
},
boundaryGap: false, //从x轴起点开始
data: xAxis
},
legend: {
data: devisors,
itemGap: 5,
icon: "rect",
itemWidth: 15, // 设置宽度
itemHeight: 15,
textStyle: {
color: "#333" //图例文字颜色
},
y: 20,
selected: devisorsShowOrHidd,
padding: [0, 30, 0, 0],
x: "center"
},
yAxis: {
axisLine: {
//y轴
show: false,
lineStyle: {
color: "#ced0d1"
}
},
axisTick: {
//y轴刻度线
show: false
},
axisLabel: {
show: true,
textStyle: {
color: "#ced0d1", //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小
}
},
name: "",
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#ced0d1"
}
}
},
dataZoom: [
{
show: true,
start: 0,
end: 15,
height: 18,
textStyle: {
color: "#ced0d1"
}
},
{
type: "inside",
realtime: true,
start: 0,
height: 18,
end: 15
}
],
series: seriesFactorValue
};
myChart.clear();
myChart.setOption(option);
this.init();
},
init() {
// 图形自适应
let that = this;
this.$nextTick(() => {
// 不加延时,会出现获取不到dom的情况
setTimeout(() => {
window.addEventListener("resize", function() {
that.$echarts.resize();
});
}, 100);
});
},
async getChart() {
// 查询图形数据
let newDatas = this.dataProcessing();
let response = await this.getHttpDatas(
this.nozzle.browsingGetDataComparisonList,
newDatas,
2,
2
);
this.loading = false;
// 判断参数是否有值
if (
JSON.stringify(response) === "[{}]" ||
JSON.stringify(response) === "[{},{}]"
) {
this.defaultDrawCanvas();
return;
}
// 有数据情况下，窗口缩小
this.conditionIcon = ["el-icon-d-arrow-left", "el-icon-d-arrow-left"];
this.$set(this.conditionHeight, 0, "110px");
this.$set(this.conditionHeight, 1, "110px");
this.drawChart(response);
},
async dataSourceChanges() {
// 连接列表渲染
let datas = await this.getHttpDatas(this.nozzle.queryDataSrouceName, {
dbType: "Relational"
});
let dataBase = [];
for (let item of datas.values()) {
dataBase.push({
value: item
});
}
this.datasSources = dataBase;
},
async dataSourceChange(val, flage = 1) {
// 选择数据表内容，数据变化
if (flage === 1) {
this.ruleForm.dataPreviewLists[this.fieldParentIndex]["tableName"] = "";
}
let datas = await this.getHttpDatas(
this.nozzle.getAllTableNameByDateSourceName,
{
dataSourceName: val,
pageSize: 999999,
pageNo: 1
}
);
let dataBase = [];
datas.list = datas.list || [];
for (let item of datas.list.values()) {
dataBase.push({
value: item
});
}
// 填充数据表内容
if (this.fieldParentIndex === 0) {
this.datasSourceTypes = dataBase;
} else {
this.datasSourceTypes1 = dataBase;
}
},
async dataSourceTable(index = 0, flage = 1) {
// 数据表内容变化发生改变
this.fieldParentIndex = index;
// 展开窗口
this.$set(this.conditionHeight, index, "auto");
this.conditionIcon[index] = "el-icon-d-arrow-right";
let val = this.ruleForm.dataPreviewLists[index].tableName;
let dataBase = this.ruleForm.dataPreviewLists[index].dataSourceName;
this.sourceFieldChange(dataBase, val, index);
this.getZdname(dataBase, val, index);
if (flage === 1) {
// 清空字段名
for (let item of this.ruleForm.dataPreviewLists[
index
].queryConditions.values()) {
item["name"] = "";
}
this.ruleForm.dataPreviewLists[index].datas.sourcesField = [];
this.ruleForm.dataPreviewLists[index].timeColumnName = "";
this.ruleForm.dataPreviewLists[index].queryColumnNames = [];
}
},
async sourceFieldChange(dataSourceName, tableName, index) {
/**
* 检测字段填充
* @param {String} dataSourceName 连接名称
* @param {String} tableName 表名称
*/
const datas = await this.getHttpDatas(
this.nozzle.getDataStructureByTableName,
{
dataSourceName: dataSourceName,
tableName: tableName
}
);
let isString = 1; //是否是string类型，是为1，否为2
if (datas["list"].length !== 0) {
let newDatas = [];
for (let item of datas["list"].values()) {
// 判断是否为字符串类型 1 为string 2为date 3
if (item["columnType"].includes("String")) {
isString = 1;
} else if (item["columnType"].includes("Date")) {
isString = 2;
} else {
isString = 3;
}
newDatas.push({
value: item["columnName"],
isStringL: item["columnName"] + "," + isString
});
}
this.ruleForm.dataPreviewLists[index].datas.sourcesField = newDatas;
} else {
this.ruleForm.dataPreviewLists[index].datas.sourcesField = [];
}
},
async getZdname(dataSourceName, tableName, index) {
// 字段名称
let response = await this.getHttpDatas(
this.nozzle.getDataStructureByTableNameAndType,
{
dataSourceName: dataSourceName,
tableName: tableName
}
);
// 填充时间字段和查询字段
this.ruleForm.dataPreviewLists[index].datas.dateColumn = this.enOrChin(
response["dateColumn"]
);
this.ruleForm.dataPreviewLists[index].datas.numberColumn = this.enOrChin(
response["numberColumn"]
);
},
enOrChin(datas = []) {
// 英文转换成中文
if (datas.length !== 0) {
let newDevisor = [];
for (const item of datas.values()) {
newDevisor.push({
label: devisor[item.toLowerCase()],
value: item
});
}
return newDevisor;
}
},
fieldNameFocus(parentIndex = 0, indexs = 0) {
// 获取当前字段类行数
this.fieldParentIndex = parentIndex;
this.fieldIndex = indexs;
},
fieldNameChange(val) {
/**
* 字段名称
* @param {Number} parentIndex 是第几个窗口
* @param {Number} index 是第几行数据
*/
let isString = val.split(",")[1];
// 是字符串类型，类型判断只能展示=
this.ruleForm.dataPreviewLists[this.fieldParentIndex].queryConditions[
this.fieldIndex
].symbol = "";
this.ruleForm.dataPreviewLists[this.fieldParentIndex].queryConditions[
this.fieldIndex
].value = "";
if (isString === "1") {
// string类型
this.ruleForm.dataPreviewLists[
this.fieldParentIndex
].datas.symbolNum = this.symbolNum2;
this.ruleForm.dataPreviewLists[this.fieldParentIndex].queryConditions[
this.fieldIndex
].select = true;
} else if (isString === "2") {
// 字段值转换成时间框
this.ruleForm.dataPreviewLists[
this.fieldParentIndex
].datas.symbolNum = this.symbolNum1;
this.ruleForm.dataPreviewLists[this.fieldParentIndex].queryConditions[
this.fieldIndex
].select = false;
} else {
// 默认情况
this.ruleForm.dataPreviewLists[
this.fieldParentIndex
].datas.symbolNum = this.symbolNum1;
this.ruleForm.dataPreviewLists[this.fieldParentIndex].queryConditions[
this.fieldIndex
].select = true;
}
},
querySearch(queryString, cb) {
// 数据表内容填充
if (this.fieldParentIndex === 0) {
var restaurants = this.datasSourceTypes;
} else {
var restaurants = this.datasSourceTypes1;
}
var results = queryString
? restaurants.filter(this.createFilter(queryString))
: restaurants;
// 调用 callback 返回建议列表的数据
if (results.length !== 0) {
for (let item of results.values()) {
item["value"] = item["value"];
}
}
cb(results);
},
createFilter(queryString) {
return restaurant => {
return restaurant.value.indexOf(queryString) !== -1;
};
},
filterCondition(index) {
/**
* 添加检测字段，修改时刻，渲染并进行赋值
* @param {Number} index 当前选中的删除区域
*/
this.ruleForm.dataPreviewLists[index].queryConditions.push({
name: "",
symbol: "",
value: "",
select: true
});
},
modelAdd() {
// 新增窗口
this.ruleForm.dataPreviewLists.push({
dataSourceName: "", //连接名称
tableName: "", //数据表名称
timeColumnName: "", //时间字段名称
queryColumnNames: [], //待查询字段名称
datas: {
//存储改变字段，进行数据区分，比较改变数值，修改不必要字段
dateColumn: [], //时间字段
numberColumn: [], //查询字段
sourcesField: [],
symbolNum: []
},
queryConditions: [
{
name: "",
symbol: "",
value: ""
}
] //过滤条件
});
if (this.ruleForm.dataPreviewLists.length >= 2) {
this.copyBtn = [false, false];
this.closeWindow = [true, true];
}
},
deleteWin(parentIndex) {
// 删除窗口
this.ruleForm.dataPreviewLists.splice(parentIndex, 1);
if (this.ruleForm.dataPreviewLists.length === 1) {
this.closeWindow = [false, false];
this.copyBtn = [true, true];
}
},
conditional(parentIndex) {
// 条件窗开关
// 条件
if (this.conditionHeight[parentIndex] === "110px") {
this.$set(this.conditionHeight, parentIndex, "auto");
this.conditionIcon[parentIndex] = "el-icon-d-arrow-right";
} else {
this.$set(this.conditionHeight, parentIndex, "110px");
this.conditionIcon[parentIndex] = "el-icon-d-arrow-left";
}
},
deleteAutoIcons(fieldName, parentIndex, index) {
// 删除字段
this.ruleForm.dataPreviewLists[parentIndex][fieldName].splice(index, 1);
},
dataProcessing() {
// 数据格式处理
let newDatas = null;
newDatas = deepClone(this.ruleForm);
// 输出处理
for (let [keys, items] of Object.entries(newDatas.dataPreviewLists)) {
items["queryCondition"] = [];
items["queryConditions"] = items["queryConditions"] || [];
// 时间字段名称
if (items["queryConditions"].length !== 0) {
for (let [i, v] of Object.entries(items["queryConditions"])) {
var pa = new RegExp(/(^[\-0-9][0-9]*(.[0-9]+)?)$/);
// 处理字段值类型是否是string 或者number
let paVal = "";
if (v.name.includes("ST")) {
paVal = "'" + v["value"] + "'";
} else {
paVal = pa.test(v["value"])
? +v["value"]
: "'" + v["value"] + "'";
}
let da = v["name"].split(",")[0] + " " + v["symbol"] + " " + paVal;
//过滤条件非必选
// if (v['name'] === '' || v['symbol'] === '' || v['value'] === '') {
// this.$notify({
// type: 'warning',
// message: '请将数据填充完全，再进行搜索'
// })
// return
// }
items["queryCondition"].push(da);
}
}
delete items["queryConditions"];
delete items["datas"];
}
newDatas["startTime"] = this.dates[0];
newDatas["endTime"] = this.dates[1];
return newDatas;
},
dermire(dif = 1) {
// 确定查询
if (this.programme === "") {
this.$notify({
type: "warning",
message: "请将查询名称填写完整"
});
return;
}
let newDatas = Object.assign({}, this.ruleForm);
//查询确定
const username = localStorage.getItem("USERNO");
newDatas["name"] = this.programme;
let api = "";
if (dif === 1) {
// 新增
api = this.nozzle.dataPreviewCreate;
newDatas["createdby"] = username;
} else {
// 修改
api = this.nozzle.dataPreviewUpdate;
newDatas["updatedby"] = username;
newDatas["id"] = JSON.parse(sessionStorage.getItem("dataBrowsing")).id;
console.log(JSON.parse(sessionStorage.getItem("dataBrowsing")));
console.log(newDatas["id"]);
}
newDatas["queryCondition"] = JSON.stringify(newDatas["dataPreviewLists"]);
newDatas["startTime"] = this.dates[0];
newDatas["endTime"] = this.dates[1];
delete newDatas["dataPreviewLists"];
this.getHttpDatas(api, newDatas, 2, 2);
},
async average() {
// 展示平均值
if (this.programme === "") {
this.$notify({
type: "warning",
message: "请将查询名称填写完整"
});
return;
}
let api = this.nozzle.getRepairDataList;
let newDatas = this.dataProcessing();
newDatas["dataPreviewLists"] =
newDatas["dataPreviewLists"].length === 2
? [newDatas["dataPreviewLists"][1]]
: [newDatas["dataPreviewLists"]];
// 修改水位和流量参数
newDatas["dataPreviewLists"][0]["queryColumnNames"] = ["SBL1", "Z"];
const res = await this.getHttpDatas(api, newDatas, 2, 2);
this.loading = false;
// 展开导出功能
this.showFile = true;
this.avgDatas = res.repairData;
// 下载路径
this.filePath = res.filePath.replace(/\\/g, "/");
},
async exprotXlsx() {
// 导出平均值
window.location.href = `${this.nozzle.downloadFile}?filePath=${this.filePath}`;
},
copyDatas(index) {
// 复制窗口 参数为当前窗口的索引
let newDatas = null;
newDatas = deepClone(this.ruleForm.dataPreviewLists[0]);
this.ruleForm.dataPreviewLists.push(newDatas);
this.datasSourceTypes1 = this.datasSourceTypes;
if (this.ruleForm.dataPreviewLists.length === 2) {
this.copyBtn = [false, false];
this.closeWindow = [true, true];
}
},
defaultDrawCanvas() {
// 默认图形占位
let keys = {};
for (let i = 10; i > 0; i--) {
keys[
moment()
.subtract("days", i * 3)
.format("YYYY-MM-DD HH:mm:ss")
] = 0;
}
this.drawChart([
{
PN: keys
}
]);
},
async getPlatform() {
// 获取产品名称
console.log(111);
let res = await this.$http.get(this.nozzle.getProjectName);
res = res.data ? res.data.data : "滤网";
headTitle(res);
}
}
};
</script>
<style>
#dataBrowsingQuery {
height: 98%;
background-color: #fff;
overflow-x: hidden;
}
.el-date-editor .el-range__close-icon,
.el-date-editor .el-range__icon {
line-height: 23px;
}
.el-input__prefix {
top: -4px !important;
}
.btns {
height: 90px;
line-height: 76px;
overflow: hidden;
padding: 20px;
}
.btns .dateSearch {
height: 31px;
}
.btns .el-date-editor.el-input__inner {
width: 377px !important;
height: 31px;
}
.searchButton span {
line-height: 20px;
}
.conditionContent {
padding: 0 23px;
}
.conditionContent1 {
margin-top: 23px;
}
/* // 搜索条件 */
.searchCondition {
width: 100%;
padding: 20px 20px 0 20px;
overflow: hidden;
}
.searchCondition .condition {
position: relative;
width: 100%;
border-radius: 6px;
border: 1px solid rgba(111, 165, 255, 1);
box-shadow: 0px 3px 20px 0px #1890ff1a;
margin-bottom: 20px;
overflow: hidden;
transition: all 1s;
}
.searchCondition .condition .el-autocomplete {
width: 100%;
}
/* // 标记 */
.condition .sign {
text-align: left;
color: #fff;
position: relative;
line-height: 35px;
font-size: 16px;
/* background-color: #EFF5FCFF; */
padding-right: 15px;
padding-left: 23px;
}
/* .searchCondition .condition &>span {
cursor: pointer;
} */
.f_right {
float: right;
}
.deleteBtns {
width: 24px;
height: 24px;
color: #333333ff;
margin-right: 8px;
margin-top: 6px;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 24px;
cursor: pointer;
}
/* // 打开当前按钮 */
/* .telescopic {
.deleteBtns();
margin-right: 8px;
} */
.icon-jia {
color: var(--white) !important;
}
.aboutType {
padding-left: 15px;
}
.addendumNames {
text-align: left;
padding-left: 10px;
cursor: pointer;
line-height: 40px;
color: #f15353;
}
/* // 添加按钮 */
.addFilter {
padding-left: 80px;
text-align: center;
}
.addFilter span {
position: absolute;
width: 150px;
top: 126px;
left: 46%;
border: 1px dashed #ccc;
height: 31px;
line-height: 31px;
cursor: pointer;
}
/* // 图形展示 */
#charts {
width: 100%;
height: 400px;
margin: 20px 0;
text-align: center;
}
/* // 时间选择框 */
.el-range-editor--mini .el-range-separator {
line-height: 27px;
}
.el-table .cell {
text-align: center;
}
</style>
