Skip to content

T
tp-ui
Commit 9b1de194 by zhaopanyu
Options

Initial commit

parent 74a2b267
Showing with 107 additions and 24 deletions
src/views/benchmarkVoting/index.vue
......@@ -34,8 +34,13 @@
<el-col :span="5" v-for="(unit, index) in oilGasProduction" :key="index">
<el-form-item label-position="top">
<el-checkbox-group v-model="form.yqsc" class="checkbox-group-inline">
<el-checkbox :label="unit.name">
{{ unit.name }}♦{{ unit.management }}
<el-checkbox :label="unit.name" @change="handleCheckboxChange()">
<span @click.stop.prevent="handleTextClick(unit)">{{
unit.name
}}</span>♦
<span @click.stop.prevent="handleTextClick(unit)">{{
unit.management
}}</span>
</el-checkbox>
</el-checkbox-group>
</el-form-item>
......@@ -51,7 +56,12 @@
<el-form-item>
<el-checkbox-group v-model="form.ky">
<el-checkbox :label="unit.name">
{{ unit.name }}♦{{ unit.management }}
<span @click.stop.prevent="handleTextClick(unit)">{{
unit.name
}}</span>♦
<span @click.stop.prevent="handleTextClick(unit)">{{
unit.management
}}</span>
</el-checkbox>
</el-checkbox-group>
</el-form-item>
......@@ -67,7 +77,12 @@
<el-col :span="5" v-for="(unit, index) in specialization" :key="index">
<el-checkbox-group v-model="form.zyh">
<el-checkbox :label="unit.name">
{{ unit.name }}♦{{ unit.management }}
<span @click.stop.prevent="handleTextClick(unit)">{{
unit.name
}}</span>♦
<span @click.stop.prevent="handleTextClick(unit)">{{
unit.management
}}</span>
</el-checkbox>
</el-checkbox-group>
</el-col>
......@@ -83,7 +98,12 @@
<el-form-item>
<el-checkbox-group v-model="form.fw">
<el-checkbox :label="unit.name">
{{ unit.name }}♦{{ unit.management }}
<span @click.stop.prevent="handleTextClick(unit)">{{
unit.name
}}</span>♦
<span @click.stop.prevent="handleTextClick(unit)">{{
unit.management
}}</span>
</el-checkbox>
</el-checkbox-group>
</el-form-item>
......@@ -92,9 +112,62 @@
</el-col>
</el-row>
<div style=" display: flex; justify-content: center; align-items: center; ">
<el-button type="primary" size="mini">提交投票</el-button>
</div>
</div>
</div>
</div>
<el-dialog :visible.sync="dialogVisible" title="单位信息">
<p>您选择的单位: {{ selectedUnit.name }}</p>
<p>管理信息: {{ selectedUnit.management }}</p>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">关闭</el-button>
</span>
</el-dialog>
<!-- 对话框 -->
<el-dialog :visible.sync="showDialog" title="选中的单位">
<el-row style="margin-top: -20px;">
<div class="sj" style="font-size: 26px;font-weight: bold;"> 1.海洋采油厂</div>
</el-row>
<el-row>
<img src="../../assets/images/bjt.png" alt="" style=" width: 300px;height: 200px;">
</el-row>
<el-row>
<span class="sj" style="font-size: 20px;font-weight: bold;"> 单位概况：</span> <span>海二采油管理区地处渤海湾南部极浅海域，现有
在岗员工 167 人，管理油水井 209 口，年产原油 85.6 万吨。</span>
</el-row>
<el-row>
<span class="sj" style="font-size: 20px;font-weight: bold;"> 特色亮点：海洋特色新模式推动海上油田大发展</span>
</el-row>
<el-row>
<span class="sj">
着力打造以“效率提升集中化、高技能人才专业化、技术决
策一体化、管理结构扁平化”为主要特征的海洋特色新模式，持
续推动老区油藏高效开发与效益提升，连续 9 年完成生产任务，
盈亏平衡点降至 24.28 美元/桶， 树立起了海上油田高质量发展示
范标杆。</span>
</el-row>
<el-row>
<span class="sj" style="font-size: 20px;font-weight: bold;"> 主要荣誉：</span> <span> 曾获得集团公司金牌采油管理区、油田先进基层
党组织、油田金牌基层单位等荣誉。</span>
</el-row>
<el-row style="display: flex;flex-direction: row;justify-content: space-between;">
<img src="../../assets/images/pay.png" alt="" style=" width: 100px;height: 80px;">
<img src="../../assets/images/pay.png" alt="" style=" width: 100px;height: 80px;">
<img src="../../assets/images/pay.png" alt="" style=" width: 100px;height: 80px;">
<img src="../../assets/images/pay.png" alt="" style=" width: 100px;height: 80px;">
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="showDialog = false">取 消</el-button>
</span>
</el-dialog>
</div>
</template>
......@@ -103,6 +176,9 @@ export default {
name: "ThreeBaseBenchmark",
data() {
return {
dialogVisible: false,
selectedUnit: {},
showDialog: false, // 控制对话框显示的变量
form: {
yqsc: [],// 用于存储选中的单位
ky: [],
......@@ -147,32 +223,34 @@ export default {
};
},
computed: {
isValidSelection() {
// 至少选择1家来自每个板块，最多选择12个单位
const oilAndGasSelected = this.selectedUnits.filter(unit => this.oilAndGasUnits.some(o => o.label === unit)).length > 0;
const researchSelected = this.selectedUnits.filter(unit => this.researchUnits.some(r => r.label === unit)).length > 0;
const specializedSelected = this.selectedUnits.filter(unit => this.specializedUnits.some(s => s.label === unit)).length > 0;
const serviceSelected = this.selectedUnits.filter(unit => this.serviceUnits.some(s => s.label === unit)).length > 0;
return oilAndGasSelected && researchSelected && specializedSelected && serviceSelected &&
this.selectedUnits.length >= 10 && this.selectedUnits.length <= 12;
},
},
methods: {
validateSelection() {
if (!this.isValidSelection) {
this.$message.warning('请确保每个板块至少选择一项，并且总数在 10-12 个之间。');
}
handleTextClick(unit) {
console.log(unit, "11111111");
this.selectedUnit = unit; // 存储选中的单位
this.dialogVisible = true; // 显示弹窗
},
submitVote() {
this.submitted = true;
console.log('Submitted vote:', this.selectedUnits);
handleCheckboxChange() {
console.log(this.form.yqsc); // 这里会打印出选中的value值
const selectedUnits = this.oilGasProduction.filter(unit => this.form.yqsc.includes(unit.value));
console.log(selectedUnits); // 打印出选中的单位信息
},
openDialog(unit) {
this.selectedUnit = unit; // 保存当前点击的单位信息
this.showDialog = true; // 显示弹窗
}
},
};
</script>
<style scoped>
.sj {
margin-left: 20px;
}
.text {
text-align: right;
}
......@@ -208,13 +286,18 @@ export default {
.container {
max-width: 100vw;
overflow-y: hidden;
overflow-y: auto;
/* 允许垂直滚动 */
}
.bg {
max-width: 100vw;
overflow-y: auto;
padding-bottom: 20px;
height: 100vh;
/* height: 100vh; */
position: fixed;
width: 100%;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.65) 100%);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment