<template>
|
<div v-if="analy" class="app-container">
|
<div class="filter-container">
|
<el-input v-model="listQuery.keyword" size="small" placeholder="请输入名称" clearable class="filter-item w-200" />
|
<!-- <el-date-picker v-model="queryForm.time" type="daterange" range-separator="至" start-placeholder="开始时间" class="filter-item w-300" size="small"
|
end-placeholder="结束时间" value-format="yyyy-MM-dd" /> -->
|
|
<!-- <el-date-picker v-model="listQuery.time" type="date" placeholder="选择日期" class="filter-item w-300" size="small"
|
value-format="yyyy-MM-dd">
|
</el-date-picker> -->
|
<el-button-group class="filter-item">
|
<el-button size="small" type="primary" icon="el-icon-search" @click="search">
|
搜索
|
</el-button>
|
<el-button size="small" type="primary" icon="el-icon-refresh" @click="refresh">
|
刷新
|
</el-button>
|
<el-button v-if="uadd=='Yes'" size="small" type="primary" icon="el-icon-plus" @click="add">
|
新增
|
</el-button>
|
</el-button-group>
|
|
</div>
|
|
<el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit height="100%"
|
class="table-container" highlight-current-row>
|
<el-table-column fixed label="序号" width="80">
|
<template slot-scope="scope">
|
{{ scope.row.id }}
|
</template>
|
</el-table-column>
|
|
<el-table-column label="储罐名称" width="170">
|
<template slot-scope="scope">
|
{{ scope.row.tankname }}
|
</template>
|
</el-table-column>
|
<el-table-column label="公司名称" width="170">
|
<template slot-scope="scope">
|
{{ scope.row.companyname }}
|
</template>
|
</el-table-column>
|
<el-table-column label="监测终端" width="350">
|
<template slot-scope="scope">
|
{{ scope.row.monitor }}
|
</template>
|
</el-table-column>
|
|
<el-table-column label="查看" width="60">
|
<template slot-scope="scope">
|
<img src="../../assets/images/look.png" alt="" style="width: 30px;height: 30px;" @click="analyze(scope)">
|
</template>
|
|
</el-table-column>
|
<el-table-column label="添加时间">
|
<template slot-scope="scope">
|
{{ scope.row.addtime }}
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="200" v-if="uupdate=='Yes' || udelete=='Yes'">
|
<template slot-scope="scope">
|
<el-button-group>
|
<el-button v-show="uupdate=='Yes'" type="primary" icon="el-icon-edit" size="mini" @click="edit(scope)">
|
修改
|
</el-button>
|
<el-button v-show="udelete=='Yes'" type="danger" icon="el-icon-delete" size="mini" @click="del(scope)">
|
删除
|
</el-button>
|
</el-button-group>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<pagination v-show="total > 0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size"
|
@pagination="fetchData" />
|
|
|
<el-dialog :visible.sync="dialogVisible" :title="dialogType === 'modify' ? '修改' : '新增'">
|
<el-form :ref="temp" :model="temp" label-width="120px" label-position="right" :rules="rules">
|
|
<el-form-item label="储罐名称" prop="tankname">
|
<el-input v-model="temp.tankname
|
" placeholder="请输入储罐名称" />
|
</el-form-item>
|
<el-form-item label="监测终端1" prop="monitor1">
|
<el-select style="width: 100%;" v-model="temp.monitor1" filterable remote placeholder="请选择设备1"
|
:remote-method="searchMethod1" :loading="searchloading" @change="handleChange">
|
<el-option v-for="item in options1" :key="item.tagid" :label="item.tagid" :value="item.tagid" >
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="监测终端2">
|
<el-select style="width: 100%;" v-model="temp.monitor2" filterable remote placeholder="请选择设备2"
|
:remote-method="searchMethod2" :loading="searchloading" @change="handleChange">
|
<el-option v-for="item in options2" :key="item.tagid" :label="item.tagid" :value="item.tagid">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="监测终端3">
|
<el-select style="width: 100%;" v-model="temp.monitor3" filterable remote placeholder="请选择设备3"
|
:remote-method="searchMethod3" :loading="searchloading" @change="handleChange">
|
<el-option v-for="item in options3" :key="item.tagid" :label="item.tagid" :value="item.tagid">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="监测终端4">
|
<el-select style="width: 100%;" v-model="temp.monitor4" filterable remote placeholder="请选择设备4"
|
:remote-method="searchMethod4" :loading="searchloading" @change="handleChange">
|
<el-option v-for="item in options4" :key="item.tagid" :label="item.tagid" :value="item.tagid">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="监测终端5">
|
<el-select style="width: 100%;" v-model="temp.monitor5" filterable remote placeholder="请选择设备5"
|
:remote-method="searchMethod5" :loading="searchloading" @change="handleChange">
|
<el-option v-for="item in options5" :key="item.tagid" :label="item.tagid" :value="item.tagid">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="监测终端6">
|
<el-select style="width: 100%;" v-model="temp.monitor6" filterable remote placeholder="请选择设备6"
|
:remote-method="searchMethod6" :loading="searchloading" @change="handleChange">
|
<el-option v-for="item in options6" :key="item.tagid" :label="item.tagid" :value="item.tagid">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="监测终端7">
|
<el-select style="width: 100%;" v-model="temp.monitor7" filterable remote placeholder="请选择设备7"
|
:remote-method="searchMethod7" :loading="searchloading" @change="handleChange">
|
<el-option v-for="item in options7" :key="item.tagid" :label="item.tagid" :value="item.tagid">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="监测终端8">
|
<el-select style="width: 100%;" v-model="temp.monitor8" filterable remote placeholder="请选择设备8"
|
:remote-method="searchMethod8" :loading="searchloading" @change="handleChange">
|
<el-option v-for="item in options8" :key="item.tagid" :label="item.tagid" :value="item.tagid">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<div class="text-right">
|
<el-button type="danger" @click="dialogVisible = false">
|
取消
|
</el-button>
|
<el-button type="primary" @click="submit(temp)">
|
确定
|
</el-button>
|
</div>
|
</el-dialog>
|
|
</div>
|
<div v-else class="app-container">
|
<div style="margin-bottom: 30px;">
|
|
<el-button style="position: absolute; right: 50px;" type="primary" @click="fanhui">返回</el-button>
|
|
|
</div>
|
|
<BarChart :chartData="chartConfig" :colors="chartColors"/>
|
|
|
</div>
|
</template>
|
|
<script>
|
|
import { formatTime1 } from "@/utils/index.js"; //日期格式转换
|
import BarChart from './components/BarChart.vue';
|
import Pagination from '@/components/Pagination'
|
import { getTbTank, addorupTbTank, searchdevice,addSystemOperationLog,delTbTank,handlechart2,searchTbTank } from '@/api/tank'
|
import { deepClone } from '@/utils'
|
const _temp = {
|
id: '',
|
companyname:localStorage.getItem('username') || '',
|
tankname: '',
|
monitor:'',
|
monitor1: '',
|
monitor2: '',
|
monitor3: '',
|
monitor4: '',
|
monitor5: '',
|
monitor6: '',
|
monitor7: '',
|
monitor8: ''
|
}
|
// const lineChartData = {
|
// newVisitis: {
|
// ed: [],
|
// nd: [],
|
// hd: [],
|
// x: [],
|
|
// },
|
|
// };
|
export default {
|
components: {
|
BarChart,
|
Pagination
|
},
|
data() {
|
return {
|
rules: {
|
tankname: [
|
{ required: true, message: '请输入储罐名称', trigger: 'blur' }
|
],
|
monitor1: [
|
{ required: true, message: '请选择监测终端', trigger: 'change' }
|
]
|
},
|
chartConfig: {
|
// legendData: ['Forest', 'Steppe', 'Desert', 'Wetland'],
|
legendData: ['东位移', '北位移', '天位移'],
|
xAxisData: [],
|
seriesData: [
|
{
|
name: '东位移',
|
data: [],
|
},
|
{
|
name: '北位移',
|
data: [],
|
},
|
{
|
name: '天位移',
|
data: [],
|
}
|
],
|
|
position: 'insideBottom',
|
distance: 15,
|
align: 'left',
|
verticalAlign: 'middle',
|
rotate: 90,
|
},
|
chartColors: ['#074cad', '#91cc75', '#fac858', '#ee6666'], // 自定义颜色数组
|
temp: Object.assign({}, _temp),
|
yearprimary: 'success',
|
oneprimary: 'primary',
|
twoprimary: 'primary',
|
threeprimary: 'primary',
|
lastyearprimary: 'primary',
|
nextyearprimary: 'primary',
|
last: true,
|
next: false,
|
yeardata: 0,
|
anchorname: '',
|
tagid: '',
|
queryForm: {
|
time: '',
|
tagid: ''
|
},
|
uadd:'',
|
udelete:'',
|
uupdate:'',
|
searchloading: false,
|
timeExport: '',
|
// lineChartData: lineChartData.newVisitis,
|
analy: true,
|
total: 0,
|
list: [],
|
ForwardData: [],
|
listLoading: true,
|
listQuery: {
|
username: localStorage.getItem('username') || '',
|
current: 1,
|
size: 20,
|
keyword: undefined,
|
time: undefined,
|
},
|
uploadUrl: '',
|
options1: [],
|
options2: [],
|
options3: [],
|
options4: [],
|
options5: [],
|
options6: [],
|
options7: [],
|
options8: [],
|
dialogVisible: false,
|
dialogType: 'create',
|
loading: false
|
}
|
},
|
created() {
|
this.fetchData()
|
},
|
methods: {
|
handleChange() {
|
this.$forceUpdate()
|
},
|
fanhui() {
|
this.analy = true
|
},
|
searchMethod1(query) {
|
if (query !== '') {
|
this.loading = true;
|
var params = { query: query,username: localStorage.getItem('username')}
|
searchdevice(params).then(response => {
|
this.options1 = response.data.map(item => ({
|
tagid: item.tagid // 确保数据源中有 tagid 字段
|
}));
|
this.loading = false;
|
|
})
|
|
|
} else {
|
this.options1 = [];
|
}
|
},
|
searchMethod2(query) {
|
if (query !== '') {
|
this.loading = true;
|
var params = { query: query,username: localStorage.getItem('username')}
|
searchdevice(params).then(response => {
|
this.options2 = response.data;
|
this.loading = false;
|
})
|
} else {
|
this.options2 = [];
|
}
|
},
|
searchMethod3(query) {
|
if (query !== '') {
|
this.loading = true;
|
var params = { query: query,username: localStorage.getItem('username')}
|
searchdevice(params).then(response => {
|
this.options3 = response.data;
|
this.loading = false;
|
})
|
} else {
|
this.options3 = [];
|
}
|
},
|
searchMethod4(query) {
|
if (query !== '') {
|
this.loading = true;
|
var params = { query: query,username: localStorage.getItem('username')}
|
searchdevice(params).then(response => {
|
this.options4 = response.data;
|
this.loading = false;
|
})
|
} else {
|
this.options4 = [];
|
}
|
},
|
searchMethod5(query) {
|
if (query !== '') {
|
this.loading = true;
|
var params = { query: query,username: localStorage.getItem('username')}
|
searchdevice(params).then(response => {
|
this.options5 = response.data;
|
this.loading = false;
|
})
|
} else {
|
this.options5 = [];
|
}
|
},
|
searchMethod6(query) {
|
if (query !== '') {
|
this.loading = true;
|
var params = { query: query,username: localStorage.getItem('username')}
|
searchdevice(params).then(response => {
|
this.options6 = response.data;
|
this.loading = false;
|
})
|
} else {
|
this.options6 = [];
|
}
|
},
|
searchMethod7(query) {
|
if (query !== '') {
|
this.loading = true;
|
var params = { query: query,username: localStorage.getItem('username')}
|
searchdevice(params).then(response => {
|
this.options7 = response.data;
|
this.loading = false;
|
})
|
} else {
|
this.options7 = [];
|
}
|
},
|
searchMethod8(query) {
|
if (query !== '') {
|
this.loading = true;
|
var params = { username: localStorage.getItem('username'),query: query}
|
searchdevice(params).then(response => {
|
this.options8 = response.data;
|
this.loading = false;
|
})
|
} else {
|
this.options8 = [];
|
}
|
},
|
|
analyze(scope) {
|
this.chartConfig.xAxisData = scope.row.monitor.split(",")
|
this.tagid = scope.row.tagid
|
// for (let index = 0; index < scope.row.monitor.split(",").length; index++) {
|
// const element = array[index];
|
const params = { username: localStorage.getItem('username') || '', tagid: scope.row.monitor };
|
handlechart2(params).then(response => {
|
this.chartConfig.seriesData[0].data=response.data.ed
|
this.chartConfig.seriesData[1].data=response.data.nd
|
this.chartConfig.seriesData[2].data=response.data.hd
|
// this.lineChartData = response.data
|
this.analy = false
|
})
|
// }
|
|
},
|
resetTemp() {
|
this.temp = Object.assign({}, _temp)
|
},
|
add() {
|
this.resetTemp()
|
this.dialogVisible = true
|
this.dialogType = 'create'
|
// this.$nextTick(() => {
|
// this.$refs['dataForm'].clearValidate()
|
// })
|
},
|
edit(scope) {
|
this.resetTemp()
|
this.dialogVisible = true
|
this.dialogType = 'modify'
|
this.temp = deepClone(scope.row)
|
if (scope.row.monitor.split(",").length==1) {
|
this.temp.monitor1 =scope.row.monitor.split(",")[0]
|
}
|
if (scope.row.monitor.split(",").length==2) {
|
this.temp.monitor1 =scope.row.monitor.split(",")[0]
|
this.temp.monitor2 =scope.row.monitor.split(",")[1]
|
|
}
|
if (scope.row.monitor.split(",").length==3) {
|
this.temp.monitor1 =scope.row.monitor.split(",")[0]
|
this.temp.monitor2 =scope.row.monitor.split(",")[1]
|
this.temp.monitor3 =scope.row.monitor.split(",")[2]
|
}
|
if (scope.row.monitor.split(",").length==4) {
|
this.temp.monitor1 =scope.row.monitor.split(",")[0]
|
this.temp.monitor2 =scope.row.monitor.split(",")[1]
|
this.temp.monitor3 =scope.row.monitor.split(",")[2]
|
this.temp.monitor4 =scope.row.monitor.split(",")[3]
|
}
|
if (scope.row.monitor.split(",").length==5) {
|
this.temp.monitor1 =scope.row.monitor.split(",")[0]
|
this.temp.monitor2 =scope.row.monitor.split(",")[1]
|
this.temp.monitor3 =scope.row.monitor.split(",")[2]
|
this.temp.monitor4 =scope.row.monitor.split(",")[3]
|
this.temp.monitor5 =scope.row.monitor.split(",")[4]
|
}
|
if (scope.row.monitor.split(",").length==6) {
|
this.temp.monitor1 =scope.row.monitor.split(",")[0]
|
this.temp.monitor2 =scope.row.monitor.split(",")[1]
|
this.temp.monitor3 =scope.row.monitor.split(",")[2]
|
this.temp.monitor4 =scope.row.monitor.split(",")[3]
|
this.temp.monitor5 =scope.row.monitor.split(",")[4]
|
this.temp.monitor6 =scope.row.monitor.split(",")[5]
|
}
|
if (scope.row.monitor.split(",").length==7) {
|
this.temp.monitor1 =scope.row.monitor.split(",")[0]
|
this.temp.monitor2 =scope.row.monitor.split(",")[1]
|
this.temp.monitor3 =scope.row.monitor.split(",")[2]
|
this.temp.monitor4 =scope.row.monitor.split(",")[3]
|
this.temp.monitor5 =scope.row.monitor.split(",")[4]
|
this.temp.monitor6 =scope.row.monitor.split(",")[5]
|
this.temp.monitor7 =scope.row.monitor.split(",")[6]
|
}
|
if (scope.row.monitor.split(",").length==8) {
|
this.temp.monitor1 =scope.row.monitor.split(",")[0]
|
this.temp.monitor2 =scope.row.monitor.split(",")[1]
|
this.temp.monitor3 =scope.row.monitor.split(",")[2]
|
this.temp.monitor4 =scope.row.monitor.split(",")[3]
|
this.temp.monitor5 =scope.row.monitor.split(",")[4]
|
this.temp.monitor6 =scope.row.monitor.split(",")[5]
|
this.temp.monitor7 =scope.row.monitor.split(",")[6]
|
this.temp.monitor8 =scope.row.monitor.split(",")[7]
|
}
|
},
|
// 删除
|
del(scope) {
|
this.$confirm('确认删除该条数据吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
setTimeout(() => {
|
const params = { id: scope.row.id };
|
this.list.splice(scope.$index, 1)
|
delTbTank(params).then(response => {
|
this.temp.adminname = localStorage.getItem('username') || '';
|
const params = { name: this.temp.adminname, content: '删除了一个储罐，该名称为：'+scope.row.tankname };
|
addSystemOperationLog(params).then(response => {
|
|
})
|
this.$message({
|
message: '删除成功',
|
type: 'success'
|
})
|
this.fetchData()
|
})
|
}, 300)
|
})
|
},
|
// 搜索
|
search() {
|
this.listLoading = true
|
searchTbTank(this.listQuery).then(response => {
|
if (response.data!=null) {
|
this.list = response.data.records
|
this.total = response.data.total
|
}else{
|
this.$message({
|
message: '未搜索到数据',
|
type: 'error'
|
})
|
}
|
|
this.listLoading = false
|
})
|
},
|
refresh() {
|
this.listQuery = {
|
username: localStorage.getItem('username') || '',
|
current: 1,
|
size: 20,
|
time: undefined,
|
keyword: undefined
|
}
|
this.fetchData()
|
},
|
// 分页数据
|
fetchData() {
|
this.uadd = localStorage.getItem('uadd') || '';
|
this.udelete = localStorage.getItem('udelete') || '';
|
this.uupdate = localStorage.getItem('uupdate') || '';
|
this.listLoading = true
|
getTbTank(this.listQuery).then(response => {
|
this.list = response.data.records
|
this.total = response.data.total
|
this.listLoading = false
|
})
|
},
|
submit(formName) {
|
if (this.loading) {
|
return
|
}
|
this.temp.tagid = this.temp.tagid
|
if (this.temp.monitor1!=undefined) {
|
this.temp.monitor=this.temp.monitor1
|
}
|
if (this.temp.monitor2!='' && this.temp.monitor2!=undefined) {
|
this.temp.monitor= this.temp.monitor+","+this.temp.monitor2
|
}
|
if (this.temp.monitor3!=''&& this.temp.monitor3!=undefined) {
|
this.temp.monitor=this.temp.monitor+","+this.temp.monitor3
|
}
|
if (this.temp.monitor4!=''&& this.temp.monitor4!=undefined) {
|
this.temp.monitor=this.temp.monitor+","+this.temp.monitor4
|
}
|
if (this.temp.monitor5!=''&& this.temp.monitor5!=undefined) {
|
this.temp.monitor=this.temp.monitor+","+this.temp.monitor5
|
}
|
if (this.temp.monitor6!=''&& this.temp.monitor6!=undefined) {
|
this.temp.monitor=this.temp.monitor+","+this.temp.monitor6
|
}
|
if (this.temp.monitor7!=''&&this.temp.monitor7!=undefined) {
|
this.temp.monitor=this.temp.monitor+","+this.temp.monitor7
|
}
|
if (this.temp.monitor8!=''&& this.temp.monitor8!=undefined) {
|
this.temp.monitor=this.temp.monitor+","+this.temp.monitor8
|
}
|
// this.temp.monitor.renderToString
|
this.$refs[this.temp].validate((valid) => {
|
if (valid) {
|
this.loading = true
|
addorupTbTank(this.temp).then((response) => {
|
if (response.data=='-1') {
|
this.$message({
|
message: '提交失败，请检查名称是否重复',
|
type: 'error'
|
})
|
console.log('error submit!!');
|
return false;
|
}else{
|
if (this.temp.id == "") {
|
this.temp.adminname = localStorage.getItem('username') || '';
|
const params = { name: this.temp.adminname, content: '新增了一个储罐，该名称为：' + this.temp.tankname };
|
addSystemOperationLog(params).then(response => {
|
|
})
|
} else {
|
this.temp.adminname = localStorage.getItem('username') || '';
|
const params = { name: this.temp.adminname, content: '修改了一个储罐，该名称为：' + this.temp.tankname };
|
addSystemOperationLog(params).then(response => {
|
|
})
|
}
|
this.fetchData()
|
setTimeout(() => {
|
this.$message({
|
message: '提交成功',
|
type: 'success'
|
})
|
this.dialogVisible = false
|
this.loading = false
|
}, 300)
|
}
|
|
})
|
// alert('submit!');
|
} else {
|
this.$message({
|
message: '提交失败，请检查表单必填项是否为空',
|
type: 'error'
|
})
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
|
|
}
|
|
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.el-upload {
|
border: 1px dashed #d9d9d9 !important;
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
|
.el-icon-plus.avatar-uploader-icon {
|
border: 1px dashed #d9d9d9 !important;
|
border-radius: 6px;
|
font-size: 28px;
|
color: #8c939d;
|
width: 128px;
|
height: 128px;
|
line-height: 128px;
|
text-align: center;
|
}
|
}
|
|
.el-table .el-table__body tr:hover {
|
background-color: transparent !important;
|
/* 你想要的背景色 */
|
color: #000 !important;
|
}
|
|
.el-table__body {
|
tr:hover>td {
|
background-color: transparent !important;
|
/* 你想要的背景色 */
|
color: #000 !important;
|
}
|
}
|
|
|
.avatar-uploader {
|
height: 128px;
|
|
img {
|
width: 128px;
|
height: 128px;
|
}
|
}
|
</style>
|
