344 lines
9.8 KiB
JavaScript
344 lines
9.8 KiB
JavaScript
//组件
|
||
var toolscomponent_en = {
|
||
template:`
|
||
<div>
|
||
<div style="display: flex;margin-top: 10px;">
|
||
<el-input v-model="input" placeholder="input well name" clearable style="width: 20%;"></el-input>
|
||
<el-checkbox style="background-color: #ECF5FF;margin-left: 5px;"v-model="checked" label="Warning" border></el-checkbox>
|
||
<el-button style="margin-left: 5px;" id ="bt_serach" plain type="primary" icon="el-icon-search" @click="getWell(input)">Search</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="Well Name"
|
||
:width="150"
|
||
:show-overflow-tooltip="true">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="welltime"
|
||
label="Upload Time"
|
||
:width="170">
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
prop="welloperator"
|
||
label="User"
|
||
:width="150"
|
||
:show-overflow-tooltip="true">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="upload_user"
|
||
label="Upload User"
|
||
:width="150"
|
||
:show-overflow-tooltip="true">
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="Operation"
|
||
width="160">
|
||
<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">Report Detail</el-button>
|
||
<el-button @click="export_pdf(scope.row)" type="text" size="medium">Export</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="Instrument Status Message"
|
||
: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>Risk warning:</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 }} | Normal
|
||
</template>
|
||
|
||
|
||
</span>
|
||
|
||
<template v-if="item.flag === 1">
|
||
<span style="margin-left: 6px;">
|
||
{{ item.time }} | {{ 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;"
|
||
>
|
||
Details
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<div v-if="tool_warning_data.length == 0">
|
||
<div>The instruments in this well are working normally</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_en',{
|
||
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+"_Instrument status report.pdf",downUrl);
|
||
})
|
||
.catch(function (error) {
|
||
console.log(error);
|
||
});
|
||
},
|
||
|
||
export_mess_pdf(row) {
|
||
var _this = this;
|
||
axios.post('deescloud/get_tool_warning_pdf_en', {
|
||
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;
|
||
console.log("downUrl-----------",downUrl);
|
||
console.log("wellNameSource-----------",row.wellNameSource);
|
||
downloadUrl(row.wellNameSource + "_Instrument status report.pdf", downUrl);
|
||
})
|
||
.catch(function (error) {
|
||
console.log(error);
|
||
});
|
||
},
|
||
show_pdf(row){
|
||
let _this= this;
|
||
this.currentWellName = row.wellNameSource;
|
||
axios.post('/deescloud/get_tool_warning_en', {
|
||
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) {
|
||
//console.log(`每页 ${val} 条`);
|
||
this.$data.pagesize = val;
|
||
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: 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) {
|
||
//console.log(`当前页: ${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-en.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.context || ''
|
||
});
|
||
|
||
// 完整URL
|
||
const fullUrl = `${detailUrl}?${params.toString()}`;
|
||
|
||
// 在新标签页打开详情页
|
||
window.open(fullUrl, '_blank');
|
||
}
|
||
|
||
}
|
||
}
|
||
|