Compare commits
No commits in common. 'jc1.0' and 'master' have entirely different histories.
@ -1,3 +1,5 @@
|
||||
module.exports = {
|
||||
presets: ["@vue/cli-plugin-babel/preset"],
|
||||
};
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
[ViewState]
|
||||
Mode=
|
||||
Vid=
|
||||
FolderType=Generic
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,125 +0,0 @@
|
||||
<template>
|
||||
<div class="filedBox">
|
||||
<div class="reportHead">
|
||||
<h3>导出类型</h3>
|
||||
</div>
|
||||
<div class="page-body">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="handleAddClick"
|
||||
>添加导出类型</el-button
|
||||
>
|
||||
<div class="zsbTableBox">
|
||||
<el-table :data="configData" style="width: 100%">
|
||||
<el-table-column label="类型名称" prop="typeName"> </el-table-column>
|
||||
<el-table-column label="表名" prop="tableName"> </el-table-column>
|
||||
<el-table-column label="创建时间" prop="createTime">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.createTime }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" class-name="editClass">
|
||||
<template slot-scope="scope">
|
||||
<el-link
|
||||
type="danger"
|
||||
@click="handleDeleteClick(scope.row)"
|
||||
size="small"
|
||||
icon="el-icon-delete"
|
||||
>删除</el-link
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<addconfigDialog ref="configAddRef" :title="title"></addconfigDialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { listConfigApi, delConfigApi } from "@/utils/api/index";
|
||||
import addconfigDialog from "./components/addconfigDialog";
|
||||
export default {
|
||||
name: "exportType",
|
||||
components: {
|
||||
addconfigDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
configLoading: false,
|
||||
configData: [],
|
||||
title: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getconfigList();
|
||||
},
|
||||
mounted() {},
|
||||
watch: {},
|
||||
methods: {
|
||||
getconfigList() {
|
||||
this.configLoading = true;
|
||||
listConfigApi()
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.configData = res.data;
|
||||
this.configLoading = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
//删除数据
|
||||
handleDeleteClick(data) {
|
||||
console.log(data);
|
||||
this.$confirm(`确定要删除该类型吗?`, "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
delConfigApi({ id: data.id, modevtypeId: data.modevtypeId }).then(
|
||||
(res) => {
|
||||
if (res.success) {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
type: "success",
|
||||
message: "删除成功",
|
||||
});
|
||||
this.getconfigList(); //刷新
|
||||
} else {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
type: "error",
|
||||
message: res.errorMsg,
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
//新增
|
||||
handleAddClick() {
|
||||
this.title = "新增导出类型";
|
||||
this.$refs.configAddRef.display();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.filedBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.page-body {
|
||||
width: calc(100% - 24px);
|
||||
height: calc(100% - 74px);
|
||||
padding: 12px;
|
||||
background: #eee;
|
||||
.zsbTableBox {
|
||||
margin-top: 8px;
|
||||
height: calc(100% - 38px);
|
||||
box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,163 +0,0 @@
|
||||
<template>
|
||||
<div class="filedBox">
|
||||
<div class="reportHead">
|
||||
<h3>字段导出映射</h3>
|
||||
</div>
|
||||
<div class="page-body">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="handleAddClick"
|
||||
>新增字段导出映射</el-button
|
||||
>
|
||||
<div class="zsbTableBox">
|
||||
<el-table
|
||||
:data="filedData"
|
||||
style="width: 100%"
|
||||
height="calc(100% - 0px)"
|
||||
>
|
||||
<el-table-column type="expand">
|
||||
<template slot-scope="props">
|
||||
<!-- {{ props.row.i2syncFields }} -->
|
||||
<el-table
|
||||
:data="props.row.i2syncFields"
|
||||
style="width: 100%"
|
||||
border
|
||||
>
|
||||
<el-table-column prop="fieldName" label="表字段">
|
||||
</el-table-column>
|
||||
<el-table-column prop="destFieldName" label="导出字段">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="名称" prop="mc"> </el-table-column>
|
||||
<el-table-column label="表名" prop="tablename"> </el-table-column>
|
||||
<el-table-column label="字段导出个数" prop="i2syncFields">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.i2syncFields.length }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" class-name="editClass">
|
||||
<template slot-scope="scope">
|
||||
<el-link
|
||||
type="primary"
|
||||
@click="handleEditClick(scope.row)"
|
||||
size="small"
|
||||
icon="el-icon-document"
|
||||
>修改</el-link
|
||||
>
|
||||
<el-link
|
||||
type="danger"
|
||||
@click="handleDeleteClick(scope.row)"
|
||||
size="small"
|
||||
icon="el-icon-delete"
|
||||
>删除</el-link
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<addfiledDialog
|
||||
ref="filedAddRef"
|
||||
:title="title"
|
||||
:filedData="filedData"
|
||||
></addfiledDialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { listFieldConfigApi, delFieldConfigApi } from "@/utils/api/index";
|
||||
import addfiledDialog from "./components/addfiledDialog";
|
||||
export default {
|
||||
components: {
|
||||
addfiledDialog,
|
||||
},
|
||||
name: "field",
|
||||
data() {
|
||||
return {
|
||||
filedLoading: false,
|
||||
filedData: [],
|
||||
title: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getFiledList();
|
||||
},
|
||||
mounted() {},
|
||||
watch: {},
|
||||
methods: {
|
||||
//获取字段映射
|
||||
getFiledList() {
|
||||
this.filedLoading = true;
|
||||
listFieldConfigApi()
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.filedData = res.data;
|
||||
|
||||
this.filedLoading = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
//新增
|
||||
handleAddClick() {
|
||||
this.title = "新增字段导出映射";
|
||||
this.$refs.filedAddRef.display();
|
||||
},
|
||||
handleEditClick(data) {
|
||||
this.title = "修改";
|
||||
this.$refs.filedAddRef.display();
|
||||
this.$refs.filedAddRef.getdataform(data);
|
||||
},
|
||||
//删除数据
|
||||
handleDeleteClick(data) {
|
||||
console.log(data);
|
||||
this.$confirm(`确定要删除${data.tablename}的字段映射配置吗?`, "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
delFieldConfigApi({ tablename: data.tablename, mc: data.mc }).then(
|
||||
(res) => {
|
||||
if (res.success) {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
type: "success",
|
||||
message: "删除成功",
|
||||
});
|
||||
this.getFiledList(); //刷新
|
||||
} else {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
type: "error",
|
||||
message: res.errorMsg,
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.filedBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.page-body {
|
||||
width: calc(100% - 24px);
|
||||
height: calc(100% - 74px);
|
||||
padding: 12px;
|
||||
background: #eee;
|
||||
.zsbTableBox {
|
||||
margin-top: 8px;
|
||||
height: calc(100% - 38px);
|
||||
box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,212 +0,0 @@
|
||||
<template>
|
||||
<div class="I2Box">
|
||||
<div class="equimentList">
|
||||
<div class="sideNav">
|
||||
<h3>
|
||||
<i class="el-icon-s-tools"></i>I2导出配置
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="statusUrl"
|
||||
placement="bottom"
|
||||
>
|
||||
<el-tag type="success" v-if="statusFlag">启用</el-tag>
|
||||
<el-tag type="warning" v-else>停用</el-tag>
|
||||
</el-tooltip>
|
||||
</h3>
|
||||
<ul class="navList">
|
||||
<li v-for="(item, index) in navlist" :key="index">
|
||||
<router-link :to="item.path">
|
||||
<span>{{ item.name }}</span
|
||||
><i class="el-icon-arrow-right"></i>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reportTable">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import addRules from "./components/addRules";
|
||||
// import copyRules from "./components/copyRules";
|
||||
import { i2statusApi } from "@/utils/api/index";
|
||||
export default {
|
||||
name: "I2config",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
activeIndex: 0,
|
||||
navlist: [
|
||||
{
|
||||
name: "字段导出映射",
|
||||
path: "/I2config/filed",
|
||||
},
|
||||
{
|
||||
name: "导出类型",
|
||||
path: "/I2config/exportType",
|
||||
},
|
||||
{
|
||||
name: "导出记录",
|
||||
path: "/I2config/record",
|
||||
},
|
||||
],
|
||||
statusUrl: "",
|
||||
statusFlag: false,
|
||||
};
|
||||
},
|
||||
watch: {},
|
||||
computed: {},
|
||||
created() {
|
||||
this.getI2Status();
|
||||
},
|
||||
methods: {
|
||||
getI2Status() {
|
||||
i2statusApi()
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.statusFlag = res.data.enable;
|
||||
this.statusUrl = res.data.url;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.I2Box {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
.equimentList {
|
||||
min-width: 240px;
|
||||
max-width: 240px;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
//border: 1px solid #fff;
|
||||
margin-right: 24px;
|
||||
background: rgba(8, 9, 36, 0.28);
|
||||
|
||||
box-shadow: inset 0 4px 44px 0 #106cde;
|
||||
//padding: 0px 12px;
|
||||
.sideNav {
|
||||
margin: 10px;
|
||||
|
||||
height: calc(100% - 20px);
|
||||
background-color: #fff;
|
||||
}
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
display: block;
|
||||
height: 38px;
|
||||
line-height: 36px;
|
||||
margin: 0;
|
||||
padding: 0 16px 0 16px;
|
||||
-webkit-text-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
color: #262626;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
i {
|
||||
margin-right: 6px;
|
||||
}
|
||||
.el-tag {
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.navList {
|
||||
box-shadow: inset 0 4px 4px -2px rgba(0, 0, 0, 0.15),
|
||||
inset 0 -4px 4px -2px rgba(0, 0, 0, 0.15);
|
||||
position: relative;
|
||||
background-color: #fbfbfb;
|
||||
li {
|
||||
padding: 0 16px 0 38px;
|
||||
color: #262626;
|
||||
height: 38px;
|
||||
line-height: 36px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 23px;
|
||||
top: 0;
|
||||
bottom: 19px;
|
||||
border-left: 1px solid #e2e2e2;
|
||||
}
|
||||
&:hover {
|
||||
a {
|
||||
cursor: pointer;
|
||||
color: #106cde;
|
||||
}
|
||||
}
|
||||
a {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
color: #262626;
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
left: -18px;
|
||||
top: 16px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e2e2e2;
|
||||
z-index: 2;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.router-link-active {
|
||||
color: #106cde;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.reportTable {
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
background: rgba(8, 9, 36, 0.28);
|
||||
// -webkit-backdrop-filter: blur(10px);
|
||||
// backdrop-filter: blur(10px);
|
||||
box-shadow: inset 0 4px 44px 0 #106cde;
|
||||
padding: 0px 12px;
|
||||
.reportHead {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
.el-table .el-table__cell {
|
||||
text-align: center;
|
||||
}
|
||||
.editClass {
|
||||
.el-link.el-link--primary {
|
||||
margin-right: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,97 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="选择设备"
|
||||
:visible.sync="dialogVisible"
|
||||
:before-close="handleClose"
|
||||
class="deviceBoxDialog"
|
||||
width="326px"
|
||||
>
|
||||
<div class="device">
|
||||
<el-form :model="sblxform">
|
||||
<el-form-item label="设备类型">
|
||||
<el-select v-model="sblxform.sblxId" placeholder="请选择设备类型">
|
||||
<el-option
|
||||
v-for="item in sblxOptions"
|
||||
:key="item.id"
|
||||
:label="item.mc"
|
||||
:value="item.id"
|
||||
>
|
||||
{{ item.mc }}
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit">确定导出</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { modevtypeListAllApi } from "@/utils/api/index";
|
||||
|
||||
export default {
|
||||
name: "deviceBoxDialog",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
sblxform: {
|
||||
sblxId: "",
|
||||
},
|
||||
dialogVisible: false,
|
||||
sblxOptions: [],
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
page: 1, // 当前页数
|
||||
pageSize: 20, // 每页数量
|
||||
total: 0, //总条数
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
watch: {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
getdeviceList() {
|
||||
modevtypeListAllApi()
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.sblxOptions = res.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
|
||||
onSubmit() {
|
||||
console.log(this.sblxform);
|
||||
console.log(this.startTime, this.endTime);
|
||||
window.location.href =
|
||||
"/cac-api/nsensor/export?typeId=" +
|
||||
this.sblxform.sblxId +
|
||||
"&startTime=" +
|
||||
this.startTime +
|
||||
"&endTime=" +
|
||||
this.endTime;
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
|
||||
display(stime, etime) {
|
||||
this.startTime = stime;
|
||||
this.endTime = etime;
|
||||
this.dialogVisible = true;
|
||||
this.getdeviceList();
|
||||
},
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.sblxform.sblxId = "";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.deviceBoxDialog {
|
||||
}
|
||||
</style>
|
||||
@ -1,182 +0,0 @@
|
||||
<template>
|
||||
<div class="I2Box">
|
||||
<div class="equimentList">
|
||||
<div class="sideNav">
|
||||
<h3><i class="el-icon-s-tools"></i>数据转移</h3>
|
||||
<ul class="navList">
|
||||
<li v-for="(item, index) in navlist" :key="index">
|
||||
<router-link :to="item.path">
|
||||
<span>{{ item.name }}</span
|
||||
><i class="el-icon-arrow-right"></i>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reportTable">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import addRules from "./components/addRules";
|
||||
// import copyRules from "./components/copyRules";
|
||||
import {} from "@/utils/api/index";
|
||||
export default {
|
||||
name: "dataTransfer",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
activeIndex: 0,
|
||||
navlist: [
|
||||
{
|
||||
name: "远端服务器",
|
||||
path: "/dataTransfer/server",
|
||||
},
|
||||
|
||||
{
|
||||
name: "下载记录",
|
||||
path: "/dataTransfer/downrecord",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
watch: {},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.I2Box {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
.equimentList {
|
||||
min-width: 240px;
|
||||
max-width: 240px;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
//border: 1px solid #fff;
|
||||
margin-right: 24px;
|
||||
background: rgba(8, 9, 36, 0.28);
|
||||
|
||||
box-shadow: inset 0 4px 44px 0 #106cde;
|
||||
//padding: 0px 12px;
|
||||
.sideNav {
|
||||
margin: 10px;
|
||||
|
||||
height: calc(100% - 20px);
|
||||
background-color: #fff;
|
||||
}
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
display: block;
|
||||
height: 38px;
|
||||
line-height: 36px;
|
||||
margin: 0;
|
||||
padding: 0 16px 0 16px;
|
||||
-webkit-text-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
color: #262626;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
i {
|
||||
margin-right: 6px;
|
||||
}
|
||||
.el-tag {
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.navList {
|
||||
box-shadow: inset 0 4px 4px -2px rgba(0, 0, 0, 0.15),
|
||||
inset 0 -4px 4px -2px rgba(0, 0, 0, 0.15);
|
||||
position: relative;
|
||||
background-color: #fbfbfb;
|
||||
li {
|
||||
padding: 0 16px 0 38px;
|
||||
color: #262626;
|
||||
height: 38px;
|
||||
line-height: 36px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 23px;
|
||||
top: 0;
|
||||
bottom: 19px;
|
||||
border-left: 1px solid #e2e2e2;
|
||||
}
|
||||
&:hover {
|
||||
a {
|
||||
cursor: pointer;
|
||||
color: #106cde;
|
||||
}
|
||||
}
|
||||
a {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
color: #262626;
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
left: -18px;
|
||||
top: 16px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e2e2e2;
|
||||
z-index: 2;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.router-link-active {
|
||||
color: #106cde;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.reportTable {
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
background: rgba(8, 9, 36, 0.28);
|
||||
// -webkit-backdrop-filter: blur(10px);
|
||||
// backdrop-filter: blur(10px);
|
||||
box-shadow: inset 0 4px 44px 0 #106cde;
|
||||
padding: 0px 12px;
|
||||
.reportHead {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
.el-table .el-table__cell {
|
||||
text-align: center;
|
||||
}
|
||||
.editClass {
|
||||
.el-link.el-link--primary {
|
||||
margin-right: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,157 +0,0 @@
|
||||
<template>
|
||||
<div class="filedBoxServer">
|
||||
<div class="reportHead">
|
||||
<h3>远端服务器</h3>
|
||||
</div>
|
||||
<div class="page-body">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="handleAddClick"
|
||||
>新增</el-button
|
||||
>
|
||||
<div class="zsbTableBox">
|
||||
<el-table
|
||||
:data="serverData"
|
||||
style="width: 100%"
|
||||
height="calc(100% - 0px)"
|
||||
>
|
||||
<el-table-column label="名称" prop="name"> </el-table-column>
|
||||
<el-table-column label="ip" prop="ip"> </el-table-column>
|
||||
<el-table-column label="端口" prop="port">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.port }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="用户名" prop="user"> </el-table-column>
|
||||
<el-table-column label="密码" prop="passwd"> </el-table-column> -->
|
||||
<el-table-column label="路径" prop="pathList">
|
||||
<template slot-scope="scope">
|
||||
<p v-for="(item, index) in scope.row.pathList">
|
||||
{{ item }}
|
||||
</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" prop="active">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.active == 1 ? "启用" : "停用" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="下载文件后缀" prop="suffix">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" class-name="editClass">
|
||||
<template slot-scope="scope">
|
||||
<el-link
|
||||
type="primary"
|
||||
@click="handleEditClick(scope.row)"
|
||||
size="small"
|
||||
icon="el-icon-document"
|
||||
>修改</el-link
|
||||
>
|
||||
<el-link
|
||||
type="danger"
|
||||
@click="handleDeleteClick(scope.row)"
|
||||
size="small"
|
||||
icon="el-icon-delete"
|
||||
>删除</el-link
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<addserverDialog ref="serverAddRef" :title="title"></addserverDialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { serverlistApi, serveDelApi } from "@/utils/api/index";
|
||||
import addserverDialog from "./components/addserverDialog";
|
||||
export default {
|
||||
components: {
|
||||
addserverDialog,
|
||||
},
|
||||
name: "server",
|
||||
data() {
|
||||
return {
|
||||
filedLoading: false,
|
||||
serverData: [],
|
||||
title: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getServerList();
|
||||
},
|
||||
mounted() {},
|
||||
watch: {},
|
||||
methods: {
|
||||
//获取字段映射
|
||||
getServerList() {
|
||||
this.filedLoading = true;
|
||||
serverlistApi()
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.serverData = res.data;
|
||||
|
||||
this.filedLoading = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
//新增
|
||||
handleAddClick() {
|
||||
this.title = "新增远端服务器";
|
||||
this.$refs.serverAddRef.display();
|
||||
},
|
||||
handleEditClick(data) {
|
||||
this.title = "修改";
|
||||
this.$refs.serverAddRef.display();
|
||||
this.$refs.serverAddRef.getdataform(data);
|
||||
},
|
||||
//删除数据
|
||||
handleDeleteClick(data) {
|
||||
console.log(data);
|
||||
this.$confirm(`确定要删除${data.name}远端服务器记录吗?`, "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
serveDelApi({ id: data.id }).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
type: "success",
|
||||
message: "删除成功",
|
||||
});
|
||||
this.getServerList(); //刷新
|
||||
} else {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
type: "error",
|
||||
message: res.errorMsg,
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.filedBoxServer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.page-body {
|
||||
width: calc(100% - 24px);
|
||||
height: calc(100% - 74px);
|
||||
padding: 12px;
|
||||
background: #eee;
|
||||
.zsbTableBox {
|
||||
margin-top: 8px;
|
||||
height: calc(100% - 38px);
|
||||
box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<div class="attributeList">
|
||||
<el-dialog
|
||||
class="attributesDialogBox"
|
||||
title="属性配置"
|
||||
:visible.sync="attributeshow"
|
||||
width="620px"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div class="attBox" v-loading="attLoading">
|
||||
<el-button
|
||||
class="addAtt"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="handleAddAttClick"
|
||||
>添加属性</el-button
|
||||
>
|
||||
<el-table
|
||||
:data="attributesData"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%"
|
||||
height="404px"
|
||||
>
|
||||
<el-table-column prop="field" label="字段名" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="fieldDesc" label="字段描述" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="unit" label="单位"> </el-table-column>
|
||||
<el-table-column label="操作" class-name="editClass">
|
||||
<template slot-scope="scope">
|
||||
<el-link
|
||||
type="danger"
|
||||
@click="handleDeleteClick(scope.row)"
|
||||
size="small"
|
||||
icon="el-icon-delete"
|
||||
>删除</el-link
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<el-dialog
|
||||
width="450px"
|
||||
title="新增"
|
||||
:visible.sync="innerVisible"
|
||||
append-to-body
|
||||
class="attaddDialog"
|
||||
>
|
||||
<el-form
|
||||
label-position="left"
|
||||
ref="formInfo"
|
||||
label-width="104px"
|
||||
:rules="rules"
|
||||
:model="formInfo"
|
||||
>
|
||||
<el-form-item label="属性名：">
|
||||
<el-select v-model="formInfo.name" @change="changeName">
|
||||
<el-option
|
||||
v-for="item in attOptions"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="属性描述：" prop="comment">
|
||||
<el-input v-model="formInfo.comment"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型：">
|
||||
<el-select v-model="formInfo.typeVal" @change="changeName">
|
||||
<el-option
|
||||
v-for="item in typeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitAddForm()">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<!-- <el-button @click="hide">取 消</el-button> -->
|
||||
<el-button type="primary" @click="submitForm()">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
modevtypepointAddApi,
|
||||
modevtypepointListApi,
|
||||
modevtypepointDeleteApi,
|
||||
colListApi,
|
||||
} from "@/utils/api/index";
|
||||
export default {
|
||||
props: ["title"],
|
||||
data() {
|
||||
return {
|
||||
rowData: "",
|
||||
attributeshow: false,
|
||||
innerVisible: false,
|
||||
attLoading: false,
|
||||
attributesData: [],
|
||||
attOptions: [],
|
||||
typeOptions: [
|
||||
{
|
||||
value: 1,
|
||||
label: "遥信",
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: "遥测",
|
||||
},
|
||||
],
|
||||
formInfo: {
|
||||
name: "",
|
||||
comment: "",
|
||||
typeVal: 2,
|
||||
},
|
||||
rules: {},
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
watch: {},
|
||||
methods: {
|
||||
changeName(val) {
|
||||
console.log(val);
|
||||
this.formInfo.name = val;
|
||||
console.log(this.attOptions.find((item) => item.name === val));
|
||||
this.formInfo.comment = this.attOptions.find(
|
||||
(item) => item.name === val
|
||||
).comment;
|
||||
},
|
||||
display(val) {
|
||||
//当前数据
|
||||
this.rowData = val;
|
||||
console.log(this.rowData);
|
||||
this.attributeshow = true;
|
||||
this.getListAll();
|
||||
},
|
||||
getListAll() {
|
||||
this.attLoading = true;
|
||||
modevtypepointListApi({
|
||||
modevtypeId: this.rowData.id,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
|
||||
this.attributesData = res.data;
|
||||
this.attLoading = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
//添加属性
|
||||
handleAddAttClick() {
|
||||
this.innerVisible = true;
|
||||
this.getcolList();
|
||||
},
|
||||
//获取colList
|
||||
getcolList() {
|
||||
colListApi({
|
||||
tableName: this.rowData.tableName,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.attOptions = res.data;
|
||||
this.formInfo.name = res.data[0].name;
|
||||
this.formInfo.comment = res.data[0].comment;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
//新增接口
|
||||
submitAddForm() {
|
||||
console.log(this.formInfo);
|
||||
modevtypepointAddApi({
|
||||
sensorId: this.rowData.id,
|
||||
field: this.formInfo.name,
|
||||
fieldDesc: this.formInfo.comment,
|
||||
type: this.formInfo.typeVal,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.innerVisible = false;
|
||||
this.getListAll();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
//删除
|
||||
handleDeleteClick(val) {
|
||||
console.log(val);
|
||||
this.$confirm("确定要删除记录吗?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
modevtypepointDeleteApi({ id: val.id }).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
type: "success",
|
||||
message: "删除成功",
|
||||
});
|
||||
this.getListAll(); //刷新
|
||||
} else {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
type: "error",
|
||||
message: res.errorMsg,
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
submitForm() {
|
||||
this.attributeshow = false;
|
||||
},
|
||||
hide() {
|
||||
this.attributeshow = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.attributeList {
|
||||
.attributesDialogBox {
|
||||
.attBox {
|
||||
.addAtt {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.attaddDialog {
|
||||
.el-select {
|
||||
width: 306px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,261 +0,0 @@
|
||||
<template>
|
||||
<div class="arresterbox">
|
||||
<h3>{{ pageCardTitle }}</h3>
|
||||
<div class="cardContent">
|
||||
<el-table
|
||||
:data="arresterData"
|
||||
height="100%"
|
||||
border
|
||||
highlight-current-row
|
||||
size="mini"
|
||||
@row-click="handleRowClick"
|
||||
>
|
||||
<el-table-column prop="id" label="id" width="50"> </el-table-column>
|
||||
<!-- <el-table-column prop="jgName" label="间隔"> </el-table-column> -->
|
||||
<el-table-column prop="zsbName" label="主设备名称"> </el-table-column>
|
||||
<el-table-column prop="name" label="名称"> </el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { monitoringListApi, getDetailApi } from "@/utils/api/index";
|
||||
|
||||
export default {
|
||||
name: "arrester",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
pageCardTitle: "避雷器",
|
||||
arresterData: [],
|
||||
// 趋势图信息
|
||||
tendencyChartTitle: "",
|
||||
legendData: [],
|
||||
xAxisData: [],
|
||||
seriesData: [],
|
||||
chartBackground: [
|
||||
"238,102,102",
|
||||
"145,204,117",
|
||||
"250,200,88",
|
||||
"115,192,222",
|
||||
"59,162,114",
|
||||
"252,132,82",
|
||||
"154,96,180",
|
||||
"234,124,204",
|
||||
"3,188,255",
|
||||
"241,113,175",
|
||||
"180,191,23",
|
||||
"151,225,137",
|
||||
"240,23,181",
|
||||
"125,20,22",
|
||||
],
|
||||
stime: "",
|
||||
eTime: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getarresterdata();
|
||||
const thirtyDaysAgo = new Date();
|
||||
const startDate = new Date(
|
||||
thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
|
||||
);
|
||||
startDate.setHours(0); // 0
|
||||
startDate.setMinutes(0); // 0
|
||||
startDate.setSeconds(0); // 0
|
||||
this.stime = this.$moment(startDate).format("YYYY-MM-DD HH:mm:ss");
|
||||
|
||||
const endDate = new Date();
|
||||
endDate.setHours(23); // 设置小时为23
|
||||
endDate.setMinutes(59); // 设置分钟为59
|
||||
endDate.setSeconds(59); // 设置秒数为59
|
||||
this.eTime = this.$moment(endDate).format("YYYY-MM-DD HH:mm:ss");
|
||||
console.log(this.stime, this.eTime);
|
||||
},
|
||||
methods: {
|
||||
getarresterdata() {
|
||||
monitoringListApi({
|
||||
typeId: 4,
|
||||
pageSize: 100,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.arresterData = res.data.content;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
//点击当前行
|
||||
handleRowClick(row) {
|
||||
console.log(row); // 这里会打印出被点击的行的数据
|
||||
|
||||
this.tendencyChartTitle = "";
|
||||
this.legendData = [];
|
||||
this.xAxisData = [];
|
||||
this.seriesData = [];
|
||||
this.tendencyChartTitle = row.name;
|
||||
getDetailApi({
|
||||
id: row.id,
|
||||
timeAsc: 1,
|
||||
startTime: this.stime,
|
||||
endTime: this.eTime,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
if (res.success) {
|
||||
console.log(res);
|
||||
let pointsData = res.data.points;
|
||||
this.xAxisData = res.data.content.map(
|
||||
(item) => item.acquisitionTime
|
||||
);
|
||||
|
||||
for (var i = 0; i < pointsData.length; i++) {
|
||||
console.log(pointsData[i]);
|
||||
console.log(pointsData[i].fieldDesc);
|
||||
this.seriesData.push({
|
||||
name: pointsData[i].fieldDesc,
|
||||
type: "line",
|
||||
data: pointsData[i].data,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
// 填充色渐变
|
||||
color: new this.$echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(" + this.chartBackground[i] + ",0.3)",
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(" + this.chartBackground[i] + ",0.1)",
|
||||
},
|
||||
{ offset: 1, color: "rgba(58, 167, 255,0)" },
|
||||
]
|
||||
),
|
||||
},
|
||||
},
|
||||
// 曲线柔和
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
this.legendData.push(pointsData[i].fieldDesc);
|
||||
}
|
||||
console.log(this.legendData);
|
||||
console.log(this.xAxisData);
|
||||
console.log(this.seriesData);
|
||||
this.$emit(
|
||||
"dataDispose",
|
||||
this.legendData,
|
||||
this.xAxisData,
|
||||
this.seriesData,
|
||||
this.tendencyChartTitle
|
||||
);
|
||||
// this.handleSearch();
|
||||
} else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.errorMsg,
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.arresterbox {
|
||||
height: 100%;
|
||||
h3 {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
padding: 0px 60px 0px 20px;
|
||||
box-sizing: border-box;
|
||||
color: #03bcff;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px !important;
|
||||
box-sizing: border-box;
|
||||
height: calc(100% - 52px);
|
||||
.el-table--mini .el-table__cell {
|
||||
padding: 3px 0;
|
||||
text-align: center;
|
||||
color: #03bcff;
|
||||
}
|
||||
.el-table td.el-table__cell,
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid #03bcff;
|
||||
}
|
||||
.el-table--border .el-table__cell {
|
||||
border-right: 1px solid #03bcff;
|
||||
}
|
||||
.el-table {
|
||||
border: 1px solid #03bcff;
|
||||
background-color: transparent; /* 设置为透明背景 */
|
||||
tr {
|
||||
background-color: transparent; /* 设置为透明背景 */
|
||||
}
|
||||
th.el-table__cell {
|
||||
background-color: transparent; /* 设置为透明背景 */
|
||||
}
|
||||
}
|
||||
.el-table__row,
|
||||
.el-table__body-wrapper {
|
||||
background-color: transparent; /* 确保行和单元格也是透明的 */
|
||||
}
|
||||
}
|
||||
.el-table::before {
|
||||
height: 0px;
|
||||
}
|
||||
.el-table--border::after,
|
||||
.el-table--group::after {
|
||||
width: 0px;
|
||||
}
|
||||
.el-table--border th.el-table__cell.gutter:last-of-type {
|
||||
//background: #03bcff !important;
|
||||
border-bottom: 1px solid #03bcff;
|
||||
}
|
||||
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: #296479;
|
||||
cursor: pointer;
|
||||
}
|
||||
.el-table__body tr.current-row > td.el-table__cell {
|
||||
background-color: #296479;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 6px !important;
|
||||
height: 6px !important;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #03bcff;
|
||||
/* 关键代码 */
|
||||
border-radius: 32px;
|
||||
}
|
||||
/* 滚动条轨道 */
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
border-radius: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,281 +0,0 @@
|
||||
<template>
|
||||
<div class="clampBox">
|
||||
<!-- <div class="tendencyChartText" @click="tendencyChartChange()">趋势图</div> -->
|
||||
<h3>{{ pageCardTitle }}</h3>
|
||||
<div class="cardContent">
|
||||
<el-table
|
||||
:data="clmpData"
|
||||
height="100%"
|
||||
border
|
||||
highlight-current-row
|
||||
size="mini"
|
||||
@row-click="handleRowClick"
|
||||
>
|
||||
<el-table-column prop="id" label="id" width="50"> </el-table-column>
|
||||
<!-- <el-table-column prop="jgName" label="间隔"> </el-table-column> -->
|
||||
<el-table-column prop="zsbName" label="主设备名称"> </el-table-column>
|
||||
<el-table-column prop="name" label="名称"> </el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { monitoringListApi, getDetailApi } from "@/utils/api/index";
|
||||
export default {
|
||||
name: "clamp",
|
||||
data() {
|
||||
return {
|
||||
pageCardTitle: "铁芯",
|
||||
clmpData: [],
|
||||
// 趋势图信息
|
||||
tendencyChartTitle: "",
|
||||
legendData: [],
|
||||
xAxisData: [],
|
||||
seriesData: [],
|
||||
chartBackground: [
|
||||
"238,102,102",
|
||||
"145,204,117",
|
||||
"250,200,88",
|
||||
"115,192,222",
|
||||
"59,162,114",
|
||||
"252,132,82",
|
||||
"154,96,180",
|
||||
"234,124,204",
|
||||
"3,188,255",
|
||||
"241,113,175",
|
||||
"180,191,23",
|
||||
"151,225,137",
|
||||
"240,23,181",
|
||||
"125,20,22",
|
||||
],
|
||||
stime: "",
|
||||
eTime: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getclampdata();
|
||||
const thirtyDaysAgo = new Date();
|
||||
const startDate = new Date(
|
||||
thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
|
||||
);
|
||||
startDate.setHours(0); // 0
|
||||
startDate.setMinutes(0); // 0
|
||||
startDate.setSeconds(0); // 0
|
||||
this.stime = this.$moment(startDate).format("YYYY-MM-DD HH:mm:ss");
|
||||
|
||||
const endDate = new Date();
|
||||
endDate.setHours(23); // 设置小时为23
|
||||
endDate.setMinutes(59); // 设置分钟为59
|
||||
endDate.setSeconds(59); // 设置秒数为59
|
||||
this.eTime = this.$moment(endDate).format("YYYY-MM-DD HH:mm:ss");
|
||||
console.log(this.stime, this.eTime);
|
||||
},
|
||||
methods: {
|
||||
getclampdata() {
|
||||
monitoringListApi({
|
||||
typeId: 2,
|
||||
pageSize: 100,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.clmpData = res.data.content;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
//点击当前行
|
||||
//点击当前行
|
||||
handleRowClick(row) {
|
||||
console.log(row); // 这里会打印出被点击的行的数据
|
||||
|
||||
this.tendencyChartTitle = "";
|
||||
this.legendData = [];
|
||||
this.xAxisData = [];
|
||||
this.seriesData = [];
|
||||
this.tendencyChartTitle = row.name;
|
||||
getDetailApi({
|
||||
id: row.id,
|
||||
timeAsc: 1,
|
||||
startTime: this.stime,
|
||||
endTime: this.eTime,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
if (res.success) {
|
||||
console.log(res);
|
||||
let pointsData = res.data.points;
|
||||
this.xAxisData = res.data.content.map(
|
||||
(item) => item.acquisitionTime
|
||||
);
|
||||
|
||||
for (var i = 0; i < pointsData.length; i++) {
|
||||
console.log(pointsData[i]);
|
||||
console.log(pointsData[i].fieldDesc);
|
||||
this.seriesData.push({
|
||||
name: pointsData[i].fieldDesc,
|
||||
type: "line",
|
||||
data: pointsData[i].data,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
// 填充色渐变
|
||||
color: new this.$echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(" + this.chartBackground[i] + ",0.3)",
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(" + this.chartBackground[i] + ",0.1)",
|
||||
},
|
||||
{ offset: 1, color: "rgba(58, 167, 255,0)" },
|
||||
]
|
||||
),
|
||||
},
|
||||
},
|
||||
// 曲线柔和
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
this.legendData.push(pointsData[i].fieldDesc);
|
||||
}
|
||||
console.log(this.legendData);
|
||||
console.log(this.xAxisData);
|
||||
console.log(this.seriesData);
|
||||
this.$emit(
|
||||
"dataDispose",
|
||||
this.legendData,
|
||||
this.xAxisData,
|
||||
this.seriesData,
|
||||
this.tendencyChartTitle
|
||||
);
|
||||
// this.handleSearch();
|
||||
} else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.errorMsg,
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.clampBox {
|
||||
background: url(../../../assets/card2Bg.png) no-repeat center;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
height: 280px;
|
||||
margin-bottom: 10px;
|
||||
h3 {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
padding: 0px 60px 0px 20px;
|
||||
box-sizing: border-box;
|
||||
color: #03bcff;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.tendencyChartText {
|
||||
writing-mode: vertical-lr;
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 15px;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
letter-spacing: 0px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #03bcff;
|
||||
}
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px !important;
|
||||
box-sizing: border-box;
|
||||
height: calc(100% - 52px);
|
||||
.el-table--mini .el-table__cell {
|
||||
padding: 3px 0;
|
||||
text-align: center;
|
||||
color: #03bcff;
|
||||
}
|
||||
.el-table td.el-table__cell,
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid #03bcff;
|
||||
}
|
||||
.el-table--border .el-table__cell {
|
||||
border-right: 1px solid #03bcff;
|
||||
}
|
||||
.el-table {
|
||||
border: 1px solid #03bcff;
|
||||
background-color: transparent; /* 设置为透明背景 */
|
||||
tr {
|
||||
background-color: transparent; /* 设置为透明背景 */
|
||||
}
|
||||
th.el-table__cell {
|
||||
background-color: transparent; /* 设置为透明背景 */
|
||||
}
|
||||
}
|
||||
.el-table__row,
|
||||
.el-table__body-wrapper {
|
||||
background-color: transparent; /* 确保行和单元格也是透明的 */
|
||||
}
|
||||
}
|
||||
.el-table::before {
|
||||
height: 0px;
|
||||
}
|
||||
.el-table--border::after,
|
||||
.el-table--group::after {
|
||||
width: 0px;
|
||||
}
|
||||
.el-table--border th.el-table__cell.gutter:last-of-type {
|
||||
//background: #03bcff !important;
|
||||
border-bottom: 1px solid #03bcff;
|
||||
}
|
||||
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: #296479;
|
||||
cursor: pointer;
|
||||
}
|
||||
.el-table__body tr.current-row > td.el-table__cell {
|
||||
background-color: #296479;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 6px !important;
|
||||
height: 6px !important;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #03bcff;
|
||||
/* 关键代码 */
|
||||
border-radius: 32px;
|
||||
}
|
||||
/* 滚动条轨道 */
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
border-radius: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,306 +0,0 @@
|
||||
<template>
|
||||
<div class="partialDischargesbox">
|
||||
<h3>
|
||||
<span>{{ pageCardTitle }}</span>
|
||||
<el-select
|
||||
v-model="partialValue"
|
||||
placeholder="请选择"
|
||||
@change="changePartial"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in partialOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</h3>
|
||||
<div class="cardContent">
|
||||
<el-table
|
||||
:data="partialDischargesData"
|
||||
height="100%"
|
||||
border
|
||||
highlight-current-row
|
||||
size="mini"
|
||||
@row-click="handleRowClick"
|
||||
>
|
||||
<el-table-column prop="id" label="id" width="50"> </el-table-column>
|
||||
<!-- <el-table-column prop="jgName" label="间隔"> </el-table-column> -->
|
||||
<el-table-column prop="zsbName" label="主设备名称"> </el-table-column>
|
||||
<el-table-column prop="name" label="名称"> </el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { monitoringListApi, getDetailApi } from "@/utils/api/index";
|
||||
|
||||
export default {
|
||||
name: "arrester",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
pageCardTitle: "局放",
|
||||
partialDischargesData: [],
|
||||
partialValue: 10,
|
||||
partialOptions: [
|
||||
{
|
||||
value: 10,
|
||||
label: "局部放电A相",
|
||||
},
|
||||
{
|
||||
value: 25,
|
||||
label: "局部放电B相",
|
||||
},
|
||||
{
|
||||
value: 26,
|
||||
label: "局部放电C相",
|
||||
},
|
||||
],
|
||||
// 趋势图信息
|
||||
tendencyChartTitle: "",
|
||||
legendData: [],
|
||||
xAxisData: [],
|
||||
seriesData: [],
|
||||
chartBackground: [
|
||||
"238,102,102",
|
||||
"145,204,117",
|
||||
"250,200,88",
|
||||
"115,192,222",
|
||||
"59,162,114",
|
||||
"252,132,82",
|
||||
"154,96,180",
|
||||
"234,124,204",
|
||||
"3,188,255",
|
||||
"241,113,175",
|
||||
"180,191,23",
|
||||
"151,225,137",
|
||||
"240,23,181",
|
||||
"125,20,22",
|
||||
],
|
||||
stime: "",
|
||||
eTime: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getarresterdata();
|
||||
const thirtyDaysAgo = new Date();
|
||||
const startDate = new Date(
|
||||
thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
|
||||
);
|
||||
startDate.setHours(0); // 0
|
||||
startDate.setMinutes(0); // 0
|
||||
startDate.setSeconds(0); // 0
|
||||
this.stime = this.$moment(startDate).format("YYYY-MM-DD HH:mm:ss");
|
||||
|
||||
const endDate = new Date();
|
||||
endDate.setHours(23); // 设置小时为23
|
||||
endDate.setMinutes(59); // 设置分钟为59
|
||||
endDate.setSeconds(59); // 设置秒数为59
|
||||
this.eTime = this.$moment(endDate).format("YYYY-MM-DD HH:mm:ss");
|
||||
console.log(this.stime, this.eTime);
|
||||
},
|
||||
methods: {
|
||||
changePartial(val) {
|
||||
console.log(val);
|
||||
this.partialValue = val;
|
||||
this.getarresterdata();
|
||||
},
|
||||
getarresterdata() {
|
||||
monitoringListApi({
|
||||
typeId: this.partialValue,
|
||||
pageSize: 100,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.partialDischargesData = res.data.content;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
//点击当前行
|
||||
handleRowClick(row) {
|
||||
console.log(row); // 这里会打印出被点击的行的数据
|
||||
|
||||
this.tendencyChartTitle = "";
|
||||
this.legendData = [];
|
||||
this.xAxisData = [];
|
||||
this.seriesData = [];
|
||||
this.tendencyChartTitle = row.name;
|
||||
getDetailApi({
|
||||
id: row.id,
|
||||
timeAsc: 1,
|
||||
startTime: this.stime,
|
||||
endTime: this.eTime,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
if (res.success) {
|
||||
console.log(res);
|
||||
let pointsData = res.data.points;
|
||||
this.xAxisData = res.data.content.map(
|
||||
(item) => item.acquisitionTime
|
||||
);
|
||||
|
||||
for (var i = 0; i < pointsData.length; i++) {
|
||||
console.log(pointsData[i]);
|
||||
console.log(pointsData[i].fieldDesc);
|
||||
this.seriesData.push({
|
||||
name: pointsData[i].fieldDesc,
|
||||
type: "line",
|
||||
data: pointsData[i].data,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
// 填充色渐变
|
||||
color: new this.$echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(" + this.chartBackground[i] + ",0.3)",
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(" + this.chartBackground[i] + ",0.1)",
|
||||
},
|
||||
{ offset: 1, color: "rgba(58, 167, 255,0)" },
|
||||
]
|
||||
),
|
||||
},
|
||||
},
|
||||
// 曲线柔和
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
this.legendData.push(pointsData[i].fieldDesc);
|
||||
}
|
||||
console.log(this.legendData);
|
||||
console.log(this.xAxisData);
|
||||
console.log(this.seriesData);
|
||||
this.$emit(
|
||||
"dataDispose",
|
||||
this.legendData,
|
||||
this.xAxisData,
|
||||
this.seriesData,
|
||||
this.tendencyChartTitle
|
||||
);
|
||||
// this.handleSearch();
|
||||
} else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.errorMsg,
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.partialDischargesbox {
|
||||
height: 100%;
|
||||
h3 {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
padding: 0px 60px 0px 20px;
|
||||
box-sizing: border-box;
|
||||
color: #03bcff;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
//justify-content: space-between;
|
||||
align-items: center;
|
||||
.el-select {
|
||||
margin-left: 12px;
|
||||
.el-input__inner {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #03bcff;
|
||||
color: #03bcff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px !important;
|
||||
box-sizing: border-box;
|
||||
height: 180px;
|
||||
.el-table--mini .el-table__cell {
|
||||
padding: 3px 0;
|
||||
text-align: center;
|
||||
color: #03bcff;
|
||||
}
|
||||
.el-table td.el-table__cell,
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid #03bcff;
|
||||
}
|
||||
.el-table--border .el-table__cell {
|
||||
border-right: 1px solid #03bcff;
|
||||
}
|
||||
.el-table {
|
||||
border: 1px solid #03bcff;
|
||||
background-color: transparent; /* 设置为透明背景 */
|
||||
tr {
|
||||
background-color: transparent; /* 设置为透明背景 */
|
||||
}
|
||||
th.el-table__cell {
|
||||
background-color: transparent; /* 设置为透明背景 */
|
||||
}
|
||||
}
|
||||
.el-table__row,
|
||||
.el-table__body-wrapper {
|
||||
background-color: transparent; /* 确保行和单元格也是透明的 */
|
||||
}
|
||||
}
|
||||
.el-table::before {
|
||||
height: 0px;
|
||||
}
|
||||
.el-table--border::after,
|
||||
.el-table--group::after {
|
||||
width: 0px;
|
||||
}
|
||||
.el-table--border th.el-table__cell.gutter:last-of-type {
|
||||
//background: #03bcff !important;
|
||||
border-bottom: 1px solid #03bcff;
|
||||
}
|
||||
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: #296479;
|
||||
cursor: pointer;
|
||||
}
|
||||
.el-table__body tr.current-row > td.el-table__cell {
|
||||
background-color: #296479;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 6px !important;
|
||||
height: 6px !important;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #03bcff;
|
||||
/* 关键代码 */
|
||||
border-radius: 32px;
|
||||
}
|
||||
/* 滚动条轨道 */
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
border-radius: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,269 +0,0 @@
|
||||
<template>
|
||||
<div class="sf6box">
|
||||
<h3>{{ pageCardTitle }}</h3>
|
||||
<div class="sfContent">
|
||||
<el-table
|
||||
:data="sf6Data"
|
||||
height="100%"
|
||||
border
|
||||
highlight-current-row
|
||||
size="mini"
|
||||
@row-click="handleRowClick"
|
||||
>
|
||||
<el-table-column prop="id" label="id" width="50"> </el-table-column>
|
||||
<!-- <el-table-column prop="jgName" label="间隔"> </el-table-column> -->
|
||||
<el-table-column prop="zsbName" label="主设备名称"> </el-table-column>
|
||||
<el-table-column prop="name" label="名称"> </el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { monitoringListApi, getDetailApi } from "@/utils/api/index";
|
||||
export default {
|
||||
name: "sf6",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
pageCardTitle: "SF6环境",
|
||||
devArr: "",
|
||||
sf6Data: [],
|
||||
// 趋势图信息
|
||||
tendencyChartTitle: "",
|
||||
legendData: [],
|
||||
xAxisData: [],
|
||||
seriesData: [],
|
||||
chartBackground: [
|
||||
"238,102,102",
|
||||
"145,204,117",
|
||||
"250,200,88",
|
||||
"115,192,222",
|
||||
"59,162,114",
|
||||
"252,132,82",
|
||||
"154,96,180",
|
||||
"234,124,204",
|
||||
"3,188,255",
|
||||
"241,113,175",
|
||||
"180,191,23",
|
||||
"151,225,137",
|
||||
"240,23,181",
|
||||
"125,20,22",
|
||||
],
|
||||
stime: "",
|
||||
eTime: "",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// 在组件挂载时尝试从localStorage加载数据
|
||||
this.getLocalStorage();
|
||||
},
|
||||
created() {
|
||||
this.getsf6data();
|
||||
const thirtyDaysAgo = new Date();
|
||||
const startDate = new Date(
|
||||
thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
|
||||
);
|
||||
startDate.setHours(0); // 0
|
||||
startDate.setMinutes(0); // 0
|
||||
startDate.setSeconds(0); // 0
|
||||
this.stime = this.$moment(startDate).format("YYYY-MM-DD HH:mm:ss");
|
||||
|
||||
const endDate = new Date();
|
||||
endDate.setHours(23); // 设置小时为23
|
||||
endDate.setMinutes(59); // 设置分钟为59
|
||||
endDate.setSeconds(59); // 设置秒数为59
|
||||
this.eTime = this.$moment(endDate).format("YYYY-MM-DD HH:mm:ss");
|
||||
console.log(this.stime, this.eTime);
|
||||
},
|
||||
methods: {
|
||||
//获取装置类型
|
||||
getLocalStorage() {
|
||||
this.devArr = JSON.parse(localStorage.getItem("devInfo"));
|
||||
console.log(this.devArr);
|
||||
},
|
||||
getsf6data() {
|
||||
monitoringListApi({
|
||||
typeId: 61,
|
||||
pageSize: 100,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.sf6Data = res.data.content;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
//点击当前行
|
||||
handleRowClick(row) {
|
||||
console.log(row); // 这里会打印出被点击的行的数据
|
||||
|
||||
this.tendencyChartTitle = "";
|
||||
this.legendData = [];
|
||||
this.xAxisData = [];
|
||||
this.seriesData = [];
|
||||
this.tendencyChartTitle = row.name;
|
||||
getDetailApi({
|
||||
id: row.id,
|
||||
timeAsc: 1,
|
||||
startTime: this.stime,
|
||||
endTime: this.eTime,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
if (res.success) {
|
||||
console.log(res);
|
||||
let pointsData = res.data.points;
|
||||
this.xAxisData = res.data.content.map(
|
||||
(item) => item.acquisitionTime
|
||||
);
|
||||
|
||||
for (var i = 0; i < pointsData.length; i++) {
|
||||
console.log(pointsData[i]);
|
||||
console.log(pointsData[i].fieldDesc);
|
||||
this.seriesData.push({
|
||||
name: pointsData[i].fieldDesc,
|
||||
type: "line",
|
||||
data: pointsData[i].data,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
// 填充色渐变
|
||||
color: new this.$echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(" + this.chartBackground[i] + ",0.3)",
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(" + this.chartBackground[i] + ",0.1)",
|
||||
},
|
||||
{ offset: 1, color: "rgba(58, 167, 255,0)" },
|
||||
]
|
||||
),
|
||||
},
|
||||
},
|
||||
// 曲线柔和
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
this.legendData.push(pointsData[i].fieldDesc);
|
||||
}
|
||||
console.log(this.legendData);
|
||||
console.log(this.xAxisData);
|
||||
console.log(this.seriesData);
|
||||
this.$emit(
|
||||
"dataDispose",
|
||||
this.legendData,
|
||||
this.xAxisData,
|
||||
this.seriesData,
|
||||
this.tendencyChartTitle
|
||||
);
|
||||
// this.handleSearch();
|
||||
} else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.errorMsg,
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.sf6box {
|
||||
height: 100%;
|
||||
h3 {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
padding: 0px 60px 0px 20px;
|
||||
box-sizing: border-box;
|
||||
color: #03bcff;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.sfContent {
|
||||
padding: 10px !important;
|
||||
box-sizing: border-box;
|
||||
height: calc(100% - 52px);
|
||||
.el-table--mini .el-table__cell {
|
||||
padding: 3px 0;
|
||||
text-align: center;
|
||||
color: #03bcff;
|
||||
}
|
||||
.el-table td.el-table__cell,
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid #03bcff;
|
||||
}
|
||||
.el-table--border .el-table__cell {
|
||||
border-right: 1px solid #03bcff;
|
||||
}
|
||||
.el-table {
|
||||
border: 1px solid #03bcff;
|
||||
background-color: transparent; /* 设置为透明背景 */
|
||||
tr {
|
||||
background-color: transparent; /* 设置为透明背景 */
|
||||
}
|
||||
th.el-table__cell {
|
||||
background-color: transparent; /* 设置为透明背景 */
|
||||
}
|
||||
}
|
||||
.el-table__row,
|
||||
.el-table__body-wrapper {
|
||||
background-color: transparent; /* 确保行和单元格也是透明的 */
|
||||
}
|
||||
}
|
||||
.el-table::before {
|
||||
height: 0px;
|
||||
}
|
||||
.el-table--border::after,
|
||||
.el-table--group::after {
|
||||
width: 0px;
|
||||
}
|
||||
.el-table--border th.el-table__cell.gutter:last-of-type {
|
||||
//background: #03bcff !important;
|
||||
border-bottom: 1px solid #03bcff;
|
||||
}
|
||||
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: #296479;
|
||||
cursor: pointer;
|
||||
}
|
||||
.el-table__body tr.current-row > td.el-table__cell {
|
||||
background-color: #296479;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 6px !important;
|
||||
height: 6px !important;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #03bcff;
|
||||
/* 关键代码 */
|
||||
border-radius: 32px;
|
||||
}
|
||||
/* 滚动条轨道 */
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
border-radius: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,333 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="告警详情"
|
||||
:visible.sync="dialogVisible"
|
||||
fullscreen
|
||||
:before-close="handleClose"
|
||||
class="warnDialog"
|
||||
>
|
||||
<div class="warnBox">
|
||||
<div class="search">
|
||||
<el-form :inline="true" :model="formdata" class="demo-form-inline">
|
||||
<!-- <el-form-item label="审批人">
|
||||
<el-input v-model="formdata.user" placeholder="审批人"></el-input>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="开始日期">
|
||||
<el-date-picker
|
||||
@change="changestartdate"
|
||||
v-model="formdata.starttime"
|
||||
:picker-options="pickerOptions"
|
||||
:clearable="false"
|
||||
type="date"
|
||||
placeholder="开始日期"
|
||||
:default-time="['00:00:00']"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束日期">
|
||||
<el-date-picker
|
||||
@change="changeenddate"
|
||||
v-model="formdata.endtime"
|
||||
:clearable="false"
|
||||
:picker-options="pickerOptions"
|
||||
type="date"
|
||||
:default-time="['23:59:59']"
|
||||
placeholder="结束日期"
|
||||
class="ml10"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-document"
|
||||
class="exportBtn"
|
||||
@click="exportWarn"
|
||||
>导出数据</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="warnTable">
|
||||
<el-table
|
||||
ref="restauranttable"
|
||||
:data="tableData"
|
||||
border
|
||||
height="calc(100% - 38px)"
|
||||
>
|
||||
<el-table-column align="center" prop="warnTime" label="报警时间">
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="zsbName" label="主设备名称">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="warnDesc"
|
||||
label="告警信息"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="scope.row.warnDesc"
|
||||
placement="top"
|
||||
>
|
||||
<span> {{ scope.row.warnDesc }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" prop="warnValue" label="当前值">
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="triggerDesc" label="触发条件">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" prop="threshold" label="告警阈值">
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="warnLevel" label="告警等级">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.warnLevel == 2"
|
||||
><el-tag type="danger">高</el-tag>
|
||||
</span>
|
||||
<span v-else-if="scope.row.warnLevel == 1">
|
||||
<el-tag type="warning">中</el-tag>
|
||||
</span>
|
||||
<span v-else-if="scope.row.warnLevel == 0">
|
||||
<el-tag type="info">低</el-tag>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pageNation">
|
||||
<el-pagination
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
:current-page="page"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="[20, 40, 100]"
|
||||
layout="sizes, prev, pager, next, jumper,total"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { warningListApi } from "@/utils/api/index";
|
||||
export default {
|
||||
name: "warnDialog",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
pickerOptions: {
|
||||
disabledDate(date) {
|
||||
return date.getTime() > Date.now(); // 禁用大于今天的日期
|
||||
},
|
||||
},
|
||||
dialogVisible: false,
|
||||
formdata: {},
|
||||
tableData: [],
|
||||
page: 1, // 当前页数
|
||||
pageSize: 20, // 每页数量
|
||||
total: 0, //总条数
|
||||
};
|
||||
},
|
||||
created() {
|
||||
const startDate = new Date(); // 获取当前时间
|
||||
startDate.setHours(0); // 设置小时为23
|
||||
startDate.setMinutes(0); // 设置分钟为59
|
||||
startDate.setSeconds(0); // 设置秒数为59
|
||||
this.$set(this.formdata, "starttime", startDate);
|
||||
console.log(this.formdata.starttime);
|
||||
const currentDate = new Date(); // 获取当前时间
|
||||
currentDate.setHours(23); // 设置小时为23
|
||||
currentDate.setMinutes(59); // 设置分钟为59
|
||||
currentDate.setSeconds(59); // 设置秒数为59
|
||||
this.$set(this.formdata, "endtime", currentDate);
|
||||
console.log("我是开始时间", this.formdata.starttime);
|
||||
console.log("我是结束时间", currentDate);
|
||||
},
|
||||
watch: {
|
||||
endtime(newVal) {
|
||||
if (newVal) {
|
||||
const date = new Date(newVal);
|
||||
date.setHours(23);
|
||||
date.setMinutes(59);
|
||||
date.setSeconds(59);
|
||||
this.formdata.endtime = date;
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
getwarnList(params) {
|
||||
warningListApi(params)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.tableData = res.data.content;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
changestartdate(val) {
|
||||
console.log(val);
|
||||
if (val == null) {
|
||||
console.log(new Date());
|
||||
const startDate = new Date();
|
||||
startDate.setHours(0); // 设置小时为23
|
||||
startDate.setMinutes(0); // 设置分钟为59
|
||||
startDate.setSeconds(0); // 设置秒数为59
|
||||
this.formdata.starttime = startDate;
|
||||
} else {
|
||||
this.formdata.starttime = val;
|
||||
}
|
||||
},
|
||||
//结束日期
|
||||
changeenddate(val) {
|
||||
if (val == null) {
|
||||
console.log(new Date());
|
||||
const endDate = new Date();
|
||||
endDate.setHours(23); // 设置小时为23
|
||||
endDate.setMinutes(59); // 设置分钟为59
|
||||
endDate.setSeconds(59); // 设置秒数为59
|
||||
this.formdata.endtime = endDate;
|
||||
console.log(this.formdata.endtime);
|
||||
} else {
|
||||
val.setHours(23); // 设置小时为23
|
||||
val.setMinutes(59); // 设置分钟为59
|
||||
val.setSeconds(59); // 设置秒数为59
|
||||
this.formdata.endtime = val;
|
||||
console.log(val);
|
||||
}
|
||||
},
|
||||
onSubmit() {
|
||||
console.log(this.formdata);
|
||||
//开始时间和结束时间
|
||||
this.formdata.starttime = this.$moment(this.formdata.starttime).format(
|
||||
"YYYY-MM-DD HH:mm:ss"
|
||||
);
|
||||
this.formdata.endtime = this.$moment(this.formdata.endtime).format(
|
||||
"YYYY-MM-DD HH:mm:ss"
|
||||
);
|
||||
let params = {};
|
||||
params.startTime = this.formdata.starttime;
|
||||
params.endTime = this.formdata.endtime;
|
||||
params.pageSize = this.pageSize;
|
||||
params.pageNum = this.page;
|
||||
console.log(params);
|
||||
this.getwarnList(params);
|
||||
},
|
||||
//点击分页
|
||||
handleCurrentChange(val) {
|
||||
this.page = val;
|
||||
this.tableData = [];
|
||||
let params = {};
|
||||
params.startTime = this.formdata.starttime;
|
||||
params.endTime = this.formdata.endtime;
|
||||
params.pageSize = this.pageSize;
|
||||
params.pageNum = this.page;
|
||||
console.log(params);
|
||||
this.getwarnList(params);
|
||||
},
|
||||
//每页条数
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
this.tableData = [];
|
||||
let params = {};
|
||||
params.startTime = this.formdata.starttime;
|
||||
params.endTime = this.formdata.endtime;
|
||||
params.pageSize = this.pageSize;
|
||||
params.pageNum = this.page;
|
||||
console.log(params);
|
||||
this.getwarnList(params);
|
||||
},
|
||||
display(data) {
|
||||
this.dialogVisible = true;
|
||||
this.getwarnList(data);
|
||||
},
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
//导出数据
|
||||
exportWarn() {
|
||||
this.formdata.starttime = this.$moment(this.formdata.starttime).format(
|
||||
"YYYY-MM-DD HH:mm:ss"
|
||||
);
|
||||
this.formdata.endtime = this.$moment(this.formdata.endtime).format(
|
||||
"YYYY-MM-DD HH:mm:ss"
|
||||
);
|
||||
window.location.href =
|
||||
"/cac-api/warning/export?" +
|
||||
"startTime=" +
|
||||
this.formdata.starttime +
|
||||
"&endTime=" +
|
||||
this.formdata.endtime;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.warnDialog {
|
||||
.el-dialog {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
.el-dialog__header {
|
||||
background-color: #337ab7;
|
||||
padding: 10px 20px;
|
||||
color: #fff;
|
||||
.el-dialog__title {
|
||||
color: #fff;
|
||||
}
|
||||
.el-dialog__headerbtn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
padding: 0;
|
||||
background: 0 0;
|
||||
border: none;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
font-size: 24px;
|
||||
.el-dialog__close {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-dialog__body {
|
||||
height: calc(100% - 84px);
|
||||
padding: 20px;
|
||||
.warnBox {
|
||||
height: 100%;
|
||||
.search {
|
||||
background-color: #fff;
|
||||
padding: 16px;
|
||||
height: auto;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 16px;
|
||||
.el-form {
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.warnTable {
|
||||
background-color: #fff;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
height: calc(100% - 114px);
|
||||
}
|
||||
.pageNation {
|
||||
margin-top: 6px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,334 +0,0 @@
|
||||
<template>
|
||||
<div class="warnmessageBox">
|
||||
<h3>
|
||||
<span class="arrows1">></span><span class="arrows2">></span>
|
||||
<span class="arrows3">></span> {{ pageCardTitle }}
|
||||
<span class="arrows3"><</span><span class="arrows2"><</span>
|
||||
<span class="arrows1"><</span>
|
||||
<el-button
|
||||
type="text"
|
||||
icon="el-icon-document"
|
||||
class="lookMore"
|
||||
@click="lookMore"
|
||||
>查看全部</el-button
|
||||
>
|
||||
</h3>
|
||||
<div class="cardContent">
|
||||
<!-- <el-table
|
||||
ref="restauranttable"
|
||||
:data="tableData"
|
||||
class="tableHi"
|
||||
height="154px"
|
||||
>
|
||||
<el-table-column align="center" prop="warnTime" label="报警时间">
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="zsbName" label="主设备名称">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="warnDesc"
|
||||
label="告警信息"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="scope.row.warnDesc"
|
||||
placement="top"
|
||||
>
|
||||
<span> {{ scope.row.warnDesc }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" prop="warnValue" label="当前值">
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="triggerDesc" label="触发条件">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" prop="threshold" label="告警阈值">
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="warnLevel" label="告警等级">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.warnLevel == 2">高 </span>
|
||||
<span v-else-if="scope.row.warnLevel == 1"> 中 </span>
|
||||
<span v-else-if="scope.row.warnLevel == 0"> 低 </span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table> -->
|
||||
<ul class="warntitle">
|
||||
<li>报警时间</li>
|
||||
<li>主设备名称</li>
|
||||
<li>告警信息</li>
|
||||
|
||||
<li>当前值</li>
|
||||
<li>触发条件</li>
|
||||
<li>告警阈值</li>
|
||||
<li>告警等级</li>
|
||||
</ul>
|
||||
<div class="marquee">
|
||||
<ul class="scrollUl" v-if="tableData.length !== 0">
|
||||
<li v-for="(item, index) in tableData" :key="index">
|
||||
<span>{{ item.warnTime }}</span>
|
||||
<span>{{ item.zsbName }}</span>
|
||||
<span>{{ item.warnDesc }}</span>
|
||||
<span>{{ item.warnValue }}</span>
|
||||
<span>{{ item.triggerDesc }}</span>
|
||||
<span>{{ item.threshold }}</span>
|
||||
<span>
|
||||
<span v-if="item.warnLevel == 2">高 </span>
|
||||
<span v-else-if="item.warnLevel == 1"> 中 </span>
|
||||
<span v-else-if="item.warnLevel == 0"> 低 </span></span
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-else class="empty">暂无告警</div>
|
||||
</div>
|
||||
</div>
|
||||
<warnDialog ref="warnRef"></warnDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { warningListApi } from "@/utils/api/index";
|
||||
import warnDialog from "./components/warnDialog.vue";
|
||||
|
||||
export default {
|
||||
name: "warnmessage",
|
||||
components: {
|
||||
warnDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageCardTitle: "告警/故障信息",
|
||||
tableData: [],
|
||||
starttime: "",
|
||||
endtime: "",
|
||||
params: {},
|
||||
isMoving: true,
|
||||
isDuplicated: true, // 用于判断是否添加复制的项
|
||||
};
|
||||
},
|
||||
created() {
|
||||
const startDate = new Date(); // 获取当前时间
|
||||
startDate.setHours(0); // 设置小时为23
|
||||
startDate.setMinutes(0); // 设置分钟为59
|
||||
startDate.setSeconds(0); // 设置秒数为59
|
||||
this.starttime = startDate;
|
||||
|
||||
const currentDate = new Date(); // 获取当前时间
|
||||
currentDate.setHours(23); // 设置小时为23
|
||||
currentDate.setMinutes(59); // 设置分钟为59
|
||||
currentDate.setSeconds(59); // 设置秒数为59
|
||||
this.endtime = currentDate;
|
||||
this.getwarnList();
|
||||
},
|
||||
created() {},
|
||||
|
||||
methods: {
|
||||
lookMore() {
|
||||
this.params.startTime = this.starttime;
|
||||
this.params.endTime = this.endtime;
|
||||
this.params.pageSize = 20;
|
||||
this.params.pageNum = 1;
|
||||
this.$refs.warnRef.display(this.params);
|
||||
},
|
||||
getwarnList() {
|
||||
this.starttime = this.$moment(this.starttime).format(
|
||||
"YYYY-MM-DD HH:mm:ss"
|
||||
);
|
||||
this.endtime = this.$moment(this.endtime).format("YYYY-MM-DD HH:mm:ss");
|
||||
|
||||
this.params.startTime = this.starttime;
|
||||
this.params.endTime = this.endtime;
|
||||
this.params.pageSize = 20;
|
||||
this.params.pageNum = 1;
|
||||
warningListApi(this.params)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.tableData = res.data.content;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.warnmessageBox {
|
||||
padding: 0px 10px;
|
||||
height: 100%;
|
||||
h3 {
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px dashed #fff;
|
||||
|
||||
/* 警告标题箭头 */
|
||||
.arrows3 {
|
||||
color: #fff;
|
||||
}
|
||||
.arrows2 {
|
||||
color: rgba(256, 256, 256, 0.5);
|
||||
}
|
||||
.arrows1 {
|
||||
color: rgba(256, 256, 256, 0.15);
|
||||
}
|
||||
.lookMore {
|
||||
margin-left: auto;
|
||||
color: #fff;
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
&:hover {
|
||||
color: #03bcff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cardContent {
|
||||
margin-top: 10px;
|
||||
height: calc(100% - 54px);
|
||||
|
||||
.warntitle {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
border-bottom: 1px solid #eee;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
li {
|
||||
list-style: none;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
&:first-child {
|
||||
width: 12%;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
width: 15%;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
width: 20%;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
width: 10%;
|
||||
}
|
||||
&:nth-child(5) {
|
||||
width: 8%;
|
||||
}
|
||||
&:nth-child(6) {
|
||||
width: 8%;
|
||||
}
|
||||
&:nth-child(7) {
|
||||
width: 8%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.marquee {
|
||||
height: calc(100% - 26px);
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
margin-top: 2px;
|
||||
width: 100%;
|
||||
|
||||
.scrollUl {
|
||||
animation: 10s scrollTop linear infinite; /* 根据需要调整动画时间和速度 */
|
||||
width: 100%;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
span {
|
||||
&:first-child {
|
||||
width: 12%;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
width: 15%;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
width: 20%;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
width: 10%;
|
||||
}
|
||||
&:nth-child(5) {
|
||||
width: 8%;
|
||||
}
|
||||
&:nth-child(6) {
|
||||
width: 8%;
|
||||
}
|
||||
&:nth-child(7) {
|
||||
width: 8%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.empty {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scrollTop {
|
||||
0% {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell {
|
||||
background-color: transparent;
|
||||
}
|
||||
.el-table thead {
|
||||
color: #fff;
|
||||
}
|
||||
.el-table {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
tr {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.el-table--small .el-table__cell {
|
||||
padding: 2px 0;
|
||||
}
|
||||
.el-table__empty-text {
|
||||
color: #fff;
|
||||
}
|
||||
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: rgba(255, 27, 27, 0.2);
|
||||
}
|
||||
.el-table::before {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-notification__content {
|
||||
text-align: left;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
@ -1,281 +0,0 @@
|
||||
<template>
|
||||
<div class="windingTemperatureBox">
|
||||
<!-- <div class="tendencyChartText" @click="tendencyChartChange()">趋势图</div> -->
|
||||
<h3>{{ pageCardTitle }}</h3>
|
||||
<div class="cardContent">
|
||||
<el-table
|
||||
:data="windData"
|
||||
height="100%"
|
||||
border
|
||||
highlight-current-row
|
||||
size="mini"
|
||||
@row-click="handleRowClick"
|
||||
>
|
||||
<el-table-column prop="id" label="id" width="50"> </el-table-column>
|
||||
<!-- <el-table-column prop="jgName" label="间隔"> </el-table-column> -->
|
||||
<el-table-column prop="zsbName" label="主设备名称"> </el-table-column>
|
||||
<el-table-column prop="name" label="名称"> </el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { monitoringListApi, getDetailApi } from "@/utils/api/index";
|
||||
export default {
|
||||
name: "windingTemperature",
|
||||
data() {
|
||||
return {
|
||||
pageCardTitle: "夹件",
|
||||
windData: [],
|
||||
// 趋势图信息
|
||||
tendencyChartTitle: "",
|
||||
legendData: [],
|
||||
xAxisData: [],
|
||||
seriesData: [],
|
||||
chartBackground: [
|
||||
"238,102,102",
|
||||
"145,204,117",
|
||||
"250,200,88",
|
||||
"115,192,222",
|
||||
"59,162,114",
|
||||
"252,132,82",
|
||||
"154,96,180",
|
||||
"234,124,204",
|
||||
"3,188,255",
|
||||
"241,113,175",
|
||||
"180,191,23",
|
||||
"151,225,137",
|
||||
"240,23,181",
|
||||
"125,20,22",
|
||||
],
|
||||
stime: "",
|
||||
eTime: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getwinddata();
|
||||
const thirtyDaysAgo = new Date();
|
||||
const startDate = new Date(
|
||||
thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
|
||||
);
|
||||
startDate.setHours(0); // 0
|
||||
startDate.setMinutes(0); // 0
|
||||
startDate.setSeconds(0); // 0
|
||||
this.stime = this.$moment(startDate).format("YYYY-MM-DD HH:mm:ss");
|
||||
|
||||
const endDate = new Date();
|
||||
endDate.setHours(23); // 设置小时为23
|
||||
endDate.setMinutes(59); // 设置分钟为59
|
||||
endDate.setSeconds(59); // 设置秒数为59
|
||||
this.eTime = this.$moment(endDate).format("YYYY-MM-DD HH:mm:ss");
|
||||
console.log(this.stime, this.eTime);
|
||||
},
|
||||
methods: {
|
||||
getwinddata() {
|
||||
monitoringListApi({
|
||||
typeId: 3,
|
||||
pageSize: 100,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.windData = res.data.content;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
//点击当前行
|
||||
//点击当前行
|
||||
handleRowClick(row) {
|
||||
console.log(row); // 这里会打印出被点击的行的数据
|
||||
|
||||
this.tendencyChartTitle = "";
|
||||
this.legendData = [];
|
||||
this.xAxisData = [];
|
||||
this.seriesData = [];
|
||||
this.tendencyChartTitle = row.name;
|
||||
getDetailApi({
|
||||
id: row.id,
|
||||
timeAsc: 1,
|
||||
startTime: this.stime,
|
||||
endTime: this.eTime,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
if (res.success) {
|
||||
console.log(res);
|
||||
let pointsData = res.data.points;
|
||||
this.xAxisData = res.data.content.map(
|
||||
(item) => item.acquisitionTime
|
||||
);
|
||||
|
||||
for (var i = 0; i < pointsData.length; i++) {
|
||||
console.log(pointsData[i]);
|
||||
console.log(pointsData[i].fieldDesc);
|
||||
this.seriesData.push({
|
||||
name: pointsData[i].fieldDesc,
|
||||
type: "line",
|
||||
data: pointsData[i].data,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
// 填充色渐变
|
||||
color: new this.$echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(" + this.chartBackground[i] + ",0.3)",
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(" + this.chartBackground[i] + ",0.1)",
|
||||
},
|
||||
{ offset: 1, color: "rgba(58, 167, 255,0)" },
|
||||
]
|
||||
),
|
||||
},
|
||||
},
|
||||
// 曲线柔和
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
this.legendData.push(pointsData[i].fieldDesc);
|
||||
}
|
||||
console.log(this.legendData);
|
||||
console.log(this.xAxisData);
|
||||
console.log(this.seriesData);
|
||||
this.$emit(
|
||||
"dataDispose",
|
||||
this.legendData,
|
||||
this.xAxisData,
|
||||
this.seriesData,
|
||||
this.tendencyChartTitle
|
||||
);
|
||||
// this.handleSearch();
|
||||
} else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.errorMsg,
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.windingTemperatureBox {
|
||||
background: url(../../../assets/card2Bg.png) no-repeat center;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
height: 280px;
|
||||
margin-bottom: 10px;
|
||||
h3 {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
padding: 0px 60px 0px 20px;
|
||||
box-sizing: border-box;
|
||||
color: #03bcff;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.tendencyChartText {
|
||||
writing-mode: vertical-lr;
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 15px;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
letter-spacing: 0px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #03bcff;
|
||||
}
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px !important;
|
||||
box-sizing: border-box;
|
||||
height: calc(100% - 52px);
|
||||
.el-table--mini .el-table__cell {
|
||||
padding: 3px 0;
|
||||
text-align: center;
|
||||
color: #03bcff;
|
||||
}
|
||||
.el-table td.el-table__cell,
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid #03bcff;
|
||||
}
|
||||
.el-table--border .el-table__cell {
|
||||
border-right: 1px solid #03bcff;
|
||||
}
|
||||
.el-table {
|
||||
border: 1px solid #03bcff;
|
||||
background-color: transparent; /* 设置为透明背景 */
|
||||
tr {
|
||||
background-color: transparent; /* 设置为透明背景 */
|
||||
}
|
||||
th.el-table__cell {
|
||||
background-color: transparent; /* 设置为透明背景 */
|
||||
}
|
||||
}
|
||||
.el-table__row,
|
||||
.el-table__body-wrapper {
|
||||
background-color: transparent; /* 确保行和单元格也是透明的 */
|
||||
}
|
||||
}
|
||||
.el-table::before {
|
||||
height: 0px;
|
||||
}
|
||||
.el-table--border::after,
|
||||
.el-table--group::after {
|
||||
width: 0px;
|
||||
}
|
||||
.el-table--border th.el-table__cell.gutter:last-of-type {
|
||||
//background: #03bcff !important;
|
||||
border-bottom: 1px solid #03bcff;
|
||||
}
|
||||
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: #296479;
|
||||
cursor: pointer;
|
||||
}
|
||||
.el-table__body tr.current-row > td.el-table__cell {
|
||||
background-color: #296479;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 6px !important;
|
||||
height: 6px !important;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #03bcff;
|
||||
/* 关键代码 */
|
||||
border-radius: 32px;
|
||||
}
|
||||
/* 滚动条轨道 */
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
border-radius: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue