323 lines
10 KiB
JavaScript
323 lines
10 KiB
JavaScript
|
||
var toolscomponent = {
|
||
template: `
|
||
<div>
|
||
<!-- 搜索区域 -->
|
||
<div style="display: flex; margin-top: 10px;">
|
||
<el-input v-model="input" placeholder="请输入井名" clearable style="width: 20%;"></el-input>
|
||
<el-checkbox style="background-color: #ECF5FF; margin-left: 5px;" v-model="checked" label="预警" border></el-checkbox>
|
||
<el-button style="margin-left: 5px;" id="bt_serach" plain type="primary" icon="el-icon-search" @click="getWell(input)">搜索</el-button>
|
||
</div>
|
||
|
||
<!-- 表格区域 -->
|
||
<div class="span">
|
||
<el-table
|
||
:data="tableData"
|
||
style="width: 100%; font-size: 14px"
|
||
:height="tHeight"
|
||
:cell-style="{ background: '#304156' }"
|
||
border
|
||
>
|
||
<el-table-column prop="wellNameSource" label="井号" :width="150" :show-overflow-tooltip="true"></el-table-column>
|
||
<el-table-column prop="welltime" label="建井时间" :width="170"></el-table-column>
|
||
<el-table-column prop="welloperator" label="操作用户" :width="150" :show-overflow-tooltip="true"></el-table-column>
|
||
<el-table-column prop="upload_user" label="上传用户" :width="150" :show-overflow-tooltip="true"></el-table-column>
|
||
<el-table-column label="操作" width="240">
|
||
<template slot-scope="scope">
|
||
<div style="flex: 1; display: inline-flex;">
|
||
<div v-if="!scope.row.tsw">
|
||
<svg style="bottom: 5px;" t="1683783351758" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2560" width="8" height="8">
|
||
<path d="M512 512m-469.333333 0a469.333333 469.333333 0 1 0 938.666666 0 469.333333 469.333333 0 1 0-938.666666 0Z" fill="#d81e06" p-id="2561"></path>
|
||
</svg>
|
||
</div>
|
||
<el-button @click="show_pdf(scope.row)" type="text" size="medium">报告明细</el-button>
|
||
<el-button @click="export_pdf(scope.row)" type="text" size="medium">导出</el-button>
|
||
<el-button @click="export_mess_pdf(scope.row)" type="text" size="medium">仪器报告导出</el-button>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
|
||
<!-- 分页 -->
|
||
<div class="block">
|
||
<span class="demonstration" style="background-color: #ECF5FF;"></span>
|
||
<el-pagination
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="currentPage"
|
||
:page-sizes="[50, 100, 200, 300]"
|
||
:page-size="pagesize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="recordTotal"
|
||
style="background-color: #ECF5FF;"
|
||
></el-pagination>
|
||
</div>
|
||
|
||
<!-- 仪器状态弹窗 -->
|
||
<el-dialog
|
||
title="仪器状态信息"
|
||
:visible.sync="pdf_visible"
|
||
:lock-scroll="false"
|
||
:append-to-body="true"
|
||
width="60%"
|
||
>
|
||
<div style="height: 450px; overflow: auto;">
|
||
|
||
<div v-if="tool_warning_data.length > 0">
|
||
<div>风险预警:</div>
|
||
|
||
|
||
|
||
|
||
<div v-for="item in tool_warning_data" :key="item.id">
|
||
<div style="display: flex; padding-top: 10px; align-items: center;">
|
||
<div
|
||
style="width: 100%;"
|
||
:style="{ color: item.flag === 1 ? 'red' : 'inherit' }"
|
||
>
|
||
<span style="font-weight: 500;">
|
||
<template v-if="item.flag === 0">
|
||
{{ item.series_num }} {{ item.instrument_id }} | 仪器正常
|
||
</template>
|
||
|
||
<template v-else>
|
||
{{ item.time }} | {{ item.series_num }} |
|
||
</template>
|
||
</span>
|
||
|
||
<template v-if="item.flag === 1">
|
||
<span style="margin-left: 6px;">
|
||
{{ item.err_level }} | {{ item.context }}
|
||
</span>
|
||
</template>
|
||
|
||
<el-button
|
||
v-if="item.series_num"
|
||
@click="openDetail(item)"
|
||
type="text"
|
||
size="medium"
|
||
style="margin-left: 12px; padding: 0 4px;"
|
||
>
|
||
详情
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<div v-if="tool_warning_data.length == 0">
|
||
<div>本口井仪器工作正常。</div>
|
||
</div>
|
||
<el-divider></el-divider>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
`,
|
||
data() {
|
||
// 获取当前屏幕的分辨率
|
||
let screenW = window.screen.width;
|
||
let screenH = window.innerHeight;
|
||
console.log("screen width:", screenW);
|
||
console.log("screen height:", screenH);
|
||
return {
|
||
tHeight: screenH - 192,
|
||
tableData: Array(0),
|
||
input: '',
|
||
currentPage: 1,
|
||
pagesize: 50,
|
||
recordTotal: 0,
|
||
pdf_visible: false,
|
||
tool_warning_data: [],
|
||
checked: false,
|
||
currentWellName: '' // 新增：存储当前查看的井名
|
||
};
|
||
},
|
||
mounted() {
|
||
var _this = this;
|
||
|
||
var objs;
|
||
axios.post('/deescloud/get_well_tool', {
|
||
opuser: localStorage.getItem("online_user"),
|
||
opuser_uuid: localStorage.getItem("uuid"),
|
||
index: this.$data.currentPage,
|
||
count: this.$data.pagesize
|
||
})
|
||
.then(function (response) {
|
||
console.log(response.data);
|
||
objs = response.data.data;
|
||
rcnt = response.data.total;
|
||
_this.$data.tableData = objs;
|
||
_this.$data.recordTotal = rcnt;
|
||
})
|
||
.catch(function (error) {
|
||
console.log(error);
|
||
});
|
||
},
|
||
methods: {
|
||
export_pdf(row) {
|
||
var _this = this;
|
||
|
||
axios.post('deescloud/get_tool_warning_pdf', {
|
||
opuser: localStorage.getItem("online_user"),
|
||
opuser_uuid: localStorage.getItem("uuid"),
|
||
wellname: row.wellNameSource
|
||
})
|
||
.then(function (response) {
|
||
console.log(response.data);
|
||
var fileid = response.data.fileId;
|
||
var downUrl = 'file/' + fileid;
|
||
downloadUrl(row.wellNameSource + "-仪器状态报告.pdf", downUrl);
|
||
})
|
||
.catch(function (error) {
|
||
console.log(error);
|
||
});
|
||
},
|
||
|
||
export_mess_pdf(row) {
|
||
var _this = this;
|
||
|
||
axios.post('deescloud/get_tool_mess_pdf', {
|
||
opuser: localStorage.getItem("online_user"),
|
||
opuser_uuid: localStorage.getItem("uuid"),
|
||
wellname: row.wellNameSource
|
||
})
|
||
.then(function (response) {
|
||
console.log(response.data);
|
||
var fileid = response.data.fileId;
|
||
var downUrl = 'file/' + fileid;
|
||
// downloadUrl(row.wellNameSource + "-仪器报告.pdf", downUrl);
|
||
})
|
||
.catch(function (error) {
|
||
console.log(error);
|
||
});
|
||
},
|
||
|
||
|
||
show_pdf(row) {
|
||
let _this = this;
|
||
// 存储当前井名
|
||
this.currentWellName = row.wellNameSource;
|
||
|
||
axios.post('/deescloud/get_tool_warning', {
|
||
opuser: localStorage.getItem("online_user"),
|
||
opuser_uuid: localStorage.getItem("uuid"),
|
||
wellname: row.wellNameSource
|
||
})
|
||
.then(function (response) {
|
||
console.log(response.data);
|
||
_this.$data.tool_warning_data = response.data.data;
|
||
_this.$data.pdf_visible = true;
|
||
})
|
||
.catch(function (error) {
|
||
console.log(error);
|
||
});
|
||
},
|
||
|
||
getWell(_search_name) {
|
||
document.getElementById("bt_serach").blur();
|
||
this.$data.currentPage = 1;
|
||
|
||
var _this = this;
|
||
var objs;
|
||
axios.post('/deescloud/get_well_tool', {
|
||
opuser: localStorage.getItem("online_user"),
|
||
opuser_uuid: localStorage.getItem("uuid"),
|
||
Wellname: _search_name,
|
||
if_warn: this.$data.checked,
|
||
index: this.$data.currentPage,
|
||
count: this.$data.pagesize
|
||
})
|
||
.then(function (response) {
|
||
console.log(response.data);
|
||
objs = response.data.data;
|
||
rcnt = response.data.total;
|
||
_this.$data.tableData = objs;
|
||
_this.$data.recordTotal = rcnt;
|
||
})
|
||
.catch(function (error) {
|
||
console.log(error);
|
||
});
|
||
},
|
||
|
||
handleSizeChange(val) {
|
||
this.$data.pagesize = val;
|
||
var _this = this;
|
||
|
||
var objs;
|
||
axios.post('/deescloud/get_well_tool', {
|
||
opuser: localStorage.getItem("online_user"),
|
||
opuser_uuid: localStorage.getItem("uuid"),
|
||
Wellname: this.$data.input,
|
||
if_warn: this.$data.checked,
|
||
index: this.$data.currentPage,
|
||
count: this.$data.pagesize
|
||
})
|
||
.then(function (response) {
|
||
console.log(response.data);
|
||
objs = response.data.data;
|
||
rcnt = response.data.total;
|
||
_this.$data.tableData = objs;
|
||
_this.$data.recordTotal = rcnt;
|
||
})
|
||
.catch(function (error) {
|
||
console.log(error);
|
||
});
|
||
},
|
||
|
||
handleCurrentChange(val) {
|
||
this.$data.currentPage = val;
|
||
var _this = this;
|
||
|
||
var objs;
|
||
axios.post('/deescloud/get_well_tool', {
|
||
opuser: localStorage.getItem("online_user"),
|
||
opuser_uuid: localStorage.getItem("uuid"),
|
||
Wellname: this.$data.input,
|
||
if_warn: this.$data.checked,
|
||
index: this.$data.currentPage,
|
||
count: this.$data.pagesize
|
||
})
|
||
.then(function (response) {
|
||
console.log(response.data);
|
||
objs = response.data.data;
|
||
rcnt = response.data.total;
|
||
_this.$data.tableData = objs;
|
||
_this.$data.recordTotal = rcnt;
|
||
})
|
||
.catch(function (error) {
|
||
console.log(error);
|
||
});
|
||
},
|
||
|
||
// 新增：打开详情页方法
|
||
// 新增：打开详情页方法
|
||
openDetail(item) {
|
||
// 使用当前井名和预警项ID构建详情页URL
|
||
const wellName = this.currentWellName; // 不要预先编码
|
||
// 使用预警ID或时间戳作为唯一标识
|
||
|
||
// 构建基础URL，参数留待URLSearchParams处理
|
||
const detailUrl = 'tool_detail.html';
|
||
|
||
// 使用URLSearchParams自动处理编码
|
||
const params = new URLSearchParams({
|
||
well: wellName,
|
||
id: item.opuser_uuid,
|
||
name : item.name,
|
||
series: item.series_num,
|
||
instrument: item.instrument_id,
|
||
flag:item.flag,
|
||
content: item.content || ''
|
||
});
|
||
|
||
// 完整URL
|
||
const fullUrl = `${detailUrl}?${params.toString()}`;
|
||
|
||
// 在新标签页打开详情页
|
||
window.open(fullUrl, '_blank');
|
||
}
|
||
}
|
||
}; |