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 @@ ...@@ -34,8 +34,13 @@
<el-col :span="5" v-for="(unit, index) in oilGasProduction" :key="index"> <el-col :span="5" v-for="(unit, index) in oilGasProduction" :key="index">
<el-form-item label-position="top"> <el-form-item label-position="top">
<el-checkbox-group v-model="form.yqsc" class="checkbox-group-inline"> <el-checkbox-group v-model="form.yqsc" class="checkbox-group-inline">
<el-checkbox :label="unit.name"> <el-checkbox :label="unit.name" @change="handleCheckboxChange()">
{{ 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>
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
...@@ -51,7 +56,12 @@ ...@@ -51,7 +56,12 @@
<el-form-item> <el-form-item>
<el-checkbox-group v-model="form.ky"> <el-checkbox-group v-model="form.ky">
<el-checkbox :label="unit.name"> <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>
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
...@@ -67,7 +77,12 @@ ...@@ -67,7 +77,12 @@
<el-col :span="5" v-for="(unit, index) in specialization" :key="index"> <el-col :span="5" v-for="(unit, index) in specialization" :key="index">
<el-checkbox-group v-model="form.zyh"> <el-checkbox-group v-model="form.zyh">
<el-checkbox :label="unit.name"> <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>
</el-checkbox-group> </el-checkbox-group>
</el-col> </el-col>
...@@ -83,7 +98,12 @@ ...@@ -83,7 +98,12 @@
<el-form-item> <el-form-item>
<el-checkbox-group v-model="form.fw"> <el-checkbox-group v-model="form.fw">
<el-checkbox :label="unit.name"> <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>
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
...@@ -92,9 +112,62 @@ ...@@ -92,9 +112,62 @@
</el-col> </el-col>
</el-row> </el-row>
<div style=" display: flex; justify-content: center; align-items: center; ">
<el-button type="primary" size="mini">提交投票</el-button>
</div>
</div> </div>
</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> </div>
</template> </template>
...@@ -103,6 +176,9 @@ export default { ...@@ -103,6 +176,9 @@ export default {
name: "ThreeBaseBenchmark", name: "ThreeBaseBenchmark",
data() { data() {
return { return {
dialogVisible: false,
selectedUnit: {},
showDialog: false, // 控制对话框显示的变量
form: { form: {
yqsc: [],// 用于存储选中的单位 yqsc: [],// 用于存储选中的单位
ky: [], ky: [],
...@@ -147,32 +223,34 @@ export default { ...@@ -147,32 +223,34 @@ export default {
}; };
}, },
computed: { 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: { methods: {
validateSelection() { handleTextClick(unit) {
if (!this.isValidSelection) { console.log(unit, "11111111");
this.$message.warning('请确保每个板块至少选择一项，并且总数在 10-12 个之间。'); this.selectedUnit = unit; // 存储选中的单位
} this.dialogVisible = true; // 显示弹窗
}, },
submitVote() { handleCheckboxChange() {
this.submitted = true; console.log(this.form.yqsc); // 这里会打印出选中的value值
console.log('Submitted vote:', this.selectedUnits); const selectedUnits = this.oilGasProduction.filter(unit => this.form.yqsc.includes(unit.value));
console.log(selectedUnits); // 打印出选中的单位信息
}, },
openDialog(unit) {
this.selectedUnit = unit; // 保存当前点击的单位信息
this.showDialog = true; // 显示弹窗
}
}, },
}; };
</script> </script>
<style scoped> <style scoped>
.sj {
margin-left: 20px;
}
.text { .text {
text-align: right; text-align: right;
} }
...@@ -208,13 +286,18 @@ export default { ...@@ -208,13 +286,18 @@ export default {
.container { .container {
max-width: 100vw; max-width: 100vw;
overflow-y: hidden; overflow-y: auto;
/* 允许垂直滚动 */
} }
.bg { .bg {
max-width: 100vw;
overflow-y: auto;
padding-bottom: 20px; padding-bottom: 20px;
height: 100vh; /* height: 100vh; */
position: fixed; position: fixed;
width: 100%; width: 100%;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.65) 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