修改中英文滚动条

This commit is contained in:
lupeng_zz 2026-05-19 16:54:18 +08:00
parent b1984d3039
commit 00a5f4a3bd
2 changed files with 566 additions and 541 deletions

View File

@ -1,72 +1,67 @@
var devcomponent_en = {
template: `
<div style="display: flex; flex-direction: column; height: 100vh; overflow: hidden;">
<!-- 筛选区域 -->
<div style="display: flex; margin-top: 5px; margin-bottom: 5px; flex-wrap: wrap; align-items: center; padding: 0 10px;">
template:`
<div>
<div style="display: flex;margin-top: 10px; flex-wrap: wrap; align-items: center;">
<el-radio-group v-model="radio1" @change="radio_change" style="display: inline-flex; flex-direction: row; flex-wrap: nowrap;">
<el-radio-button label="1">Well</el-radio-button>
<el-radio-button label="2">Instrument</el-radio-button>
<el-radio-button label="2">Equipment</el-radio-button>
</el-radio-group>
<!-- Well location tab filter -->
<!-- Well tab filter box, placed in the same row as the tab -->
<div v-if="radio1=='1'" style="display: flex; margin-left: 20px; align-items: center;">
<el-input v-model="input" placeholder="Please enter well name" clearable style="width: 200px;"></el-input>
<el-button style="margin-left: 5px;" id="bt_serach" plain type="primary" icon="el-icon-search" @click="getWell(input)">Search</el-button>
<el-button style="margin-left: 5px;" id="bt_add" plain type="primary" icon="el-icon-circle-plus-outline" @click="add_dev_manage_dialog()">Add</el-button>
<el-input v-model="input" placeholder="Enter well name" clearable style="width: 200px;"></el-input>
<el-button style="margin-left: 5px;" id ="bt_serach" plain type="primary" icon="el-icon-search" @click="getWell(input)">Search</el-button>
<el-button style="margin-left: 5px;" id ="bt_add" plain type="primary" icon="el-icon-circle-plus-outline" @click="add_dev_manage_dialog()">Add</el-button>
</div>
<!-- Equipment tab 第一行时间筛选 -->
<div v-if="radio1=='2'" style="display: flex; margin-left: 10px; align-items: center; flex-wrap: wrap;">
<!-- Equipment tab time filter box, in the same row as the tab -->
<div v-if="radio1=='2'" style="display: flex; margin-left: 20px; align-items: center; flex-wrap: wrap;">
<el-date-picker
v-model="devSearchForm.in_time_start"
type="date"
placeholder="Start Time"
placeholder="Start in-hole time"
value-format="yyyy-MM-dd"
:picker-options="startTimeOptions"
style="width: 140px;">
style="width: 160px;">
</el-date-picker>
<el-date-picker
v-model="devSearchForm.in_time_end"
type="date"
placeholder="End Time"
placeholder="End in-hole time"
value-format="yyyy-MM-dd"
:picker-options="endTimeOptions"
style="width: 140px; margin-left: 5px;">
style="width: 160px; margin-left: 5px;">
</el-date-picker>
</div>
<!-- Equipment tab 第二行下拉筛选框 -->
<div v-if="radio1=='2'" style="display: flex; align-items: center; margin-top: 5px; flex-wrap: wrap; white-space: nowrap; width: 100%; margin-left: 0;">
<el-select v-model="devSearchForm.wellnameList" placeholder="Well Name" filterable clearable multiple collapse-tags style="width: 200px; max-width: 380px;">
<!-- Equipment tab filter box, in the same row as the tab -->
<div v-if="radio1=='2'" style="display: flex; align-items: center; margin-top: 10px; flex-wrap: wrap; white-space: nowrap;">
<el-select v-model="devSearchForm.wellnameList" placeholder="Enter well name" filterable clearable multiple collapse-tags style="width: 240px; max-width: 380px; margin-left: 0px;">
<el-option v-for="item in devWellnameOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-select v-model="devSearchForm.sid" placeholder="Series No." filterable clearable multiple collapse-tags style="width: 160px; max-width: 320px; margin-left: 5px;">
<el-select v-model="devSearchForm.sid" placeholder="Enter Instrument Serial No." filterable clearable multiple collapse-tags style="width: 180px; max-width: 320px; margin-left: 5px;">
<el-option v-for="item in devSidOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-select v-model="devSearchForm.iid" placeholder="Serial No." filterable clearable multiple collapse-tags style="width: 160px; max-width: 320px; margin-left: 5px;">
<el-select v-model="devSearchForm.iid" placeholder="Enter Instrument Series No." filterable clearable multiple collapse-tags style="width: 180px; max-width: 320px; margin-left: 5px;">
<el-option v-for="item in devIidOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-select v-model="devSearchForm.engineerList" placeholder="Engineer" filterable clearable multiple collapse-tags style="width: 180px; max-width: 320px; margin-left: 5px;">
<el-select v-model="devSearchForm.engineerList" placeholder="Enter Engineer" filterable clearable multiple collapse-tags style="width: 200px; max-width: 320px; margin-left: 5px;">
<el-option v-for="item in devEngineerOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
<!-- Equipment tab 第三行按钮 -->
<div v-if="radio1=='2'" style="display: flex; align-items: center; margin-top: 5px; flex-wrap: wrap; width: 100%;">
<el-button plain type="primary" icon="el-icon-search" @click="getDevList()">Search</el-button>
<el-button plain type="primary" icon="el-icon-document-checked" style="margin-left: 5px;" @click="exportSeirDetail()">Download Instrument List</el-button>
<el-button plain type="primary" icon="el-icon-document-checked" style="margin-left: 5px;" @click="exportWellDetail()">Download Well</el-button>
<el-button style="margin-left: 5px;" plain type="primary" icon="el-icon-search" @click="getDevList()">Search</el-button>
<el-button style="margin-left: 5px;" plain type="primary" icon="el-icon-document-checked" @click="exportSeirDetail()">Exp Inst</el-button>
<el-button style="margin-left: 5px;" plain type="primary" icon="el-icon-document-checked" @click="exportWellDetail()">Exp Well</el-button>
</div>
</div>
<!-- Well 表格区域 -->
<div class="span" v-if='radio1=="1"' style="flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;">
<div class="span" v-if='radio1=="1"' style="height: calc(100vh - 200px); overflow-x: auto;">
<el-table
:data="tableData"
style="width: 100%;font-size:14px"
height="100%"
style="width: 100%; font-size: 14px; flex: 1; display: flex; flex-direction: column;"
:cell-style="{background:'#304156'}"
border>
border
>
<el-table-column
prop="wellNameSource"
label="Well Name"
@ -75,12 +70,13 @@ var devcomponent_en = {
</el-table-column>
<el-table-column
prop="welltime"
label="Well Time"
label="Well Creation Time"
:width="170">
</el-table-column>
<el-table-column
prop="welloperator"
label="Operator"
label="Operating User"
:width="150"
:show-overflow-tooltip="true">
</el-table-column>
@ -91,38 +87,35 @@ var devcomponent_en = {
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
label="Operation"
label="Actions"
width="120">
<template slot-scope="scope">
<el-button @click="show_pdf(scope.row)" type="text" size="medium">Detail</el-button>
<el-button @click="show_pdf(scope.row)" type="text" size="medium">Details</el-button>
<el-button @click="export_pdf(scope.row)" type="text" size="medium">Export</el-button>
</template>
</el-table-column>
</el-table>
<!-- Well 分页栏 -->
<div class="block" style="background-color: #ECF5FF; padding: 5px 0; flex-shrink: 0;">
</div>
<div class="block" v-if='radio1=="1"'>
<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-sizes="[50,100, 200, 300]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="recordTotal"
style="background-color: #ECF5FF;">
:total="recordTotal" style="background-color: #ECF5FF;">
</el-pagination>
</div>
</div>
<!-- Equipment 表格区域 -->
<div class="span" v-if='radio1=="2"' style="flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;">
<div class="span" v-if='radio1=="2"' style="height: calc(100vh - 250px); overflow-x: auto;">
<el-table
:data="devListTableData"
style="width: 100%;font-size:14px"
height="100%"
style="width: 100%; font-size: 14px; flex: 1; display: flex; flex-direction: column;"
:cell-style="{background:'#304156'}"
border>
border
>
<el-table-column
prop="instrument_name"
label="Instrument Name"
@ -131,13 +124,14 @@ var devcomponent_en = {
</el-table-column>
<el-table-column
prop="sid"
label="Series No."
:width="120">
label="Instrument Series No."
:width="200">
</el-table-column>
<el-table-column
prop="iid"
label="Serial No."
:width="120"
label="Instrument Serial No."
:width="200"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
@ -148,12 +142,12 @@ var devcomponent_en = {
</el-table-column>
<el-table-column
prop="in_time"
label="In Time"
label="In-hole Time"
width="160">
</el-table-column>
<el-table-column
prop="out_time"
label="Out Time"
label="Out-of-hole Time"
width="160">
</el-table-column>
<el-table-column
@ -164,12 +158,12 @@ var devcomponent_en = {
<el-table-column
prop="duration_current"
label="Current Time(h)"
width="150">
width="120">
</el-table-column>
<el-table-column
prop="duration_total"
label="Total Time(h)"
width="150">
width="120">
</el-table-column>
<el-table-column
prop="location"
@ -178,23 +172,20 @@ var devcomponent_en = {
:show-overflow-tooltip="true">
</el-table-column>
</el-table>
<!-- Equipment 分页栏 -->
<div class="block" style="background-color: #ECF5FF; padding: 5px 0; flex-shrink: 0;">
</div>
<div class="block" v-if='radio1=="2"' style="margin-top: 5px; margin-bottom: 5px;">
<span class="demonstration" style="background-color: #ECF5FF;"></span>
<el-pagination
@size-change="handleDevSizeChange"
@current-change="handleDevCurrentChange"
:current-page="devCurrentPage"
:page-sizes="[50,100,200,300]"
:page-sizes="[50,100, 200, 300]"
:page-size="devPagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="devRecordTotal"
style="background-color: #ECF5FF;">
:total="devRecordTotal" style="background-color: #ECF5FF;">
</el-pagination>
</div>
</div>
<!-- Equipment asset dialog -->
<el-dialog
title="Equipment Asset Information"
:visible.sync="pdf_visible"
@ -206,7 +197,8 @@ var devcomponent_en = {
style="width: 100%;font-size:14px"
:height="tHeight1"
:cell-style="{background:'#304156'}"
border>
border
>
<el-table-column
prop="wellname"
label="Well Name"
@ -215,13 +207,13 @@ var devcomponent_en = {
</el-table-column>
<el-table-column
prop="sid"
label="Series No"
label="Serial Number"
:width="100"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
prop="iid"
label="Serial No"
label="ID"
:width="100">
</el-table-column>
<el-table-column
@ -240,55 +232,69 @@ var devcomponent_en = {
label="Calibration Date"
:width="100">
</el-table-column>
<el-table-column
prop="total_wt"
label="Total Working Time"
label="Total Production Hours"
:width="100">
</el-table-column>
<el-table-column
prop="cur_wt"
label="Current Working Time"
label="Current Session Hours"
:width="100">
</el-table-column>
<!--
<el-table-column
prop="repair_cnt"
label="Maintenance Count"
:width="100">
</el-table-column>
-->
<el-table-column
prop="region"
label="Region"
:width="100">
</el-table-column>
<el-table-column
prop="location"
label="Location"
:width="100"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
prop="responsible"
label="Responsible Person"
:width="100"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
label="Operation"
width="140">
label="Actions"
width="100">
<template slot-scope="scope">
<el-button v-if="scope.row.flag" @click="update_dev_m_dialog(scope.row)" type="text" size="medium">Update</el-button>
<el-button v-if="scope.row.flag" @click="update_dev_m_dialog(scope.row)" type="text" size="medium">Edit</el-button>
<el-button v-if="scope.row.flag" @click="remove_dev_m(scope.row)" type="text" size="medium">Delete</el-button>
</template>
</el-table-column>
</el-table>
</el-dialog>
<!-- Add device dialog -->
<el-dialog
title="Device Information"
title="Equipment Information"
:visible.sync="add_visible"
:lock-scroll ="false"
width="45%">
<el-form ref="bform" :model="form" :rules="rules" label-width="120px" :inline="false" class="demo-form-inline" size="medium">
<el-form ref="bform" :model="form" :rules="rules" label-width="100px" :inline="false" class="demo-form-inline" size="medium">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="Well Name" prop="wellname">
<el-select v-model="form.wellname" filterable placeholder="Please select well name">
<el-select v-model="form.wellname" filterable placeholder="Select well name">
<el-option
v-for="item in wellnames"
:key="item.value"
@ -299,14 +305,15 @@ var devcomponent_en = {
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="Series No" prop="sid">
<el-form-item label="Serial Number" prop="sid">
<el-input v-model="form.sid" ></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="Serial No" prop="iid">
<el-form-item label="ID" prop="iid">
<el-input v-model="form.iid" ></el-input>
</el-form-item>
</el-col>
@ -316,6 +323,7 @@ var devcomponent_en = {
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="Production Date" prop="p_date">
@ -362,20 +370,21 @@ var devcomponent_en = {
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="Total Working Time" prop="total_wt">
<el-form-item label="Total Production Hours" prop="total_wt">
<el-input v-model="form.total_wt" ></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="Current Working Time" prop="cur_wt">
<el-form-item label="Current Session Hours" prop="cur_wt">
<el-input v-model="form.cur_wt" ></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="Location" prop="location">
@ -388,31 +397,40 @@ var devcomponent_en = {
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<!--<el-col :span="12">
<el-form-item label="Maintenance Count" prop="repair_cnt">
<el-input v-model="form.repair_cnt" ></el-input>
</el-form-item>
</el-col>
-->
<el-col :span="12">
<el-form-item label="Region" prop="region">
<el-input v-model="form.region" ></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="add_visible = false">Cancel</el-button>
<el-button id ="bt_ok" plain type="primary" @click="add_dev_manage()">OK</el-button>
<el-button id ="bt_ok" plain type="primary" @click="add_dev_manage()">Confirm</el-button>
</span>
</el-dialog>
<!-- Update device dialog -->
<el-dialog
title="Device Information"
title="Equipment Information"
:visible.sync="update_visible"
:lock-scroll ="false"
width="45%">
<el-form ref="bform" :model="form" :rules="rules" label-width="120px" :inline="false" class="demo-form-inline" size="medium">
<el-form ref="bform" :model="form" :rules="rules" label-width="100px" :inline="false" class="demo-form-inline" size="medium">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="Well Name" prop="wellname">
<el-select v-model="form.wellname" filterable placeholder="Please select well name" disabled >
<el-select v-model="form.wellname" filterable placeholder="Select well name" disabled >
<el-option
v-for="item in wellnames"
:key="item.value"
@ -423,14 +441,15 @@ var devcomponent_en = {
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="Series No." prop="sid">
<el-form-item label="Serial Number" prop="sid">
<el-input v-model="form.sid" ></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="Serial No." prop="iid">
<el-form-item label="ID" prop="iid">
<el-input v-model="form.iid" ></el-input>
</el-form-item>
</el-col>
@ -440,6 +459,7 @@ var devcomponent_en = {
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="Production Date" prop="p_date">
@ -486,20 +506,21 @@ var devcomponent_en = {
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="Total Working Time" prop="total_wt">
<el-form-item label="Total Production Hours" prop="total_wt">
<el-input v-model="form.total_wt" ></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="Current Working Time" prop="cur_wt">
<el-form-item label="Current Session Hours" prop="cur_wt">
<el-input v-model="form.cur_wt" ></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="Location" prop="location">
@ -512,17 +533,24 @@ var devcomponent_en = {
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<!--<el-col :span="12">
<el-form-item label="Maintenance Count" prop="repair_cnt">
<el-input v-model="form.repair_cnt" ></el-input>
</el-form-item>
</el-col>-->
<el-col :span="12">
<el-form-item label="Region" prop="region">
<el-input v-model="form.region" ></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="update_visible = false">Cancel</el-button>
<el-button id ="bt_ok" plain type="primary" @click="update_dev_manage()">OK</el-button>
<el-button id ="bt_ok" plain type="primary" @click="update_dev_manage()">Confirm</el-button>
</span>
</el-dialog>
</div>

View File

@ -1,5 +1,4 @@
//组件
var devcomponent = {
var devcomponent = {
template:`
<div>
<div style="display: flex;margin-top: 10px; flex-wrap: wrap; align-items: center;">
@ -53,11 +52,11 @@
<el-button style="margin-left: 5px;" plain type="primary" icon="el-icon-document-checked" @click="exportWellDetail()">导出井位明细</el-button>
</div>
</div>
<div class="span" v-if='radio1=="1"' style="max-height: calc(100vh - 200px); overflow-x: auto;">
<div class="span" v-if='radio1=="1"' style="height: calc(100vh - 200px); overflow-x: auto;">
<el-table
:data="tableData"
style="width: 100%;font-size:14px"
:height="tHeight"
height="100%"
:cell-style="{background:'#304156'}"
border
>
@ -561,14 +560,13 @@
console.log("screen width:",screenW);
console.log("screen height:",screenH);
return {
tHeight:screenH-192,
tHeight1:screenH*0.5,
tableData: Array(0),
input:'',
tHeight1: screenH * 0.5,
tableData: [],
input: '',
currentPage: 1,
pagesize:50,
recordTotal:0,
radio1:'1',
pagesize: 50,
recordTotal: 0,
radio1: '1',
// 设备列表相关数据
devListTableData: [],
@ -1254,7 +1252,6 @@
});
},
}
}