zpy

.env.production

@@ -5,4 +5,4 @@ VUE_APP_TITLE = 投选活动
 ENV = 'production'
 
 # 投选活动/生产环境
-VUE_APP_BASE_API = '/prod-api'
+VUE_APP_BASE_API = '/tp-api'

src/api/benchmarkVoting.js

@@ -3,7 +3,7 @@ import request from "@/utils/request";
 //提交投票
 export function addTp(data) {
   return request({
-    url: "/system/tpInfo/add",
+    url: "/system/tpRyInfo/tp",
     method: "post",
     data: data,
   });

src/api/tp/tpDept.js

-import request from '@/utils/request'
+import request from "@/utils/request";
 
 // 查询投票单位列表
 export function listTpDept(query) {
   return request({
-    url: '/system/tpDept/list',
-    method: 'get',
-    params: query
-  })
+    url: "/system/tpDept/list",
+    method: "get",
+    params: query,
+  });
 }
 // 查询投票单位列表
 export function listTpDeptjg(query) {
   return request({
-    url: '/system/tpDept/listjg',
-    method: 'get',
-    params: query
-  })
+    url: "/system/tpDept/listjg",
+    method: "get",
+    params: query,
+  });
+}
+// 查询人员统计
+export function listRytj(query) {
+  return request({
+    url: "/system/tpRyInfo/tplist",
+    method: "get",
+    params: query,
+  });
 }
-
 // 查询投票单位详细
 export function getTpDept(id) {
   return request({
-    url: '/system/tpDept/' + id,
-    method: 'get'
-  })
+    url: "/system/tpDept/" + id,
+    method: "get",
+  });
 }
 
 // 新增投票单位
 export function addTpDept(data) {
   return request({
-    url: '/system/tpDept',
-    method: 'post',
-    data: data
-  })
+    url: "/system/tpDept",
+    method: "post",
+    data: data,
+  });
 }
 
 // 修改投票单位
 export function updateTpDept(data) {
   return request({
-    url: '/system/tpDept',
-    method: 'put',
-    data: data
-  })
+    url: "/system/tpDept",
+    method: "put",
+    data: data,
+  });
 }
 
 // 删除投票单位
 export function delTpDept(id) {
   return request({
-    url: '/system/tpDept/' + id,
-    method: 'delete'
-  })
+    url: "/system/tpDept/" + id,
+    method: "delete",
+  });
 }

src/api/tp/tpInfo.js

-import request from '@/utils/request'
+import request from "@/utils/request";
 
 // 查询投票信息列表
 export function listTpInfo(query) {
   return request({
-    url: '/system/tpInfo/list',
-    method: 'get',
-    params: query
-  })
+    url: "/system/tpInfo/list",
+    method: "get",
+    params: query,
+  });
 }
 
 // 查询投票信息列表
 export function listTpInfoJg(query) {
   return request({
-    url: '/system/tpInfo/listjg',
-    method: 'get',
-    params: query
-  })
+    url: "/system/tpInfo/listjg",
+    method: "get",
+    params: query,
+  });
+}
+export function listTpInfoJgs(query) {
+  return request({
+    url: "/system/tpRyInfo/list",
+    method: "get",
+    params: query,
+  });
 }
 // 查询投票信息详细
 export function getTpInfo(id) {
   return request({
-    url: '/system/tpInfo/' + id,
-    method: 'get'
-  })
+    url: "/system/tpInfo/" + id,
+    method: "get",
+  });
 }
 
 // 新增投票信息
 export function addTpInfo(data) {
   return request({
-    url: '/system/tpInfo',
-    method: 'post',
-    data: data
-  })
+    url: "/system/tpInfo",
+    method: "post",
+    data: data,
+  });
 }
 
 // 修改投票信息
 export function updateTpInfo(data) {
   return request({
-    url: '/system/tpInfo',
-    method: 'put',
-    data: data
-  })
+    url: "/system/tpInfo",
+    method: "put",
+    data: data,
+  });
 }
 
 // 删除投票信息
 export function delTpInfo(id) {
   return request({
-    url: '/system/tpInfo/' + id,
-    method: 'delete'
-  })
+    url: "/system/tpInfo/" + id,
+    method: "delete",
+  });
 }

src/layout/components/Navbar.vue

 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
+      @toggleClick="toggleSideBar" />
 
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
-    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
+    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" />
+    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
 
     <div class="right-menu">
-      <template v-if="device!=='mobile'">
+      <template v-if="device !== 'mobile'">
         <search id="header-search" class="right-menu-item" />
 
         <el-tooltip content="源码地址" effect="dark" placement="bottom">
@@ -102,9 +103,9 @@ export default {
         type: 'warning'
       }).then(() => {
         this.$store.dispatch('LogOut').then(() => {
-          location.href = '/index';
+          location.href = '/tp/index';
         })
-      }).catch(() => {});
+      }).catch(() => { });
     }
   }
 }
@@ -116,7 +117,7 @@ export default {
   overflow: hidden;
   position: relative;
   background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
 
   .hamburger-container {
     line-height: 46px;
@@ -124,7 +125,7 @@ export default {
     float: left;
     cursor: pointer;
     transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    -webkit-tap-highlight-color: transparent;
 
     &:hover {
       background: rgba(0, 0, 0, .025)

src/router/index.js

@@ -50,16 +50,17 @@ export const constantRoutes = [
     path: "/tp",
     component: () => import("@/views/benchmarkVoting"),
     hidden: true,
-  }, {
+  },
+  {
     path: "/rytp",
     component: () => import("@/views/rytp"),
     hidden: true,
   },
   {
-    path: '/info',
+    path: "/info",
     // component: (resolve) => require(['@/views/remotelogin'], resolve),
-    component:() => import('@/views/info'),
-    hidden: true
+    component: () => import("@/views/info"),
+    hidden: true,
   },
   {
     path: "/register",
@@ -194,5 +195,6 @@ Router.prototype.replace = function push(location) {
 export default new Router({
   mode: "history", // 去掉url中的#
   scrollBehavior: () => ({ y: 0 }),
+  base: "/tp",
   routes: constantRoutes,
 });

src/utils/request.js

-import axios from 'axios'
-import { Notification, MessageBox, Message, Loading } from 'element-ui'
-import store from '@/store'
-import { getToken } from '@/utils/auth'
-import errorCode from '@/utils/errorCode'
+import axios from "axios";
+import { Notification, MessageBox, Message, Loading } from "element-ui";
+import store from "@/store";
+import { getToken } from "@/utils/auth";
+import errorCode from "@/utils/errorCode";
 import { tansParams, blobValidate } from "@/utils/ruoyi";
-import cache from '@/plugins/cache'
-import { saveAs } from 'file-saver'
+import cache from "@/plugins/cache";
+import { saveAs } from "file-saver";
 
 let downloadLoadingInstance;
 // 是否显示重新登录
 export let isRelogin = { show: false };
 
-axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
 // 创建axios实例
 const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
   baseURL: process.env.VUE_APP_BASE_API,
   // 超时
-  timeout: 10000
-})
+  timeout: 10000,
+});
 
 // request拦截器
-service.interceptors.request.use(config => {
+service.interceptors.request.use(
+  (config) => {
     // 是否需要设置 token
-  const isToken = (config.headers || {}).isToken === false
+    const isToken = (config.headers || {}).isToken === false;
     // 是否需要防止数据重复提交
-  const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
+    const isRepeatSubmit = (config.headers || {}).repeatSubmit === false;
     if (getToken() && !isToken) {
-    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+      config.headers["Authorization"] = "Bearer " + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
     }
     // get请求映射params参数
-  if (config.method === 'get' && config.params) {
-    let url = config.url + '?' + tansParams(config.params);
+    if (config.method === "get" && config.params) {
+      let url = config.url + "?" + tansParams(config.params);
       url = url.slice(0, -1);
       config.params = {};
       config.url = url;
     }
-  if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
+    if (
+      !isRepeatSubmit &&
+      (config.method === "post" || config.method === "put")
+    ) {
       const requestObj = {
         url: config.url,
-      data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
-      time: new Date().getTime()
-    }
+        data:
+          typeof config.data === "object"
+            ? JSON.stringify(config.data)
+            : config.data,
+        time: new Date().getTime(),
+      };
       const requestSize = Object.keys(JSON.stringify(requestObj)).length; // 请求数据大小
       const limitSize = 5 * 1024 * 1024; // 限制存放数据5M
       if (requestSize >= limitSize) {
-      console.warn(`[${config.url}]: ` + '请求数据大小超出允许的5M限制，无法进行防重复提交验证。')
+        console.warn(
+          `[${config.url}]: ` +
+            "请求数据大小超出允许的5M限制，无法进行防重复提交验证。"
+        );
         return config;
       }
-    const sessionObj = cache.session.getJSON('sessionObj')
-    if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
-      cache.session.setJSON('sessionObj', requestObj)
+      const sessionObj = cache.session.getJSON("sessionObj");
+      if (
+        sessionObj === undefined ||
+        sessionObj === null ||
+        sessionObj === ""
+      ) {
+        cache.session.setJSON("sessionObj", requestObj);
       } else {
         const s_url = sessionObj.url; // 请求地址
         const s_data = sessionObj.data; // 请求数据
         const s_time = sessionObj.time; // 请求时间
         const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交
-      if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
-        const message = '数据正在处理，请勿重复提交';
-        console.warn(`[${s_url}]: ` + message)
-        return Promise.reject(new Error(message))
+        if (
+          s_data === requestObj.data &&
+          requestObj.time - s_time < interval &&
+          s_url === requestObj.url
+        ) {
+          const message = "数据正在处理，请勿重复提交";
+          console.warn(`[${s_url}]: ` + message);
+          return Promise.reject(new Error(message));
         } else {
-        cache.session.setJSON('sessionObj', requestObj)
+          cache.session.setJSON("sessionObj", requestObj);
+        }
       }
     }
+    return config;
+  },
+  (error) => {
+    console.log(error);
+    Promise.reject(error);
   }
-  return config
-}, error => {
-    console.log(error)
-    Promise.reject(error)
-})
+);
 
 // 响应拦截器
-service.interceptors.response.use(res => {
+service.interceptors.response.use(
+  (res) => {
     // 未设置状态码则默认成功状态
     const code = res.data.code || 200;
     // 获取错误信息
-    const msg = errorCode[code] || res.data.msg || errorCode['default']
+    const msg = errorCode[code] || res.data.msg || errorCode["default"];
     // 二进制数据则直接返回
-    if (res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer') {
-      return res.data
+    if (
+      res.request.responseType === "blob" ||
+      res.request.responseType === "arraybuffer"
+    ) {
+      return res.data;
     }
     if (code === 401) {
       if (!isRelogin.show) {
         isRelogin.show = true;
-        MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
+        MessageBox.confirm(
+          "登录状态已过期，您可以继续留在该页面，或者重新登录",
+          "系统提示",
+          {
+            confirmButtonText: "重新登录",
+            cancelButtonText: "取消",
+            type: "warning",
+          }
+        )
+          .then(() => {
             isRelogin.show = false;
-          store.dispatch('LogOut').then(() => {
-            location.href = '/index';
+            store.dispatch("LogOut").then(() => {
+              location.href = "/tp/index";
+            });
           })
-      }).catch(() => {
+          .catch(() => {
             isRelogin.show = false;
           });
       }
-      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
+      return Promise.reject("无效的会话，或者会话已过期，请重新登录。");
     } else if (code === 500) {
-      Message({ message: msg, type: 'error' })
-      return Promise.reject(new Error(msg))
+      Message({ message: msg, type: "error" });
+      return Promise.reject(new Error(msg));
     } else if (code === 601) {
-      Message({ message: msg, type: 'warning' })
-      return Promise.reject('error')
+      Message({ message: msg, type: "warning" });
+      return Promise.reject("error");
     } else if (code !== 200) {
-      Notification.error({ title: msg })
-      return Promise.reject('error')
+      Notification.error({ title: msg });
+      return Promise.reject("error");
     } else {
-      return res.data
+      return res.data;
     }
   },
-  error => {
-    console.log('err' + error)
+  (error) => {
+    console.log("err" + error);
     let { message } = error;
     if (message == "Network Error") {
       message = "后端接口连接异常";
@@ -117,36 +151,48 @@ service.interceptors.response.use(res => {
     } else if (message.includes("Request failed with status code")) {
       message = "系统接口" + message.substr(message.length - 3) + "异常";
     }
-    Message({ message: message, type: 'error', duration: 5 * 1000 })
-    return Promise.reject(error)
+    Message({ message: message, type: "error", duration: 5 * 1000 });
+    return Promise.reject(error);
   }
-)
+);
 
 // 通用下载方法
 export function download(url, params, filename, config) {
-  downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
-  return service.post(url, params, {
-    transformRequest: [(params) => { return tansParams(params) }],
-    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    responseType: 'blob',
-    ...config
-  }).then(async (data) => {
+  downloadLoadingInstance = Loading.service({
+    text: "正在下载数据，请稍候",
+    spinner: "el-icon-loading",
+    background: "rgba(0, 0, 0, 0.7)",
+  });
+  return service
+    .post(url, params, {
+      transformRequest: [
+        (params) => {
+          return tansParams(params);
+        },
+      ],
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      responseType: "blob",
+      ...config,
+    })
+    .then(async (data) => {
       const isBlob = blobValidate(data);
       if (isBlob) {
-      const blob = new Blob([data])
-      saveAs(blob, filename)
+        const blob = new Blob([data]);
+        saveAs(blob, filename);
       } else {
         const resText = await data.text();
         const rspObj = JSON.parse(resText);
-      const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
+        const errMsg =
+          errorCode[rspObj.code] || rspObj.msg || errorCode["default"];
         Message.error(errMsg);
       }
       downloadLoadingInstance.close();
-  }).catch((r) => {
-    console.error(r)
-    Message.error('下载文件出现错误，请联系管理员！')
-    downloadLoadingInstance.close();
     })
+    .catch((r) => {
+      console.error(r);
+      Message.error("下载文件出现错误，请联系管理员！");
+      downloadLoadingInstance.close();
+    });
 }
 
-export default service
+export default service;

src/views/rytj/index.vue

+<template>
+    <div class="app-container">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+            label-width="68px">
+            <el-form-item label="所属板块" prop="ssbk">
+                <el-select v-model="queryParams.ssbk" clearable>
+                    <el-option v-for="dict in dict.type.ry_tp_ssbk" :key="dict.value" :label="dict.label"
+                        :value="dict.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="单位名称" prop="dwmc">
+                <el-input v-model="queryParams.dwmc" placeholder="请输入单位名称" clearable
+                    @keyup.enter.native="handleQuery" />
+            </el-form-item>
+
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </el-form>
+
+
+        <el-table v-loading="loading" border :data="tpDeptList" @selection-change="handleSelectionChange">
+            <el-table-column label="所属板块" min-width="180px" align="center" prop="ssbk" />
+            <el-table-column label="姓名" min-width="180px" align="center" prop="tprymc" />
+            <el-table-column label="投票数量" min-width="180px" align="center" prop="sl" />
+
+        </el-table>
+
+        <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
+    </div>
+</template>
+
+<script>
+import { listTpDept, listTpDeptjg, getTpDept, delTpDept, addTpDept, updateTpDept, listRytj } from "@/api/tp/tpDept";
+
+export default {
+    name: "TpDept",
+    dicts: ['ry_tp_ssbk'],
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            // total: 0,
+            // 投票单位表格数据
+            tpDeptList: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                ssbk: null,
+                dwmc: null,
+                yl1: null,
+                yl2: null,
+                yl3: null,
+                yl4: null,
+                yl5: null
+            },
+            // 表单参数
+            form: {},
+            // 表单校验
+            rules: {
+            }
+        };
+    },
+    created() {
+        this.getList();
+    },
+    methods: {
+        /** 查询投票单位列表 */
+        getList() {
+            this.loading = true;
+            listRytj(this.queryParams).then(response => {
+                this.tpDeptList = response.rows;
+                // this.total = response.total;
+                this.loading = false;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                id: null,
+                ssbk: null,
+                dwmc: null,
+                remark: null,
+                yl1: null,
+                yl2: null,
+                yl3: null,
+                yl4: null,
+                yl5: null
+            };
+            this.resetForm("form");
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            this.ids = selection.map(item => item.id)
+            this.single = selection.length !== 1
+            this.multiple = !selection.length
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.reset();
+            this.open = true;
+            this.title = "添加投票单位";
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.reset();
+            const id = row.id || this.ids
+            getTpDept(id).then(response => {
+                this.form = response.data;
+                this.open = true;
+                this.title = "修改投票单位";
+            });
+        },
+        /** 提交按钮 */
+        submitForm() {
+            this.$refs["form"].validate(valid => {
+                if (valid) {
+                    if (this.form.id != null) {
+                        updateTpDept(this.form).then(response => {
+                            this.$modal.msgSuccess("修改成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    } else {
+                        addTpDept(this.form).then(response => {
+                            this.$modal.msgSuccess("新增成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    }
+                }
+            });
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const ids = row.id || this.ids;
+            this.$modal.confirm('是否确认删除投票单位编号为"' + ids + '"的数据项？').then(function () {
+                return delTpDept(ids);
+            }).then(() => {
+                this.getList();
+                this.$modal.msgSuccess("删除成功");
+            }).catch(() => { });
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            this.download('system/tpDept/export', {
+                ...this.queryParams
+            }, `tpDept_${new Date().getTime()}.xlsx`)
+        }
+    }
+};
+</script>

src/views/rytp/index copy.vue

+<template>
+  <div class="container">
+    <el-row>
+      <img src="../../assets/rytpimg/bg.png" alt="" style="
+          background-size: 100% 100%;
+          margin-top: 20px;
+          height: 300px;
+          width: 100%;
+          float: none;
+          margin: 0 auto;
+        " />
+    </el-row>
+    <el-row style="margin-top: -10px">
+      <div class="bt">
+        <div class="bttitle">
+          为深入贯彻落实油田党委关于“深化基础工作”部署安排，从安全生产稳、运行效率优、设备运维细、经营管理精、基层党建实5个重点领域，采用自下而上、层层推荐方式优选了10名深入挖掘长期扎根基层，事迹真实可感、群众广泛认可、示范作用突出的油田强三基岗位备选标兵。请您积极参与，为“心目中的标兵”投票，作为油田强三基岗位标兵选树的参考依据。
+        </div>
+        <div>
+          <el-row class="nrtab">
+            <span class="yuan">·</span>
+            <span class="title">活动目的：</span>
+            <span class="titlenr">
+              以可学可做的身边榜样将严细实作风具体化，推动树牢“大抓三基、夯实基础”工作导向。
+            </span>
+          </el-row>
+          <el-row class="nrtab">
+            <span class="yuan">·</span>
+            <span class="title">活动形式：</span>
+            <span class="titlenr">
+              在“油田主页”开设“心目中的标兵”专栏，展示油田强三基岗位备选标兵风采、员工自发投票。
+            </span>
+          </el-row>
+          <el-row class="nrtab">
+            <span class="yuan">·</span>
+            <span class="title">活动时间：</span>
+            <span class="titlenr"> 12 月 25 日 - 12 月 31 日。 </span>
+          </el-row>
+          <el-row class="nrtab">
+            <span class="yuan">·</span>
+            <span class="title">投票规则：</span>
+            <span class="titlenr">每人只投一次、每次投5名员工，安全、生产、设备、企管、党建每类至少选1名。
+            </span>
+          </el-row>
+        </div>
+      </div>
+    </el-row>
+
+    <el-row style="margin-top: -25px">
+      <div class="bt1">
+        <el-row>
+          <div class="btsty">安全</div>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12" v-for="(unit, index) in oilGasProduction" :key="index">
+            <div class="person-card" :class="{ 'selected': unit.checked }">
+              <div class="person-content">
+                <div class="person-photo">
+                  <img :src="unit.photo || require('../../assets/images/profile.jpg')" alt="" />
+                </div>
+                <div class="person-info">
+                  <div class="person-name">{{ unit.name }}</div>
+                  <div class="person-age">{{ unit.age || '现年37岁' }}</div>
+                  <div class="person-desc">{{ unit.description || unit.management || '毕业于淄博职业学院化工设备维修技术专业,
+                  2011年入职以来, 始终扎根于生产一线, 是储运单元一名技术过硬、管理有方、作风扎实的骨干力量。2021年由于工作成绩突出, 担任储运二部运行四班班长、技师。' }}</div>
+                  <div class="person-link" @click.stop.prevent="handleDetailClick(unit)">
+                    详细事迹材料&gt;&gt;
+                  </div>
+                </div>
+              </div>
+              <div class="person-button-wrapper">
+                <button v-if="!unit.checked" class="person-btn-select"
+                  @click="handleCheckboxChange({ target: { checked: true } }, unit)">
+                  选择
+                </button>
+                <button v-else class="person-btn-deselect"
+                  @click="handleCheckboxChange({ target: { checked: false } }, unit)">
+                  取消选中
+                </button>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+        <!-- 生产 -->
+        <el-row>
+          <div class="btsty">生产</div>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12" v-for="(unit, index) in research" :key="index">
+            <div class="person-card" :class="{ 'selected': unit.checked }">
+              <div class="person-content">
+                <div class="person-photo">
+                  <img :src="unit.photo || require('../../assets/images/profile.jpg')" alt="" />
+                </div>
+                <div class="person-info">
+                  <div class="person-name">{{ unit.name }}</div>
+                  <div class="person-age">{{ unit.age || '现年37岁' }}</div>
+                  <div class="person-desc">{{ unit.description || unit.management || '毕业于淄博职业学院化工设备维修技术专业,
+                  2011年入职以来, 始终扎根于生产一线, 是储运单元一名技术过硬、管理有方、作风扎实的骨干力量。2021年由于工作成绩突出, 担任储运二部运行四班班长、技师。' }}</div>
+                  <div class="person-link" @click.stop.prevent="handleDetailClick(unit)">
+                    详细事迹材料&gt;&gt;
+                  </div>
+                </div>
+              </div>
+              <div class="person-button-wrapper">
+                <button v-if="!unit.checked" class="person-btn-select"
+                  @click="handleCheckboxChangeky({ target: { checked: true } }, unit)">
+                  选择
+                </button>
+                <button v-else class="person-btn-deselect"
+                  @click="handleCheckboxChangeky({ target: { checked: false } }, unit)">
+                  取消选中
+                </button>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+        <!-- 设备 -->
+        <el-row>
+          <div class="btsty">设备</div>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12" v-for="(unit, index) in specialization" :key="index">
+            <div class="person-card" :class="{ 'selected': unit.checked }">
+              <div class="person-content">
+                <div class="person-photo">
+                  <img :src="unit.photo || require('../../assets/images/profile.jpg')" alt="" />
+                </div>
+                <div class="person-info">
+                  <div class="person-name">{{ unit.name }}</div>
+                  <div class="person-age">{{ unit.age || '现年37岁' }}</div>
+                  <div class="person-desc">{{ unit.description || unit.management || '毕业于淄博职业学院化工设备维修技术专业,
+                  2011年入职以来, 始终扎根于生产一线, 是储运单元一名技术过硬、管理有方、作风扎实的骨干力量。2021年由于工作成绩突出, 担任储运二部运行四班班长、技师。' }}</div>
+                  <div class="person-link" @click.stop.prevent="handleDetailClick(unit)">
+                    详细事迹材料&gt;&gt;
+                  </div>
+                </div>
+              </div>
+              <div class="person-button-wrapper">
+                <button v-if="!unit.checked" class="person-btn-select"
+                  @click="handleCheckboxChangezyh({ target: { checked: true } }, unit)">
+                  选择
+                </button>
+                <button v-else class="person-btn-deselect"
+                  @click="handleCheckboxChangezyh({ target: { checked: false } }, unit)">
+                  取消选中
+                </button>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+        <!-- 企管 -->
+        <el-row>
+          <div class="btsty">企管</div>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12" v-for="(unit, index) in serviceCoordination" :key="index">
+            <div class="person-card" :class="{ 'selected': unit.checked }">
+              <div class="person-content">
+                <div class="person-photo">
+                  <img :src="unit.photo || require('../../assets/images/profile.jpg')" alt="" />
+                </div>
+                <div class="person-info">
+                  <div class="person-name">{{ unit.name }}</div>
+                  <div class="person-age">{{ unit.age || '现年37岁' }}</div>
+                  <div class="person-desc">{{ unit.description || unit.management || '毕业于淄博职业学院化工设备维修技术专业,
+                  2011年入职以来, 始终扎根于生产一线, 是储运单元一名技术过硬、管理有方、作风扎实的骨干力量。2021年由于工作成绩突出, 担任储运二部运行四班班长、技师。' }}</div>
+                  <div class="person-link" @click.stop.prevent="handleDetailClick(unit)">
+                    详细事迹材料&gt;&gt;
+                  </div>
+                </div>
+              </div>
+              <div class="person-button-wrapper">
+                <button v-if="!unit.checked" class="person-btn-select"
+                  @click="handleCheckboxChangefw({ target: { checked: true } }, unit)">
+                  选择
+                </button>
+                <button v-else class="person-btn-deselect"
+                  @click="handleCheckboxChangefw({ target: { checked: false } }, unit)">
+                  取消选中
+                </button>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+        <!-- 党建 -->
+        <el-row>
+          <div class="btsty">党建</div>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12" v-for="(unit, index) in partyBuilding" :key="index">
+            <div class="person-card" :class="{ 'selected': unit.checked }">
+              <div class="person-content">
+                <div class="person-photo">
+                  <img :src="unit.photo || require('../../assets/images/profile.jpg')" alt="" />
+                </div>
+                <div class="person-info">
+                  <div class="person-name">{{ unit.name }}</div>
+                  <div class="person-age">{{ unit.age || '现年37岁' }}</div>
+                  <div class="person-desc">{{ unit.description || unit.management || '毕业于淄博职业学院化工设备维修技术专业,
+                  2011年入职以来, 始终扎根于生产一线, 是储运单元一名技术过硬、管理有方、作风扎实的骨干力量。2021年由于工作成绩突出, 担任储运二部运行四班班长、技师。' }}</div>
+                  <div class="person-link" @click.stop.prevent="handleDetailClick(unit)">
+                    详细事迹材料&gt;&gt;
+                  </div>
+                </div>
+              </div>
+              <div class="person-button-wrapper">
+                <button v-if="!unit.checked" class="person-btn-select"
+                  @click="handleCheckboxChangeParty({ target: { checked: true } }, unit)">
+                  选择
+                </button>
+                <button v-else class="person-btn-deselect"
+                  @click="handleCheckboxChangeParty({ target: { checked: false } }, unit)">
+                  取消选中
+                </button>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+        <div style="
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 15px;
+          ">
+          <div style="margin: 20px;">
+            <span> 已选择 ( {{ selectedCount }} )</span>
+          </div> <!-- 显示已选择的数量 -->
+          <el-button :loading="addLoading" type="primary" size="mini" @click="submitTp">提交投票</el-button>
+          <el-button type="primary" size="mini" @click="tc()">退出</el-button>
+        </div>
+      </div>
+    </el-row>
+    <el-dialog :visible.sync="isDialogVisible" @close="closeDialog">
+      <img :src="currentImage" class="preview-img" />
+    </el-dialog>
+    <!-- 对话框 -->
+    <el-dialog :visible.sync="showTc1" width="560px">
+      <el-row class="sj">
+        <div class="btdlgsty">海洋采油厂♦海二采油管理区</div>
+      </el-row>
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc1.png" alt="" class="imgdlgst" @click="hyTp1" />
+      </el-row>
+
+      <el-row class="sj">
+        <span class="nrdlgnr"><span class="btdlg cc"> 单位概况：</span> 现有在岗员工167人，管理油水井209口，年产原油85.6万吨。</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="btdlg cc">
+          特色亮点：海洋特色新模式推动海上油田大发展</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlg cc">
+          着力打造以“效率提升集中化、高技能人才专业化、技术决策一体化、管理结构扁平化”为主要特征的海洋特色新模式，持续推动老区油藏高效开发与效益提升，连续9年完成生产任务，盈亏平衡点降至24.28美元/桶，树立起了海上油田高质量发展示范标杆。</span>
+      </el-row>
+
+      <el-row class="sj">
+        <span class="nrdlgnr"><span class="btdlg cc"> 主要荣誉：</span>
+          集团公司金牌采油管理区,油田先进基层党组织、金牌基层单位。</span>
+      </el-row>
+
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc2.png" alt="" class="imgdlg" @click="hyTp2" />
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showTc1 = false">关闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="showTc2" width="560px">
+      <el-row class="sj">
+        <div class="btdlgsty">纯梁采油厂♦ 梁南采油管理区</div>
+      </el-row>
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc3.png" alt="" class="imgdlgst" @click="clTp1" />
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlgnr"><span class="btdlg cc"> 单位概况：</span>
+          现有在岗员工94人，管理油水井256口，年产原油8.69万吨。</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="btdlg cc">
+          特色亮点：点责文化引领全员聚焦效益开发，精细梁南成为油田靓丽名片</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlg cc">
+          坚持党建工作与油藏经营互融互促，践行“管理精细到点，工作落实有责”点责文化，采取“三精”举措，做好“四细”文章，不断推进精细化管理，主力区块纯47块始终位列全国同类油藏采收率第一，“精细梁南”成为靓丽名片。</span>
+      </el-row>
+
+      <el-row class="sj">
+        <span class="nrdlgnr"><span class="btdlg cc">
+            主要荣誉：</span>油田开发系统第一个“全国工人先锋号”，山东省先进基层党组织，连续十届集团公司金牌采油管理区，油田首批基层综合性示范工程建设试点单位、首批家文化示范点、首批绿色基层单位、油田开发板块基本功训练现场教学示范点、思想政治工作现场教学示范点。
+        </span>
+      </el-row>
+
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc4.png" alt="" class="imgdlg" @click="clTp2" />
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showTc2 = false">关闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="showTc3" width="560px">
+      <el-row class="sj">
+        <div class="btdlgsty">孤岛采油厂♦采油管理五区</div>
+      </el-row>
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc5.png" alt="" class="imgdlgst" @click="gdTp1" />
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlgnr">
+          <span class="btdlg cc"> 单位概况：</span>
+          现有在岗员工178人，管理油水井1192口，年产原油43万吨。</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="btdlg cc">
+          特色亮点：油气产量连续三年逆势增长，组织效能稳居集团公司前列</span>
+      </el-row>
+      <el-row class="sj flex">
+        <span class="nrdlg cc">
+          锚定老油田油藏经营管理“探路者”发展定位，推进“数据治理+硬件配套+标准提升”三大基础建设，围绕开发好、管理好、经营好油藏，探索以产量、利润为主线的“2+N”模型化管理实施路径，自主研发管理区“运营管理集成平台”，构建了“全面感知+趋势管理+高效协同”的油藏经营管理模式，全力打造“低成本、可复制、智能化示范管理区”，油气产量连续三年逆势增长、组织效能稳居集团公司前列。</span>
+      </el-row>
+
+      <el-row class="sj">
+        <span class="nrdlgnr">
+          <span class="btdlg cc"> 主要荣誉：</span>
+          集团公司金牌采油管理区，油田先进基层党组织、文明建设先进集体。</span>
+      </el-row>
+
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc6.png" alt="" class="imgdlg" @click="gdTp2()" />
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showTc3 = false">关闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="showTc4" width="560px">
+      <el-row class="sj">
+        <div class="btdlgsty">东辛采油厂♦ 营二采油管理区</div>
+      </el-row>
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc7.png" alt="" class="imgdlgst" @click="dxcycTp1()" />
+      </el-row>
+      <el-row class="sj flex">
+        <span class="nrdlgnr"><span class="btdlg cc"> 单位概况：</span>
+          现有在岗员工240人，管理油水井830口，年产原油35.56万吨。</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="btdlg cc">
+          特色亮点：优良传统文化之魂推动新时代能源转型发展</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlg cc">
+          作为华八井、营二井管护单位，营二采油管理区继承发扬艰苦创业、勇于争先的优良传统，深化“两井一站一室”文化引领,持续把党建思想文化优势转化成为经营责任落地、效益质量提升优势；坚定扛起新时代能源转型发展使命，打造了营二井区域风光热储多能互补的“碳中和”示范区，构建了“传承与发展”相结合的绿色阵地。</span>
+      </el-row>
+
+      <el-row class="sj">
+        <span class="nrdlgnr">
+          <span class="btdlg cc"> 主要荣誉：</span>
+          山东省先进基层党组织、集团公司金牌采油管理区、胜利油田先进基层党组织，注采二站被评为“新中国70年最具影响力班组特色品牌班站”。</span>
+      </el-row>
+
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc8.png" alt="" class="imgdlg" @click="dxcycTp2()" />
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showTc4 = false">关闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="showTc5" width="560px">
+      <el-row class="sj">
+        <div class="btdlgsty">桩西采油厂♦采油管理三区</div>
+      </el-row>
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc9.png" alt="" class="imgdlgst" @click="zxcycTp1()" />
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlgnr"><span class="btdlg cc"> 单位概况：</span>
+          现有在岗员工176人，管理油水井305口，年产原油26.13万吨。</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="btdlg cc"> 特色亮点：“铁船文化”领航“精益海油陆采”</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlg cc">
+          赓续“初心如铁船承使命”铁船文化底蕴，营造“价值引领、干劲胜天、胸怀四海”的创业氛围，采取“四全”举措，做好“五力”文章，推行“433”大岗位融合行动，持续推进三基建设提升工程，连续12年产量箭头持续向上，连续6年产量保持在20万吨以上，盈亏平衡点持续下降，“精益海油陆采”成为靓丽名片。</span>
+      </el-row>
+
+      <el-row class="sj">
+        <span class="nrdlgnr">
+          <span class="btdlg cc">主要荣誉：</span>
+          全国工人先锋号，中国企业班组管理与文化建设典型，荣立油田集体三等功，首创油田开发系统低冲次功图采集技术，第三代采集技术获得“为民创新成果”一等奖。</span>
+      </el-row>
+
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc10.png" alt="" class="imgdlg" @click="zxcycTp2()" />
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showTc5 = false">关闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="showTc6" width="560px">
+      <el-row class="sj">
+        <div class="btdlgsty">鲁明公司♦ 青南采油管理区</div>
+      </el-row>
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc11.png" alt="" class="imgdlgst" @click="lmTp1()" />
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlgnr"><span class="btdlg cc"> 单位概况：</span> 现有在岗员工47人，管理油水井105口，年产原油7.3万吨。</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="btdlg cc"> 特色亮点：活用大数据，成为智能油田领跑者</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlg cc">
+          针对开发经营等关键业务流，进行大数据+及信息化+的全方位升级改造，构建形成以“生产现场无人化、运营管理数字化、油藏开发智能化、风险防控立体化、管理架构集约化”为主要特征的智能油田管理新模式，主力区块自动化率超过80%，劳动生产率提高53%，引领推动传统油气生产转型升级，在全油田乃至全行业树起一面智能尖端旗帜。</span>
+      </el-row>
+
+      <el-row class="sj">
+        <span class="nrdlgnr"><span class="btdlg cc"> 主要荣誉：</span>
+          集团公司金牌采油管理区、基层党支部建设示范点，首批中石化信息化条件下标准化建设示范管理区。</span>
+      </el-row>
+
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc12.png" alt="" class="imgdlg" @click="lmTp2()" />
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showTc6 = false">关闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="showTc7" width="560px">
+      <el-row class="sj">
+        <div class="btdlgsty">胜利采油厂♦采油管理三区</div>
+      </el-row>
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc13.png" alt="" class="imgdlgst" @click="slcycTp1()" />
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlgnr"><span class="btdlg cc"> 单位概况：</span> 现有在岗员工223人，管理油水井471口，年产原油27.5万吨。</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="btdlg cc">
+          特色亮点：传承“三老四严”，以优良传统文化之魂夯实发展根基</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlg cc">
+          始终高扬“三老四严”旗帜，把“高度觉悟、严细成风”的理念贯穿到党建引领、素质提升的全过程，以“当老实人，接住接好传承大旗；说老实话，传好传响石油故事；办老实事，端牢端稳能源饭碗”的文化理念凝聚队伍。以“严格的要求筑起战略目标，以严密的组织织起运行大网，以严肃的态度建好安全堤坝，以严明的纪律守住规矩底线”规范管理，夯实基础，不断推进管理区迈向高质量发展轨道。</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class=" nrdlgnr">
+          <span class="btdlg cc"> 主要荣誉：</span>
+          集团公司银牌采油管理区，油田金牌基层单位、基层文化建设示范点、文明集体。</span>
+      </el-row>
+
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc14.png" alt="" class="imgdlg" @click="slcycTp2()" />
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showTc7 = false">关闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="showTc8" width="560px">
+      <el-row class="sj">
+        <div class="btdlgsty">油气集输总厂♦ 东营原油库</div>
+      </el-row>
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc15.png" alt="" class="imgdlgst" @click="yqysTp1()" />
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlgnr"><span class="btdlg cc"> 单位概况：</span> 现有在岗员工89人，担负油田70%原油输销任务。</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="btdlg cc">
+          特色亮点：新技术、一体化智能管理新模式让原油库成为油田安全绿色管理典范</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlg cc">
+          以建设“智能高效、多能互补、环境友好”国内领先一流标杆油库为目标，运用智能化思维推动管理升级，首创了一体化集控、“压力场”“温度场”“流量场”分析预警、油流导航分质分储、系统健康度自我诊断等先进技术，形成了“智能生产、智能管控、智能储输”一体化智能油库管理新模式，实现了油库管理“更少人、更安全、更绿色、更高效”，生产运行岗减少到20人，风险等级由G6降至G1，操作用时压减90%。</span>
+      </el-row>
+
+      <el-row class="sj">
+        <span class="nrdlgnr"><span class="btdlg cc"> 主要荣誉：</span>
+          全国青年安全生产示范岗，山东省先进基层党组织，国内首座“碳中和”原油库。</span>
+      </el-row>
+
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc16.png" alt="" class="imgdlg" @click="yqysTp2()" />
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showTc8 = false">关闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="showTc9" width="560px">
+      <el-row class="sj">
+        <div class="btdlgsty">现河采油厂♦郝现采油管理区</div>
+      </el-row>
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc17.png" alt="" class="imgdlgst" @click="xhcycTp1()" />
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlgnr"><span class="btdlg cc"> 单位概况：</span> ：现有在岗员工274人，管理油水井832口，年产原油20.96万吨。</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="btdlg cc">
+          特色亮点：打造少人高效标准示范区，助力智能油田建设</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlg cc">
+          从组织架构、岗位设置、业务流程、操作规程、采油气现场五个方面推动标准化示范建设，应用数字员工代替人工自动化工作，建立了以生产指挥中心为核心的内外操联动一体化快速协同机制，形成了信息化条件下“集中监控、无人值守、少人巡检、专业维修”的生产运行体系，实现了数据实时采集，现场尽收眼底，资料全准率、异常处置率达到100%，劳动生产率提高75%，人均管井数提高83%，打造了信息化条件下标准化示范区。</span>
+      </el-row>
+
+      <el-row class="sj">
+        <span class="nrdlgnr"><span class="btdlg cc"> 主要荣誉：</span>
+          集团公司“三基”工作先进基层单位、金牌采油管理区。</span>
+      </el-row>
+
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc18.png" alt="" class="imgdlg" @click="xhcycTp2()" />
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showTc9 = false">关闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="showTc10" width="560px">
+      <el-row class="sj">
+        <div class="btdlgsty">东胜公司♦ 牛庄采油管理区</div>
+      </el-row>
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc19.png" alt="" class="imgdlgst" @click="dsgsTp1()" />
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="btdlg cc">单位概况：</span>
+        <span class="nrdlgnr">
+          现有在岗员工165人，管理油水井184口，年产原油11.85万吨。</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="btdlg cc"> 特色亮点：“领航发展”助力“东胜精攻”</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlg cc">
+          发扬“领先发展扬帆起航”团队精神，突出党建引领、聚焦核心业务、强化责任落实，创新提出大排量、大压差注水方式，并应用极简注水系统，破解未动用储量开发难题，拉开了探索特低渗透油藏开发的序幕，成为油田第一个压驱先导试验实施井组，实现产量6连升，盈亏平衡点、自然递减率5连降，为东胜公司高质量发展贡献了牛庄力量。</span>
+      </el-row>
+
+      <el-row class="sj">
+        <span class="nrdlgnr"><span class="btdlg cc"> 主要荣誉：</span>
+          集团公司银牌采油管理区，胜利油田文明集体、金牌基层单位、先进基层党组织、首批绿色基层单位。</span>
+      </el-row>
+
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc20.png" alt="" class="imgdlg" @click="dsgsTp2()" />
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showTc10 = false">关闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="showTc11" width="560px">
+      <el-row class="sj">
+        <div class="btdlgsty">勘探开发研究院♦采收率试验室</div>
+      </el-row>
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc21.png" alt="" class="imgdlgst" @click="ktkfTp1()" />
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlgnr"><span class="btdlg cc">单位概况：</span>
+          现有在岗员工49人，其中博士10人（博士后5人），承担油田化学驱提高采收率新技术、新方法研究及矿场实践。</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="btdlg cc"> 特色亮点：创新突破世界级难题支撑油田发展</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlg cc">
+          建有山东省提高油气采收率示范工程技术研究中心、中石化提高采收率研究中心、中石化化学驱提高采收率重点实验室、山东省企业“泰山学者”岗位等高端研究平台。近年来，聚焦油田高温、高盐等化学驱提高采收率世界级难题，首创无碱二元复合驱等一系列在国际上具有重大影响的高水平科研成果，成功挑战了石油采收率60%的极限，实现了胜利化学驱应用阵地从水驱向聚驱、从整装向断块、从稀油向稠油、从陆上向海上的拓展，为油田高质量可持续发展提供了强力支撑。</span>
+      </el-row>
+
+      <el-row class="sj">
+        <span class="nrdlgnr"><span class="btdlg cc"> 主要荣誉：</span>
+          国家科技进步奖2项、中国专利金奖1项、国家发明专利授权50余项、省部级奖励16项、全国“五一”巾帼标兵岗、山东省文明单位、中国石化先进集体、中石化创新团队。</span>
+      </el-row>
+
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc22.png" alt="" class="imgdlg" @click="ktkfTp2()" />
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showTc11 = false">关闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="showTc12" width="560px">
+      <el-row class="sj">
+        <div class="btdlgsty">石油工程技术研究院♦稠油开采研究所</div>
+      </el-row>
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc23.png" alt="" class="imgdlgst" @click="sygcTp1()" />
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlgnr"><span class="btdlg cc"> 单位概况：</span>
+          现有在岗员工44人，承担在研省部级及以上课题28项，年均完成相关室内研究优化300余批次、技术推广及勘探开发工艺方案设计等近800井次。</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="btdlg cc">
+          特色亮点：锻造自主可控“杀手锏”，争做科技兴油排头兵</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlg cc">
+          聚焦油田稠油效益稳产，持续攻关稠油开采配套工艺，“薄储层超稠油高效开发关键技术”突破行业难题，实现春风油田薄储层超稠油百万吨产能高速高效开发，为油田新增产值586亿元。聚焦西部勘探开发技术瓶颈，创新提出“少注快采、定温转周”开发模式，助力1300万勘探储量升级。攻关热化学蒸汽驱等大幅提高采收率接替技术，持续拓宽化学降粘复合驱、微生物驱应用界限，“冷热开发组合”实现稠油效益稳产。</span>
+      </el-row>
+
+      <el-row class="sj">
+        <span class="nrdlgnr"><span class="btdlg cc"> 主要荣誉：</span>中国石化工人先锋号，胜利油田先进基层党组织、金牌基层单位、文明集体。</span>
+      </el-row>
+
+      <el-row style="
+          display: flex;
+          flex-direction: row;
+          justify-content: space-around;
+        ">
+        <img src="../../assets/images/tc24.png" alt="" style="width: 150px; height: 120px" @click="sygcTp2()" />
+        <img src="../../assets/images/tg44.png" alt="" style="width: 150px; height: 120px" @click="sygcTp3()" />
+        <img src="../../assets/images/tg45.png" alt="" style="width: 150px; height: 120px" @click="sygcTp4()" />
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showTc12 = false">关闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="showTc13" width="560px">
+      <el-row class="sj">
+        <div class="btdlgsty">油气井下作业中心♦ 东辛作业区</div>
+      </el-row>
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc25.png" alt="" class="imgdlgst" @click="yqjxTp1()" />
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlgnr"><span class="btdlg cc"> 单位概况：</span> 现有在岗员工1272人，主要设备65台，承担东辛采油厂及部分油公司油水井的大修、侧钻、连油、小修等作业
+          施工任务。</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="btdlg cc">
+          特色亮点：目标同向推动高质量保障，实现甲乙双方合作共赢</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlg cc">
+          着眼“油藏经营管理者”工作定位，坚持作业修井与采油甲方目标同向、合作共赢，以“三精论证法”为基础、以“三早五优两强化”为抓手、以“三六一”工作法为保障，推动“优质优价、优速优价、高端特价”机制全面落实落地，实现了甲乙双向提效、双方共赢。</span>
+      </el-row>
+
+      <el-row class="sj">
+        <span class="nrdlgnr"><span class="btdlg cc"> 主要荣誉：</span>
+          油田文明集体、先进基层党组织。</span>
+      </el-row>
+
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc26.png" alt="" class="imgdlg" @click="yqjxTp2()" />
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showTc13 = false">关闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="showTc14" width="560px">
+      <el-row class="sj">
+        <div class="btdlgsty">运输分公司♦危化品运输二公司</div>
+      </el-row>
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc27.png" alt="" class="imgdlgst" @click="ysfgsTp1()" />
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlgnr"><span class="btdlg cc">单位概况：</span>
+          现有在岗员工37人，承担山东、河北等12个地市石化系统、地炼企的外销原油、低硫船燃、成品油拉运业务。</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="btdlg cc">
+          特色亮点：“运输+安全”，让危化品运输风险可控</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlg cc">
+          创新发展思路，打破传统单一公路运输运营模式，创新实施按罐交接、甩挂运输、双程重载、平台化运营，积极推动向“运输+”转型，全员劳动生产率同比提高18%。在中石化第十届劳动竞赛中被评为金牌运输公司，连续三年被评为油田金牌基层单位、党建A档。</span>
+      </el-row>
+
+      <el-row class="sj">
+        <span class="nrdlgnr"><span class="btdlg cc"> 主要荣誉：</span>
+          油田金牌运输公司、金牌基层单位、文明集体、工人先锋号，东营市道路运输行业优秀党组织。</span>
+      </el-row>
+
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc28.png" alt="" class="imgdlg" @click="ysfgsTp2()" />
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showTc14 = false">关闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="showTc15" width="560px">
+      <el-row class="sj">
+        <div class="btdlgsty">电力分公司♦胜东供电管理区</div>
+      </el-row>
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc29.png" alt="" class="imgdlgst" @click="dlfgsTp1()" />
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlgnr"><span class="btdlg cc">单位概况：</span>
+          现有在岗员工299人，承担东辛采油厂、鲁明公司、石油开发中心用电维护保障任务。</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="btdlg cc">
+          特色亮点：百人服务百万吨、百人创新百专利、百人创效千万元</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlg cc">
+          围绕服务油藏经营价值最大化，创新电网运营管理模式，电力线路故障率下降45%；以“把想法变成做法、把点子变成金子”的团队精神，打造胜利电力集智创新“梦工厂”，“马广俊创新工作室”共获7项国家发明专利、115项实用新型专利、各类创新成果340余项。</span>
+      </el-row>
+
+      <el-row class="sj">
+        <span class="nrdlgnr"><span class="btdlg cc"> 主要荣誉：</span>
+          集团公司先进基层党组织、金牌供电管理区，马广俊创新工作室被授予中国石化示范性职工创新工作室，胜利油田高校毕业生见习基地。</span>
+      </el-row>
+
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc30.png" alt="" class="imgdlg" @click="dlfgsTp2()" />
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showTc15 = false">关闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="showTc16" width="560px">
+      <el-row class="sj">
+        <div class="btdlgsty">注汽技术服务中心♦现河注汽项目部</div>
+      </el-row>
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc31.png" alt="" class="imgdlgst" @click="zqjsTp1()" />
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlgnr"><span class="btdlg cc">
+            单位概况：</span>现有在岗员工230人，年注汽能力70万吨、二氧化碳5万吨，负责现河、石开、东辛、鲁胜和清河采油厂部分油区注汽（气）业务。</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="btdlg cc">
+          特色亮点：“高质高效”服务主业发展，“合作双赢”支撑油藏开发</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlg cc">
+          坚持以“为油藏注气、为员工鼓气、为胜利争气”为价值取向，聚焦油气增储上产核心需求，坚持目标同向、合作共赢，创新“高品质注入”全链条运行机制，深化安全“向内划圆”理念、“三化三零”施工，应用“制输注”系列核心技术，为油藏经营提供了高质量全生命周期服务，主要服务油区油汽比稳步提升。</span>
+      </el-row>
+
+      <el-row class="sj">
+        <span class="nrdlgnr"><span class="btdlg cc"> 主要荣誉：</span>
+          油田专业化单位首批中石化五项劳动竞赛银牌项目部，胜利油田集体三等功、三八红旗集体、优秀绿色基层单位，油田专业化单位首个走出胜利、走出中石化的基层单位，清河厂蒸汽注入项目获胜利油田外闯市场十大标杆项目。</span>
+      </el-row>
+
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc32.png" alt="" class="imgdlg" @click="zqjsTp2()" />
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showTc16 = false">关闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="showTc17" width="560px">
+      <el-row class="sj">
+        <div class="btdlgsty">胜利发电厂♦发电运行部</div>
+      </el-row>
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc33.png" alt="" class="imgdlgst" @click="slfdcTp1()" />
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlgnr">
+          <span class="btdlg cc">单位概况：</span>
+          现有在岗员工141人，负责两台220MW和两台300MW热电联供机组的运行，110kV、220kV线路负荷的配电工作。</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="btdlg cc">
+          特色亮点：做强专业保障，打造电力之源、热力之源、绿色之源</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlg cc">
+          立足油田“源网荷储”一体化运行，聚焦“做强做优热电主业，着力打造新型能源供给调控中心”的发展定位，全力打造成为油田增储上产电力之源、居民严冬热力之源、清洁生产绿色之源，为黄河三角洲区域经济发展和民生建设提供了强劲动力。</span>
+      </el-row>
+
+      <el-row class="sj">
+        <span class="nrdlgnr"><span class="btdlg cc"> 主要荣誉：</span>
+          油田文明集体、金牌基层单位。</span>
+      </el-row>
+
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc34.png" alt="" class="imgdlg" @click="slfdcTp2()" />
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showTc17 = false">关闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="showTc18" width="560px">
+      <el-row class="sj">
+        <div class="btdlgsty">油藏动态监测中心♦工程测井项目部</div>
+      </el-row>
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc35.png" alt="" class="imgdlgst" @click="ycdtTp1()" />
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlgnr"><span class="btdlg cc">单位概况：</span>
+          现有在岗员工165人，承担胜采片区油水井动态监测任务，年均测试5000井次，产值7000余万元。</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="btdlg cc">
+          特色亮点：以技术进步支撑效益开发，以质量进步实现发展共赢</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlg cc">
+          以高质量党建引领高质量发展，完善“五行”党建工作模式，创新“五微一体”党员学习教育，充分发挥党建引领带动作用；坚持技术立身，着力引进光纤可视化等测井技术，自主研发电动打孔等解释软件，全力打造工程测井品牌；推行“五到位”安全工作法，筑牢安全防线，夯实发展根基。</span>
+      </el-row>
+
+      <el-row class="sj">
+        <span class="nrdlgnr"><span class="btdlg cc"> 主要荣誉：</span>
+          中石化工人先锋号，油田金牌基层单位、文明集体。</span>
+      </el-row>
+
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc36.png" alt="" class="imgdlg" @click="ycdtTp2()" />
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showTc18 = false">关闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="showTc19" width="560px">
+      <el-row class="sj">
+        <div class="btdlgsty">西城服务协调中心♦ 员工服务部</div>
+      </el-row>
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc37.png" alt="" class="imgdlgst" @click="xcfwTp1()" />
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlgnr"><span class="btdlg cc"> 单位概况：</span>
+          现有在岗员工108人，为区域内88家基层单位、20余万员工群众提供住房公积金、补充医疗保险、员工权益保障等五大类83项服务。</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="btdlg cc">
+          特色亮点：做优“悉诚为您”品牌，打造油田员工服务新标杆</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlg cc">
+          在系统内率先编制《员工服务业务操作手册》，推进服务大厅标准化样板建设，胜建服务大厅被评为油田首家山东省医保经办服务标准化窗口；创新4厅8点全覆盖服务模式，积极推进“西城全域四进”、实施一窗受理、探索业务联办、推行“码上服务”等举措，员工群众满意率保持98%以上。</span>
+      </el-row>
+
+      <el-row class="sj">
+        <span class="nrdlgnr"><span class="btdlg cc"> 主要荣誉：</span>
+          油田先进基层党组织、金牌基层单位。</span>
+      </el-row>
+
+      <el-row style="
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+        ">
+        <img src="../../assets/images/tc38.png" alt="" style="width: 120px; height: 120px" @click="xcfwTp2()" />
+        <img src="../../assets/images/tc39.png" alt="" style="width: 120px; height: 120px" @click="xcfwTp3()" />
+        <img src="../../assets/images/tc40.png" alt="" style="width: 120px; height: 120px" @click="xcfwTp4()" />
+        <img src="../../assets/images/tc41.png" alt="" style="width: 120px; height: 120px" @click="xcfwTp5()" />
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showTc19 = false">关闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="showTc20" width="560px">
+      <el-row class="sj">
+        <div class="btdlgsty">矿区物业服务中心♦物华矿区物业服务部</div>
+      </el-row>
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc42.png" alt="" class="imgdlgst" @click="kqwyTp1()" />
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlgnr"><span class="btdlg cc">单位概况：</span>
+          现有在岗员工127人，承担5家直属单位的25个办公物业服务。</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="btdlg cc">
+          特色亮点：党建引领，文化塑魂，品牌强企，以优质服务打造后勤板块标杆团队</span>
+      </el-row>
+
+      <el-row class="sj flex">
+        <span class="nrdlg cc">
+          积极探索“党员+项目+团队”模式，运用“经营创效、降本增效、创新提效、考核促效”四位一体创效手段，将价值思维和效益理念贯穿于各项工作，特别是以吕书栋劳模创新工作室、胜利油田物业行业职工创新联盟、胜利油田技师协会矿区物业服务中心技师协会为平台，积极架设成果孵化室、电工实训室等创新创效平台，解决生产难题200多个，取得创新成果80多项，创造直接经济效益600余万元，打造了“为油服务”品牌。</span>
+      </el-row>
+
+      <el-row class="sj">
+        <span class="nrdlgnr"><span class="btdlg cc"> 主要荣誉：</span>
+          集团公司基层党支部建设示范点，油田金牌基层单位、先进基层党组织、文明集体、绿色基层单位。</span>
+      </el-row>
+
+      <el-row class="img-container sj">
+        <img src="../../assets/images/tc43.png" alt="" class="imgdlg" @click="kqwyTp2()" />
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showTc20 = false">关闭</el-button>
+      </span>
+    </el-dialog>
+    <!-- 详细事迹材料对话框 -->
+    <el-dialog :visible.sync="showDetailDialog" title="详细事迹材料" width="600px" custom-class="detail-dialog"
+      @close="closeDetailDialog">
+      <div class="detail-content">
+        <!-- 工作图片 -->
+        <div class="detail-section">
+          <div class="section-title">
+            <span class="title-bar"></span>
+            <span class="title-text">工作图片</span>
+          </div>
+          <div class="work-images">
+            <div class="work-image-item">
+              <img :src="(currentDetailUnit && currentDetailUnit.workImage1) || require('../../assets/images/tc1.png')"
+                alt="工作图片1" />
+            </div>
+            <div class="work-image-item">
+              <img :src="(currentDetailUnit && currentDetailUnit.workImage2) || require('../../assets/images/tc2.png')"
+                alt="工作图片2" />
+            </div>
+          </div>
+        </div>
+        <!-- 个人简介 -->
+        <div class="detail-section">
+          <div class="section-title">
+            <span class="title-bar"></span>
+            <span class="title-text">个人简介</span>
+          </div>
+          <div class="section-content">
+            {{ (currentDetailUnit && currentDetailUnit.bio) || (currentDetailUnit && currentDetailUnit.description) ||
+              (currentDetailUnit && currentDetailUnit.management) || '暂无个人简介' }}
+          </div>
+        </div>
+        <!-- 事迹描述 -->
+        <div class="detail-section">
+          <div class="section-title">
+            <span class="title-bar"></span>
+            <span class="title-text">事迹描述</span>
+          </div>
+          <div class="section-content">
+            <div class="deeds-item">
+              <div class="deeds-title">一、精湛的业务能力与丰富的实战经验</div>
+              <div class="deeds-text">
+                乔军同志熟悉储运单元全流程操作,从液化烃罐区流程到液化气装车外销,各个环节均能熟练掌控。他尤其擅长储罐安全设施检查、管线吹扫、机泵故障排查等关键作业,今年带领班组顺利完成总厂装置开停工的配合工作,确保了大检修的顺利。
+              </div>
+            </div>
+            <div class="deeds-item">
+              <div class="deeds-title">二、精湛的业务能力与丰富的实战经验</div>
+              <div class="deeds-text">
+                乔军同志熟悉储运单元全流程操作,从液化烃罐区流程到液化气装车外销,各个环节均能熟练掌控。他尤其擅长储罐安全设施检查、管线吹扫、机泵故障排查等关键作业,今年带领班组顺利完成总厂装置开停工的配合工作,确保了大检修的顺利。
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showDetailDialog = false">关闭</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { addTp } from "@/api/benchmarkVoting.js";
+import store from "@/store";
+import { encrypt, decrypt } from "@/js/aesEncrypt"
+export default {
+  name: "benchmarkVoting",
+  data() {
+    return {
+      currentImage: '',
+      isDialogVisible: false,
+      name: null,
+      ipdz: null,
+      addLoading: false,
+      fwXz: [],
+      zyhXz: [],
+      kyXz: [],
+      yzXz: [],
+      showTc1: false,
+      showTc2: false,
+      showTc3: false,
+      showTc4: false,
+      showTc5: false,
+      showTc6: false,
+      showTc7: false,
+      showTc8: false,
+      showTc9: false,
+      showTc10: false,
+      showTc11: false,
+      showTc12: false,
+      showTc13: false,
+      showTc14: false,
+      showTc15: false,
+      showTc16: false,
+      showTc17: false,
+      showTc18: false,
+      showTc19: false,
+      showTc20: false,
+      dialogVisible: false,
+      selectedUnit: {},
+      showDialog: false, // 控制对话框显示的变量
+      showDetailDialog: false, // 控制详细事迹材料对话框显示
+      currentDetailUnit: null, // 当前查看详细事迹的单位
+      form: {
+        yqsc: [], // 用于存储选中的单位
+        ky: [],
+        zyh: [],
+        fw: [],
+        party: [], // 党建
+      },
+      selectedUnits: {
+        oilGasProduction: [],
+        research: [],
+        specialization: [],
+        serviceCoordination: [],
+      },
+      oilGasProduction: [
+        { name: "海洋采油厂", management: "海二采油管理区", value: "1" },
+        { name: "纯梁采油厂", management: "梁南采油管理区", value: "2" },
+        { name: "孤岛采油厂", management: "采油管理五区", value: "3" },
+        { name: "东辛采油厂", management: "营二采油管理区", value: "4" },
+        { name: "桩西采油厂", management: "采油管理三区", value: "5" },
+        { name: "鲁明公司", management: "青南采油管理区", value: "6" },
+        { name: "胜利采油厂", management: "采油管理三区", value: "7" },
+        { name: "油气集输总厂", management: "东营原油库", value: "8" },
+        { name: "现河采油厂", management: "郝现采油管理区", value: "9" },
+        { name: "东胜公司", management: "牛庄采油管理区", value: "10" },
+      ],
+      research: [
+        { name: "勘探开发研究院", management: "采收率试验室", value: "11" },
+        {
+          name: "石油工程技术研究院",
+          management: "稠油开采研究所",
+          value: "12",
+        },
+      ],
+      specialization: [
+        { name: "油气井下作业中心", management: "东辛作业区", value: "13" },
+        { name: "运输分公司", management: "危化品运输二公司", value: "14" },
+        { name: "电力分公司", management: "胜东供电管理区", value: "15" },
+        { name: "注汽技术服务中心", management: "现河注汽项目部", value: "16" },
+        { name: "胜利发电厂", management: "发电运行部", value: "17" },
+        { name: "油藏动态监测中心", management: "工程测井项目部", value: "18" },
+      ],
+      serviceCoordination: [
+        { name: "西城服务协调中心", management: "员工服务部", value: "19" },
+        {
+          name: "矿区物业服务中心",
+          management: "物华矿区物业服务部",
+          value: "20",
+        },
+      ],
+      partyBuilding: [
+        { name: "党建单位1", management: "党建部门1", value: "21" },
+        { name: "党建单位2", management: "党建部门2", value: "22" },
+      ],
+    };
+  },
+  computed: {
+    // 计算已选择的复选框数量
+    selectedCount() {
+      const allUnits = [
+        ...this.oilGasProduction,
+        ...this.research,
+        ...this.specialization,
+        ...this.serviceCoordination,
+        ...this.partyBuilding
+      ];
+      return allUnits.filter(unit => unit.checked).length; // 计算已选中的数量
+    },
+    // 获取已选中的单位值
+    filteredSelectedUnits() {
+      return [
+        ...this.oilGasProduction.filter(unit => unit.checked),
+        ...this.research.filter(unit => unit.checked),
+        ...this.specialization.filter(unit => unit.checked),
+        ...this.serviceCoordination.filter(unit => unit.checked),
+        ...this.partyBuilding.filter(unit => unit.checked)
+      ];
+    }
+  },
+  mounted() {
+    //vue取出ad账号
+    // console.log(store.getters.adAccount, "vuex取出adAccount");
+    // console.log(store.getters.name, "vuex取出姓名");
+    let query = this.$route.query;
+    let tk = query.tk;
+    console.log(tk, "tk================")
+    //解密参数
+    var data = decrypt(tk)
+    console.log(data, "解密后data================")
+    //字符串转obj
+    var obj = JSON.parse(data)
+    console.log(obj, "字符串转obj=========")
+    //取出ad账号
+    this.ipdz = obj.adAccount
+    this.name = obj.realname
+  },
+  methods: {
+    //海洋采油厂
+    hyTp1() {
+      this.currentImage = require('../../assets/images/tc1.png');
+      this.isDialogVisible = true;
+    },
+
+
+    hyTp2() {
+      this.currentImage = require('../../assets/images/tc2.png');
+      this.isDialogVisible = true;
+    },
+
+    //纯梁采油厂
+    clTp1() {
+      this.currentImage = require('../../assets/images/tc3.png');
+      this.isDialogVisible = true;
+    },
+    clTp2() {
+      this.currentImage = require('../../assets/images/tc4.png');
+      this.isDialogVisible = true;
+    },
+    //孤岛采油厂
+    gdTp1() {
+      this.currentImage = require('../../assets/images/tc5.png');
+      this.isDialogVisible = true;
+    },
+    gdTp2() {
+      this.currentImage = require('../../assets/images/tc6.png');
+      this.isDialogVisible = true;
+    },
+    //东辛采油厂
+    dxcycTp1() {
+      this.currentImage = require('../../assets/images/tc7.png');
+      this.isDialogVisible = true;
+    },
+    dxcycTp2() {
+      this.currentImage = require('../../assets/images/tc8.png');
+      this.isDialogVisible = true;
+    },
+    //桩西采油厂
+    zxcycTp1() {
+      this.currentImage = require('../../assets/images/tc9.png');
+      this.isDialogVisible = true;
+    },
+    zxcycTp2() {
+      this.currentImage = require('../../assets/images/tc10.png');
+      this.isDialogVisible = true;
+    },
+    //鲁明公司
+    lmTp1() {
+      this.currentImage = require('../../assets/images/tc11.png');
+      this.isDialogVisible = true;
+    },
+    lmTp2() {
+      this.currentImage = require('../../assets/images/tc12.png');
+      this.isDialogVisible = true;
+    },
+    //胜利采油厂
+    slcycTp1() {
+      this.currentImage = require('../../assets/images/tc13.png');
+      this.isDialogVisible = true;
+    },
+    slcycTp2() {
+      this.currentImage = require('../../assets/images/tc14.png');
+      this.isDialogVisible = true;
+    },
+    //油气集输总厂
+    yqysTp1() {
+      this.currentImage = require('../../assets/images/tc15.png');
+      this.isDialogVisible = true;
+    },
+    yqysTp2() {
+      this.currentImage = require('../../assets/images/tc16.png');
+      this.isDialogVisible = true;
+    },
+    //现河采油厂
+    xhcycTp1() {
+      this.currentImage = require('../../assets/images/tc17.png');
+      this.isDialogVisible = true;
+    },
+    xhcycTp2() {
+      this.currentImage = require('../../assets/images/tc18.png');
+      this.isDialogVisible = true;
+    },
+    //东胜公司
+    dsgsTp1() {
+      this.currentImage = require('../../assets/images/tc19.png');
+      this.isDialogVisible = true;
+    },
+    dsgsTp2() {
+      this.currentImage = require('../../assets/images/tc20.png');
+      this.isDialogVisible = true;
+    },
+    //勘探开发研究院
+    ktkfTp1() {
+      this.currentImage = require('../../assets/images/tc21.png');
+      this.isDialogVisible = true;
+    },
+    ktkfTp2() {
+      this.currentImage = require('../../assets/images/tc22.png');
+      this.isDialogVisible = true;
+    },
+    //石油工程技术研究院
+    sygcTp1() {
+      this.currentImage = require('../../assets/images/tc23.png');
+      this.isDialogVisible = true;
+    },
+    sygcTp2() {
+      this.currentImage = require('../../assets/images/tc24.png');
+      this.isDialogVisible = true;
+    },
+    sygcTp3() {
+      this.currentImage = require('../../assets/images/tg44.png');
+      this.isDialogVisible = true;
+    },
+    sygcTp4() {
+      this.currentImage = require('../../assets/images/tg45.png');
+      this.isDialogVisible = true;
+    },
+    //油气井下作业中心
+    yqjxTp1() {
+      this.currentImage = require('../../assets/images/tc25.png');
+      this.isDialogVisible = true;
+    },
+    yqjxTp2() {
+      this.currentImage = require('../../assets/images/tc26.png');
+      this.isDialogVisible = true;
+    },
+    //运输分公司
+    ysfgsTp1() {
+      this.currentImage = require('../../assets/images/tc27.png');
+      this.isDialogVisible = true;
+    },
+    ysfgsTp2() {
+      this.currentImage = require('../../assets/images/tc28.png');
+      this.isDialogVisible = true;
+    },
+    //电力分公司
+    dlfgsTp1() {
+      this.currentImage = require('../../assets/images/tc29.png');
+      this.isDialogVisible = true;
+    },
+    dlfgsTp2() {
+      this.currentImage = require('../../assets/images/tc30.png');
+      this.isDialogVisible = true;
+    },
+    //注汽技术服务中心
+    zqjsTp1() {
+      this.currentImage = require('../../assets/images/tc31.png');
+      this.isDialogVisible = true;
+    },
+    zqjsTp2() {
+      this.currentImage = require('../../assets/images/tc32.png');
+      this.isDialogVisible = true;
+    },
+    //胜利发电厂
+    slfdcTp1() {
+      this.currentImage = require('../../assets/images/tc33.png');
+      this.isDialogVisible = true;
+    },
+    slfdcTp2() {
+      this.currentImage = require('../../assets/images/tc34.png');
+      this.isDialogVisible = true;
+    },
+    //油藏动态监测中心
+    ycdtTp1() {
+      this.currentImage = require('../../assets/images/tc35.png');
+      this.isDialogVisible = true;
+    },
+    ycdtTp2() {
+      this.currentImage = require('../../assets/images/tc36.png');
+      this.isDialogVisible = true;
+    },
+    //西城服务协调中心
+    xcfwTp1() {
+      this.currentImage = require('../../assets/images/tc37.png');
+      this.isDialogVisible = true;
+    },
+    xcfwTp2() {
+      this.currentImage = require('../../assets/images/tc38.png');
+      this.isDialogVisible = true;
+    },
+    xcfwTp3() {
+      this.currentImage = require('../../assets/images/tc39.png');
+      this.isDialogVisible = true;
+    },
+    xcfwTp4() {
+      this.currentImage = require('../../assets/images/tc40.png');
+      this.isDialogVisible = true;
+    },
+    xcfwTp5() {
+      this.currentImage = require('../../assets/images/tc41.png');
+      this.isDialogVisible = true;
+    },
+    //矿区物业服务中心
+    kqwyTp1() {
+      this.currentImage = require('../../assets/images/tc42.png');
+      this.isDialogVisible = true;
+    },
+    kqwyTp2() {
+      this.currentImage = require('../../assets/images/tc43.png');
+      this.isDialogVisible = true;
+    },
+
+    closeDialog() {
+      this.isDialogVisible = false; // 关闭对话框
+    },
+    submitTp() {
+      this.addLoading = true;
+      const isValid =
+        this.fwXz.length > 0 &&
+        this.zyhXz.length > 0 &&
+        this.kyXz.length > 0 &&
+        this.yzXz.length > 0;
+      if (!isValid) {
+        this.$modal.msgError("每个板块至少选 1 家单位。");
+        this.addLoading = false;
+        return; // 终止提交
+      }
+      const params = {
+        name: this.name,
+        ipdz: this.ipdz,
+        tpInfoCbListA: this.fwXz,
+        tpInfoCbListB: this.zyhXz,
+        tpInfoCbListC: this.kyXz,
+        tpInfoCbListD: this.yzXz,
+      };
+
+      addTp(params)
+        .then((response) => {
+          if (response.code == 200) {
+            this.$modal.msgSuccess("投票成功");
+          } else if (response.code == 500) {
+            this.$modal.msgError("已投票，请勿重复投票");
+          }
+        })
+        .finally(() => {
+          this.addLoading = false;
+        });
+    },
+
+    handleTextClick(unit) {
+      console.log(unit, "11111111");
+      this.selectedUnit = unit; // 存储选中的单位
+      if (unit.value == "1") {
+        this.showTc1 = true;
+      }
+      if (unit.value == "2") {
+        this.showTc2 = true;
+      }
+      if (unit.value == "3") {
+        this.showTc3 = true;
+      }
+      if (unit.value == "4") {
+        this.showTc4 = true;
+      }
+      if (unit.value == "5") {
+        this.showTc5 = true;
+      }
+      if (unit.value == "6") {
+        this.showTc6 = true;
+      }
+      if (unit.value == "7") {
+        this.showTc7 = true;
+      }
+      if (unit.value == "8") {
+        this.showTc8 = true;
+      }
+      if (unit.value == "9") {
+        this.showTc9 = true;
+      }
+      if (unit.value == "10") {
+        this.showTc10 = true;
+      }
+      if (unit.value == "11") {
+        this.showTc11 = true;
+      }
+      if (unit.value == "12") {
+        this.showTc12 = true;
+      }
+      if (unit.value == "13") {
+        this.showTc13 = true;
+      }
+      if (unit.value == "14") {
+        this.showTc14 = true;
+      }
+      if (unit.value == "15") {
+        this.showTc15 = true;
+      }
+      if (unit.value == "16") {
+        this.showTc16 = true;
+      }
+      if (unit.value == "17") {
+        this.showTc17 = true;
+      }
+      if (unit.value == "18") {
+        this.showTc18 = true;
+      }
+      if (unit.value == "19") {
+        this.showTc19 = true;
+      }
+      if (unit.value == "20") {
+        this.showTc20 = true;
+      }
+    },
+    handleCheckboxChange(event, unit) {
+      if (event.target.checked) {
+        this.yzXz.push({ dwid: unit.value });
+      } else {
+        this.yzXz = this.yzXz.filter((item) => item.dwid !== unit.value);
+      }
+      console.log(this.yzXz, "当前选中的 yzXz");
+    },
+    handleCheckboxChangeky(event, unit) {
+      if (event.target.checked) {
+        this.kyXz.push({ dwid: unit.value });
+      } else {
+        this.kyXz = this.kyXz.filter((item) => item.dwid !== unit.value);
+      }
+      console.log(this.kyXz, "当前选中的 kyXz");
+    },
+    handleCheckboxChangezyh(event, unit) {
+      if (event.target.checked) {
+        this.zyhXz.push({ dwid: unit.value });
+      } else {
+        this.zyhXz = this.zyhXz.filter((item) => item.dwid !== unit.value);
+      }
+      console.log(this.zyhXz, "当前选中的 zyhXz");
+    },
+    handleCheckboxChangefw(event, unit) {
+      if (event.target.checked) {
+        this.fwXz.push({ dwid: unit.value });
+      } else {
+        this.fwXz = this.fwXz.filter((item) => item.dwid !== unit.value);
+      }
+      console.log(this.fwXz, "当前选中的 fwXz");
+    },
+    handleCheckboxChangeParty(event, unit) {
+      if (event.target.checked) {
+        this.form.party.push({ dwid: unit.value });
+      } else {
+        this.form.party = this.form.party.filter((item) => item.dwid !== unit.value);
+      }
+      console.log(this.form.party, "当前选中的 party");
+    },
+
+    openDialog(unit) {
+      this.selectedUnit = unit; // 保存当前点击的单位信息
+      this.showDialog = true; // 显示弹窗
+    },
+
+    handleDetailClick(unit) {
+      this.currentDetailUnit = unit; // 保存当前查看的单位信息
+      this.showDetailDialog = true; // 显示详细事迹材料对话框
+    },
+
+    closeDetailDialog() {
+      this.showDetailDialog = false;
+      this.currentDetailUnit = null;
+    },
+
+    tc() {
+      window.location.href = "http://ipms.slof.com/tzLogout/sjbgtx"
+    }
+  },
+};
+</script>
+
+<style scoped>
+.preview-img {
+  width: 100%;
+  /* 或者根据需要设置 */
+  height: auto;
+  /* 保持比例 */
+}
+
+.xzText {
+  font-family: "黑体", sans-serif;
+  /* 或者使用 "Heiti" */
+  font-size: 15.5px;
+  /* 黑色字体 */
+}
+
+.btdlg {
+  display: inline-block !important;
+  font-family: Microsoft YaHei !important;
+  font-weight: bold !important;
+  font-size: 14px !important;
+  color: #c80000 !important;
+  line-height: 30px !important;
+}
+
+.nrdlg {
+  display: inline-block !important;
+  font-family: Microsoft YaHei !important;
+  font-weight: bold !important;
+  font-size: 14px !important;
+  line-height: 30px !important;
+}
+
+.nrdlgnr {
+  display: inline-block !important;
+  font-family: Microsoft YaHei !important;
+  font-weight: bold !important;
+  font-size: 14px !important;
+  line-height: 30px !important;
+}
+
+.img-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.imgdlg {
+  /* width: 560px; */
+  width: 100%;
+  height: 120px;
+}
+
+.imgdlgst {
+  /* width: 560px; */
+  width: 100%;
+  height: 220px;
+}
+
+.sj {
+  /* width: 560px; */
+  margin: 10px 0;
+}
+
+.cc {
+  text-indent: 2em;
+}
+
+.text-align {
+  display: flex;
+  justify-content: flex-end;
+  margin: 0px 10px;
+}
+
+.text {
+  margin-left: auto;
+  margin: 10px 15px;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  align-items: inherit;
+  justify-content: center;
+  margin: 20px 0 20px -30px;
+}
+
+.checkbox-group-inline {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.checkbox-group-inline .el-checkbox {
+  margin-right: 10px;
+  /* 给复选框之间增加一些间距 */
+}
+
+.box {
+  position: relative;
+  top: -20px;
+  left: 0;
+  margin-bottom: -20px;
+  width: 100%;
+  min-height: 102vh;
+  background-image: url(../../assets/images/beijing.png) !important;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: left top;
+  background-color: #f55202;
+}
+
+.container {
+  max-width: 100vw;
+  overflow-y: auto;
+  height: 100vh;
+}
+
+.bg {
+  padding-bottom: 20px;
+  padding-top: 30px;
+  min-height: 102vh;
+  width: 100%;
+  background-image: linear-gradient(180deg,
+      rgba(255, 255, 255, 0) 30%,
+      rgba(255, 255, 255, 0.65) 100%);
+}
+
+h1 {
+  text-align: center;
+  color: #333;
+}
+
+.toptit {
+  background-color: transparent;
+  border-radius: 8px 8px 0 0;
+}
+
+.content {
+  margin: 20px auto;
+  max-width: 70%;
+  padding: 20px;
+  background-color: #f0f8ff;
+  /* 设置背景色 */
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.bt {
+  text-indent: 3.6em;
+  margin: 20px auto;
+  /* max-width: 70%; */
+  width: 1200px;
+  padding: 20px;
+  background-color: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  overflow-y: auto;
+}
+
+.bt1 {
+  margin: 20px auto;
+  /* max-width: 70%; */
+  width: 1200px;
+
+  padding: 20px;
+  background-color: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  overflow-y: auto;
+}
+
+.tpxx {
+  margin: 20px auto;
+  max-width: 70%;
+  padding: 10px;
+  background-color: #f0f8ff;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  text-align: left;
+}
+
+h2 {
+  font-size: 24px;
+  color: #333;
+  margin-bottom: 15px;
+  font-family: "方正小标宋", "Fangzheng Xiaobiao Song", serif;
+}
+
+p {
+  font-size: 16px;
+  color: #555;
+  line-height: 1.6;
+  font-family: "FangSong_GB2312";
+}
+
+.bttitle {
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  font-size: 18px;
+  color: #000000;
+  line-height: 30px;
+}
+
+.yuan {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  background: #c80000;
+  border-radius: 50%;
+  color: #c80000;
+  vertical-align: middle;
+}
+
+.title {
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  font-size: 14px;
+  color: #c80000;
+  line-height: 30px;
+}
+
+.titlenr {
+  font-family: Microsoft YaHei;
+  font-size: 14px;
+  line-height: 30px;
+}
+
+.nrtab {
+  margin: 5px 5%;
+}
+
+.btsty {
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  font-size: 16px;
+  color: #c80000;
+  line-height: 30px;
+}
+
+.kuang {
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  border: 1px solid #acacac;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.xq {
+  margin-left: auto;
+  position: absolute;
+  bottom: 8px;
+  right: 10px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 14px;
+  color: #006ad7;
+  line-height: 30px;
+  text-decoration-line: underline;
+  cursor: pointer;
+}
+
+.xqname {
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  font-size: 14px;
+  color: #222222;
+  line-height: 20px;
+  margin-left: 10px;
+  text-align: left;
+}
+
+.xqcard {
+  width: 270px;
+  height: 60px;
+  background: #f5f5f5;
+  display: flex;
+  flex-direction: row;
+  background: #f5f5f5;
+  margin: 5px 0;
+  padding: 20px 15px;
+  position: relative;
+}
+
+.person-card {
+  width: 550px;
+  height: 240px;
+  background: #F5F5F5;
+  margin: 10px 0;
+  padding: 15px;
+  position: relative;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+}
+
+.person-card.selected {
+  border: 1px solid #C80000;
+}
+
+.person-content {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  height: calc(100% - 30px);
+}
+
+.person-photo {
+  width: 120px;
+  height: 160px;
+  margin-right: 15px;
+  flex-shrink: 0;
+}
+
+.person-photo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.person-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.person-name {
+  width: auto;
+  min-width: 40px;
+  height: 20px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  font-size: 20px;
+  color: #C80000;
+  line-height: 20px;
+  margin-bottom: 8px;
+}
+
+.person-age {
+  width: auto;
+  min-width: 59px;
+  height: 12px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  font-size: 14px;
+  color: #222222;
+  line-height: 20px;
+  margin-bottom: 10px;
+}
+
+.person-desc {
+  width: 348px;
+  height: 110px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 14px;
+  color: #000000;
+  line-height: 24px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  line-clamp: 5;
+  -webkit-box-orient: vertical;
+  margin-bottom: 8px;
+}
+
+.person-link {
+  width: auto;
+  min-width: 106px;
+  height: 16px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 14px;
+  color: #C80000;
+  line-height: 20px;
+  text-decoration-line: underline;
+  cursor: pointer;
+}
+
+.person-button-wrapper {
+  position: absolute;
+  bottom: 15px;
+  right: 15px;
+}
+
+.person-btn-select {
+  width: auto;
+  min-width: 60px;
+  height: 32px;
+  padding: 0 15px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 14px;
+  color: #FFFFFF;
+  line-height: 20px;
+  background-color: #C80000;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.person-btn-deselect {
+  width: auto;
+  min-width: 80px;
+  height: 32px;
+  padding: 0 15px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 14px;
+  color: #222222;
+  line-height: 20px;
+  background-color: #CCCCCC;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.btdlgsty {
+  height: 18px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  font-size: 18px;
+  color: #000000;
+  line-height: 24px;
+  text-align: center !important;
+}
+
+.flex {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+/* 详细事迹材料对话框样式 */
+::v-deep .detail-dialog {
+  width: 600px !important;
+}
+
+::v-deep .detail-dialog .el-dialog {
+  width: 600px !important;
+  height: 840px !important;
+  background: #FFFFFF !important;
+}
+
+::v-deep .detail-dialog .el-dialog__body {
+  height: calc(840px - 110px);
+  overflow-y: auto;
+  background: #FFFFFF;
+  padding: 10px;
+}
+
+::v-deep .detail-dialog .el-dialog__header {
+  text-align: center;
+  position: relative;
+  padding-bottom: 20px;
+}
+
+::v-deep .detail-dialog .el-dialog__header::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 566px;
+  height: 1px;
+  background: #E5E5E5;
+}
+
+::v-deep .detail-dialog .el-dialog__title {
+  width: 108px;
+  height: 18px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  font-size: 18px;
+  color: #000000;
+  line-height: 24px;
+  text-align: center;
+  margin: 0 auto;
+}
+
+.detail-content {
+  padding: 20px;
+  background: #FFFFFF;
+}
+
+.detail-section {
+  margin-bottom: 30px;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.title-bar {
+  width: 4px;
+  height: 20px;
+  background: #C80000;
+  margin-right: 10px;
+  flex-shrink: 0;
+}
+
+.title-text {
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  font-size: 16px;
+  color: #000000;
+  line-height: 20px;
+}
+
+.work-images {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  justify-content: flex-start;
+}
+
+.work-image-item {
+  width: 257px;
+  height: 147px;
+  background: #F5F5F5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #E0E0E0;
+  overflow: hidden;
+}
+
+.work-image-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.section-content {
+  font-family: Microsoft YaHei;
+  font-size: 14px;
+  color: #000000;
+  line-height: 24px;
+  text-align: left;
+}
+
+.deeds-item {
+  margin-bottom: 20px;
+}
+
+.deeds-title {
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  font-size: 14px;
+  color: #C80000;
+  line-height: 24px;
+  margin-bottom: 10px;
+}
+
+.deeds-text {
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 14px;
+  color: #000000;
+  line-height: 24px;
+  text-indent: 2em;
+}
+</style>

src/views/rytp/index.vue

@@ -13,7 +13,8 @@
     <el-row style="margin-top: -10px">
       <div class="bt">
         <div class="bttitle">
-          为深入贯彻落实油田党委关于“深化基础工作”部署安排，从安全生产稳、运行效率优、设备运维细、经营管理精、基层党建实5个重点领域，采用自下而上、层层推荐方式优选了10名深入挖掘长期扎根基层，事迹真实可感、群众广泛认可、示范作用突出的油田强三基岗位备选标兵。请您积极参与，为“心目中的标兵”投票，作为油田强三基岗位标兵选树的参考依据。        </div>
+          为深入贯彻落实油田党委关于“深化基础工作”部署安排，从安全生产稳、运行效率优、设备运维细、经营管理精、基层党建实5个重点领域，采用自下而上、层层推荐方式优选了10名深入挖掘长期扎根基层，事迹真实可感、群众广泛认可、示范作用突出的油田强三基岗位备选标兵。请您积极参与，为“心目中的标兵”投票，作为油田强三基岗位标兵选树的参考依据。
+        </div>
         <div>
           <el-row class="nrtab">
             <span class="yuan">·</span>
@@ -49,122 +50,168 @@
         <el-row>
           <div class="btsty">安全</div>
         </el-row>
-        <el-row>
-          <el-col :span="6" v-for="(unit, index) in oilGasProduction" :key="index">
-            <div class="xqcard">
-              <div style="display: flex; flex-direction: row; align-items: center">
-                <input v-model="unit.checked" type="checkbox" class="kuang"
-                  @change="handleCheckboxChange($event, unit)" />
-                <div style="display: flex; flex-direction: column">
-                  <div class="xqname" @click.stop.prevent="handleTextClick(unit)">
-                    {{ unit.name }}
+        <el-row :gutter="20">
+          <el-col :span="12" v-for="(unit, index) in oilGasProduction" :key="index">
+            <div class="person-card" :class="{ 'selected': unit.checked }">
+              <div class="person-content">
+                <div class="person-photo">
+                  <img :src="unit.photo || require('../../assets/images/profile.jpg')" alt="" />
                 </div>
-                  <div class="xqname" @click.stop.prevent="handleTextClick(unit)">
-                    {{ unit.management }}
+                <div class="person-info">
+                  <div class="person-name">{{ unit.name }}</div>
+                  <div class="person-age">{{ unit.age || '现年37岁' }}</div>
+                  <div class="person-desc">{{ unit.description || unit.management || '毕业于淄博职业学院化工设备维修技术专业, 2011年入职以来,
+                  始终扎根于生产一线, 是储运单元一名技术过硬、管理有方、作风扎实的骨干力量。2021年由于工作成绩突出, 担任储运二部运行四班班长、技师。' }}</div>
+                  <div class="person-link" @click.stop="handleDetailClick(unit)">
+                    详细事迹材料&gt;&gt;
                   </div>
                 </div>
               </div>
-              <div class="xq" @click.stop.prevent="handleTextClick(unit)">
-                详情&gt;&gt;
+              <div class="person-button-wrapper">
+                <button v-if="!unit.checked" class="person-btn-select"
+                  @click.stop="handleCheckboxChange({ target: { checked: true } }, unit)">
+                  选择
+                </button>
+                <button v-else class="person-btn-deselect"
+                  @click.stop="handleCheckboxChange({ target: { checked: false } }, unit)">
+                  取消选中
+                </button>
               </div>
             </div>
           </el-col>
         </el-row>
-        <!-- 科研 -->
+        <!-- 生产 -->
         <el-row>
           <div class="btsty">生产</div>
         </el-row>
-        <el-row>
-          <el-col :span="6" v-for="(unit, index) in research" :key="index">
-            <div class="xqcard">
-              <div style="display: flex; flex-direction: row; align-items: center">
-                <input v-model="unit.checked" type="checkbox" class="kuang"
-                  @change="handleCheckboxChangeky($event, unit)" />
-                <div style="display: flex; flex-direction: column">
-                  <div class="xqname" @click.stop.prevent="handleTextClick(unit)">
-                    {{ unit.name }}
+        <el-row :gutter="20">
+          <el-col :span="12" v-for="(unit, index) in research" :key="index">
+            <div class="person-card" :class="{ 'selected': unit.checked }">
+              <div class="person-content">
+                <div class="person-photo">
+                  <img :src="unit.photo || require('../../assets/images/profile.jpg')" alt="" />
                 </div>
-                  <div class="xqname" @click.stop.prevent="handleTextClick(unit)">
-                    {{ unit.management }}
+                <div class="person-info">
+                  <div class="person-name">{{ unit.name }}</div>
+                  <div class="person-age">{{ unit.age || '现年37岁' }}</div>
+                  <div class="person-desc">{{ unit.description || unit.management || '毕业于淄博职业学院化工设备维修技术专业, 2011年入职以来,
+                  始终扎根于生产一线, 是储运单元一名技术过硬、管理有方、作风扎实的骨干力量。2021年由于工作成绩突出, 担任储运二部运行四班班长、技师。' }}</div>
+                  <div class="person-link" @click.stop="handleDetailClick(unit)">
+                    详细事迹材料&gt;&gt;
                   </div>
                 </div>
               </div>
-              <div class="xq" @click.stop.prevent="handleTextClick(unit)">
-                详情&gt;&gt;
+              <div class="person-button-wrapper">
+                <button v-if="!unit.checked" class="person-btn-select"
+                  @click.stop="handleCheckboxChangeky({ target: { checked: true } }, unit)">
+                  选择
+                </button>
+                <button v-else class="person-btn-deselect"
+                  @click.stop="handleCheckboxChangeky({ target: { checked: false } }, unit)">
+                  取消选中
+                </button>
               </div>
             </div>
           </el-col>
         </el-row>
-        <!-- 专业化 -->
+        <!-- 设备 -->
         <el-row>
           <div class="btsty">设备</div>
         </el-row>
-        <el-row>
-          <el-col :span="6" v-for="(unit, index) in specialization" :key="index">
-            <div class="xqcard">
-              <div style="display: flex; flex-direction: row; align-items: center">
-                <input v-model="unit.checked" type="checkbox" class="kuang"
-                  @change="handleCheckboxChangezyh($event, unit)" />
-                <div style="display: flex; flex-direction: column">
-                  <div class="xqname" @click.stop.prevent="handleTextClick(unit)">
-                    {{ unit.name }}
+        <el-row :gutter="20">
+          <el-col :span="12" v-for="(unit, index) in specialization" :key="index">
+            <div class="person-card" :class="{ 'selected': unit.checked }">
+              <div class="person-content">
+                <div class="person-photo">
+                  <img :src="unit.photo || require('../../assets/images/profile.jpg')" alt="" />
                 </div>
-                  <div class="xqname" @click.stop.prevent="handleTextClick(unit)">
-                    {{ unit.management }}
+                <div class="person-info">
+                  <div class="person-name">{{ unit.name }}</div>
+                  <div class="person-age">{{ unit.age || '现年37岁' }}</div>
+                  <div class="person-desc">{{ unit.description || unit.management || '毕业于淄博职业学院化工设备维修技术专业, 2011年入职以来,
+                  始终扎根于生产一线, 是储运单元一名技术过硬、管理有方、作风扎实的骨干力量。2021年由于工作成绩突出, 担任储运二部运行四班班长、技师。' }}</div>
+                  <div class="person-link" @click.stop="handleDetailClick(unit)">
+                    详细事迹材料&gt;&gt;
                   </div>
                 </div>
               </div>
-              <div class="xq" @click.stop.prevent="handleTextClick(unit)">
-                详情&gt;&gt;
+              <div class="person-button-wrapper">
+                <button v-if="!unit.checked" class="person-btn-select"
+                  @click.stop="handleCheckboxChangezyh({ target: { checked: true } }, unit)">
+                  选择
+                </button>
+                <button v-else class="person-btn-deselect"
+                  @click.stop="handleCheckboxChangezyh({ target: { checked: false } }, unit)">
+                  取消选中
+                </button>
               </div>
             </div>
           </el-col>
         </el-row>
-        <!-- 后勤服务 -->
+        <!-- 企管 -->
         <el-row>
           <div class="btsty">企管</div>
         </el-row>
-        <el-row>
-          <el-col :span="6" v-for="(unit, index) in serviceCoordination" :key="index">
-            <div class="xqcard">
-              <div style="display: flex; flex-direction: row; align-items: center">
-                <input v-model="unit.checked" type="checkbox" class="kuang"
-                  @change="handleCheckboxChangefw($event, unit)" />
-                <div style="display: flex; flex-direction: column">
-                  <div class="xqname" @click.stop.prevent="handleTextClick(unit)">
-                    {{ unit.name }}
+        <el-row :gutter="20">
+          <el-col :span="12" v-for="(unit, index) in serviceCoordination" :key="index">
+            <div class="person-card" :class="{ 'selected': unit.checked }">
+              <div class="person-content">
+                <div class="person-photo">
+                  <img :src="unit.photo || require('../../assets/images/profile.jpg')" alt="" />
                 </div>
-                  <div class="xqname" @click.stop.prevent="handleTextClick(unit)">
-                    {{ unit.management }}
+                <div class="person-info">
+                  <div class="person-name">{{ unit.name }}</div>
+                  <div class="person-age">{{ unit.age || '现年37岁' }}</div>
+                  <div class="person-desc">{{ unit.description || unit.management || '毕业于淄博职业学院化工设备维修技术专业, 2011年入职以来,
+                  始终扎根于生产一线, 是储运单元一名技术过硬、管理有方、作风扎实的骨干力量。2021年由于工作成绩突出, 担任储运二部运行四班班长、技师。' }}</div>
+                  <div class="person-link" @click.stop="handleDetailClick(unit)">
+                    详细事迹材料&gt;&gt;
                   </div>
                 </div>
               </div>
-              <div class="xq" @click.stop.prevent="handleTextClick(unit)">
-                详情&gt;&gt;
+              <div class="person-button-wrapper">
+                <button v-if="!unit.checked" class="person-btn-select"
+                  @click.stop="handleCheckboxChangefw({ target: { checked: true } }, unit)">
+                  选择
+                </button>
+                <button v-else class="person-btn-deselect"
+                  @click.stop="handleCheckboxChangefw({ target: { checked: false } }, unit)">
+                  取消选中
+                </button>
               </div>
             </div>
           </el-col>
         </el-row>
+        <!-- 党建 -->
         <el-row>
           <div class="btsty">党建</div>
         </el-row>
-        <el-row>
-          <el-col :span="6" v-for="(unit, index) in serviceCoordination" :key="index">
-            <div class="xqcard">
-              <div style="display: flex; flex-direction: row; align-items: center">
-                <input v-model="unit.checked" type="checkbox" class="kuang"
-                       @change="handleCheckboxChangefw($event, unit)" />
-                <div style="display: flex; flex-direction: column">
-                  <div class="xqname" @click.stop.prevent="handleTextClick(unit)">
-                    {{ unit.name }}
+        <el-row :gutter="20">
+          <el-col :span="12" v-for="(unit, index) in partyBuilding" :key="index">
+            <div class="person-card" :class="{ 'selected': unit.checked }">
+              <div class="person-content">
+                <div class="person-photo">
+                  <img :src="unit.photo || require('../../assets/images/profile.jpg')" alt="" />
                 </div>
-                  <div class="xqname" @click.stop.prevent="handleTextClick(unit)">
-                    {{ unit.management }}
+                <div class="person-info">
+                  <div class="person-name">{{ unit.name }}</div>
+                  <div class="person-age">{{ unit.age || '现年37岁' }}</div>
+                  <div class="person-desc">{{ unit.description || unit.management || '毕业于淄博职业学院化工设备维修技术专业, 2011年入职以来,
+                  始终扎根于生产一线, 是储运单元一名技术过硬、管理有方、作风扎实的骨干力量。2021年由于工作成绩突出, 担任储运二部运行四班班长、技师。' }}</div>
+                  <div class="person-link" @click.stop="handleDetailClick(unit)">
+                    详细事迹材料&gt;&gt;
                   </div>
                 </div>
               </div>
-              <div class="xq" @click.stop.prevent="handleTextClick(unit)">
-                详情&gt;&gt;
+              <div class="person-button-wrapper">
+                <button v-if="!unit.checked" class="person-btn-select"
+                  @click.stop="handleCheckboxChangeParty({ target: { checked: true } }, unit)">
+                  选择
+                </button>
+                <button v-else class="person-btn-deselect"
+                  @click.stop="handleCheckboxChangeParty({ target: { checked: false } }, unit)">
+                  取消选中
+                </button>
               </div>
             </div>
           </el-col>
@@ -865,7 +912,7 @@
       <el-row class="sj">
         <div class="btdlgsty">矿区物业服务中心♦物华矿区物业服务部</div>
       </el-row>
-      <el-row class="img-container sj">
+      <el-row class="img-container sj"></el-row>
       <img src="../../assets/images/tc42.png" alt="" class="imgdlgst" @click="kqwyTp1()" />
       </el-row>
 
@@ -896,6 +943,52 @@
         <el-button @click="showTc20 = false">关闭</el-button>
       </span>
     </el-dialog>
+    <!-- 详细事迹材料对话框 -->
+    <el-dialog :visible.sync="showDetailDialog" title="详细事迹材料" width="600px" custom-class="detail-dialog"
+      @close="closeDetailDialog">
+      <div class="detail-content">
+        <!-- 工作图片 -->
+        <div class="detail-section"
+          v-if="currentDetailUnit && currentDetailUnit.workImages && currentDetailUnit.workImages.length > 0">
+          <div class="section-title">
+            <span class="title-bar"></span>
+            <span class="title-text">工作图片</span>
+          </div>
+          <div class="work-images">
+            <div class="work-image-item" v-for="(image, index) in currentDetailUnit.workImages" :key="index">
+              <img :src="image" :alt="'工作图片' + (index + 1)" />
+            </div>
+          </div>
+        </div>
+        <!-- 个人简介 -->
+        <div class="detail-section" v-if="currentDetailUnit && currentDetailUnit.bio">
+          <div class="section-title">
+            <span class="title-bar"></span>
+            <span class="title-text">个人简介</span>
+          </div>
+          <div class="section-content bio-text">
+            {{ currentDetailUnit.bio }}
+          </div>
+        </div>
+        <!-- 事迹描述 -->
+        <div class="detail-section"
+          v-if="currentDetailUnit && currentDetailUnit.deeds && currentDetailUnit.deeds.length > 0">
+          <div class="section-title">
+            <span class="title-bar"></span>
+            <span class="title-text">事迹描述</span>
+          </div>
+          <div class="section-content">
+            <div class="deeds-item" v-for="(deed, index) in currentDetailUnit.deeds" :key="index">
+              <div class="deeds-title">{{ deed.title }}</div>
+              <div class="deeds-text">{{ deed.content }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showDetailDialog = false">关闭</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -910,6 +1003,11 @@ export default {
       isDialogVisible: false,
       name: null,
       ipdz: null,
+      username: null,
+      wzdwdm: null,
+      wzdwmc: null,
+      ejdwdm: null,
+      ejdwmc: null,
       addLoading: false,
       fwXz: [],
       zyhXz: [],
@@ -938,11 +1036,14 @@ export default {
       dialogVisible: false,
       selectedUnit: {},
       showDialog: false, // 控制对话框显示的变量
+      showDetailDialog: false, // 控制详细事迹材料对话框显示
+      currentDetailUnit: null, // 当前查看详细事迹的单位
       form: {
         yqsc: [], // 用于存储选中的单位
         ky: [],
         zyh: [],
         fw: [],
+        party: [], // 党建
       },
       selectedUnits: {
         oilGasProduction: [],
@@ -951,39 +1052,254 @@ export default {
         serviceCoordination: [],
       },
       oilGasProduction: [
-        { name: "海洋采油厂", management: "海二采油管理区", value: "1" },
-        { name: "纯梁采油厂", management: "梁南采油管理区", value: "2" },
-        { name: "孤岛采油厂", management: "采油管理五区", value: "3" },
-        { name: "东辛采油厂", management: "营二采油管理区", value: "4" },
-        { name: "桩西采油厂", management: "采油管理三区", value: "5" },
-        { name: "鲁明公司", management: "青南采油管理区", value: "6" },
-        { name: "胜利采油厂", management: "采油管理三区", value: "7" },
-        { name: "油气集输总厂", management: "东营原油库", value: "8" },
-        { name: "现河采油厂", management: "郝现采油管理区", value: "9" },
-        { name: "东胜公司", management: "牛庄采油管理区", value: "10" },
+        {
+          id: 1,
+          name: "乔军",
+          management: "海二采油管理区",
+          value: "1",
+          age: "现年37岁",
+          photo: require('../../assets/images/profile.jpg'),
+          description: "毕业于淄博职业学院化工设备维修技术专业, 2011年入职以来,始终扎根于生产一线,是储运单元一名技术过硬、管理有方、作风扎实的骨干力量。2021年由于工作成绩突出,担任储运二部运行四班班长、技师。",
+          workImages: [
+            require('../../assets/images/tc1.png'),
+            require('../../assets/images/tc2.png')
+          ],
+          bio: "乔军，男，1987年出生，现年37岁。毕业于淄博职业学院化工设备维修技术专业，2011年入职以来，始终扎根于生产一线，是储运单元一名技术过硬、管理有方、作风扎实的骨干力量。2021年由于工作成绩突出，担任储运二部运行四班班长、技师。",
+          deeds: [
+            {
+              title: "一、精湛的业务能力与丰富的实战经验",
+              content: "乔军同志熟悉储运单元全流程操作,从液化烃罐区流程到液化气装车外销,各个环节均能熟练掌控。他尤其擅长储罐安全设施检查、管线吹扫、机泵故障排查等关键作业,今年带领班组顺利完成总厂装置开停工的配合工作,确保了大检修的顺利。"
+            },
+            {
+              title: "二、严谨的工作态度与卓越的管理能力",
+              content: "作为班长,乔军同志以身作则,严格要求自己和班组成员。他注重细节管理,建立了完善的班组管理制度,提高了工作效率。在他的带领下,班组连续三年被评为先进班组,个人多次获得优秀班组长称号。"
+            }
+          ]
+        },
+        {
+          id: 2,
+          name: "张伟",
+          management: "梁南采油管理区",
+          value: "2",
+          age: "现年35岁",
+          photo: require('../../assets/images/profile.jpg'),
+          description: "毕业于中国石油大学石油工程专业, 2012年入职,从事采油工作12年,具有丰富的现场操作经验和设备维护能力。",
+          workImages: [
+            require('../../assets/images/tc3.png'),
+            require('../../assets/images/tc4.png')
+          ],
+          bio: "张伟，男，1989年出生，现年35岁。毕业于中国石油大学石油工程专业，2012年入职，从事采油工作12年，具有丰富的现场操作经验和设备维护能力。现任梁南采油管理区技术员。",
+          deeds: [
+            {
+              title: "一、技术精湛，勇于创新",
+              content: "张伟同志在采油技术方面有着深厚的功底，多次参与技术革新项目，提出的优化方案为企业节约成本数百万元。他熟练掌握各种采油设备的操作和维护，能够快速诊断和解决设备故障。"
+            },
+            {
+              title: "二、责任心强，工作踏实",
+              content: "张伟同志工作认真负责，始终把安全生产放在首位。他严格执行操作规程，从未发生过安全事故。在设备维护保养方面，他建立了完善的设备台账，确保设备处于良好状态。"
+            }
+          ]
+        },
       ],
       research: [
-        { name: "勘探开发研究院", management: "采收率试验室", value: "11" },
         {
-          name: "石油工程技术研究院",
+          id: 3,
+          name: "马文",
+          management: "采收率试验室",
+          value: "11",
+          age: "现年45岁",
+          photo: require('../../assets/images/profile.jpg'),
+          description: "毕业于中国石油大学,从事科研工作20年,在提高采收率技术研究方面成果丰硕,是采收率试验室的技术带头人。",
+          workImages: [
+            require('../../assets/images/tc21.png'),
+            require('../../assets/images/tc22.png')
+          ],
+          bio: "马文，男，1979年出生，现年45岁。毕业于中国石油大学，从事科研工作20年，在提高采收率技术研究方面成果丰硕，是采收率试验室的技术带头人。现任采收率试验室主任。",
+          deeds: [
+            {
+              title: "一、科研攻关，成果丰硕",
+              content: "马文同志在科研攻关方面成果丰硕，他主持完成了多项国家级科研项目，其中2项获得国家科技进步奖。他研究的提高采收率技术，在多个油田得到应用，累计增产原油数百万吨。"
+            },
+            {
+              title: "二、人才培养，桃李满园",
+              content: "马文同志注重人才培养，他指导了多名研究生和青年科研人员，其中多人成为科研骨干。他建立的科研团队，在行业内享有很高的声誉。"
+            }
+          ]
+        },
+        {
+          id: 4,
+          name: "林峰",
           management: "稠油开采研究所",
           value: "12",
+          age: "现年43岁",
+          photo: require('../../assets/images/profile.jpg'),
+          description: "毕业于中国石油大学,从事稠油开采技术研究18年,在稠油开采技术方面有着深厚的造诣,多项技术获得国家专利。",
+          workImages: [
+            require('../../assets/images/tc23.png'),
+            require('../../assets/images/tc24.png')
+          ],
+          bio: "林峰，男，1981年出生，现年43岁。毕业于中国石油大学，从事稠油开采技术研究18年，在稠油开采技术方面有着深厚的造诣，多项技术获得国家专利。现任稠油开采研究所所长。",
+          deeds: [
+            {
+              title: "一、技术创新，专利众多",
+              content: "林峰同志在技术创新方面成果显著，他研发的稠油开采技术获得国家专利10余项，其中3项获得发明专利。他的技术成果在多个稠油油田得到应用，取得了显著的经济效益。"
+            },
+            {
+              title: "二、技术推广，服务生产",
+              content: "林峰同志注重技术推广，他积极将科研成果转化为生产力。他多次深入生产一线，指导技术应用，解决技术难题，为企业的生产和发展提供了重要的技术支撑。"
+            }
+          ]
         },
       ],
       specialization: [
-        { name: "油气井下作业中心", management: "东辛作业区", value: "13" },
-        { name: "运输分公司", management: "危化品运输二公司", value: "14" },
-        { name: "电力分公司", management: "胜东供电管理区", value: "15" },
-        { name: "注汽技术服务中心", management: "现河注汽项目部", value: "16" },
-        { name: "胜利发电厂", management: "发电运行部", value: "17" },
-        { name: "油藏动态监测中心", management: "工程测井项目部", value: "18" },
+        {
+          id: 5,
+          name: "郑伟",
+          management: "东辛作业区",
+          value: "13",
+          age: "现年38岁",
+          photo: require('../../assets/images/profile.jpg'),
+          description: "从事井下作业工作15年,在作业技术和安全管理方面经验丰富,多次获得优秀作业队长称号。",
+          workImages: [
+            require('../../assets/images/tc25.png'),
+            require('../../assets/images/tc26.png')
+          ],
+          bio: "郑伟，男，1986年出生，现年38岁。从事井下作业工作15年，在作业技术和安全管理方面经验丰富，多次获得优秀作业队长称号。现任东辛作业区作业队长。",
+          deeds: [
+            {
+              title: "一、作业技术，精湛娴熟",
+              content: "郑伟同志在作业技术方面精湛娴熟，他熟练掌握各种井下作业技术，能够处理各种复杂的作业情况。他带领的作业队，作业质量高，作业效率高，多次获得优秀作业队称号。"
+            },
+            {
+              title: "二、安全管理，严格规范",
+              content: "郑伟同志在安全管理方面严格规范，他严格执行安全操作规程，建立了完善的安全管理制度。在他的管理下，作业队连续多年实现安全生产零事故，获得了上级部门的高度认可。"
+            }
+          ]
+        },
+        {
+          id: 6,
+          name: "钱明",
+          management: "危化品运输二公司",
+          value: "14",
+          age: "现年36岁",
+          photo: require('../../assets/images/profile.jpg'),
+          description: "从事危化品运输工作12年,在运输安全和应急处理方面经验丰富,是危化品运输方面的专家。",
+          workImages: [
+            require('../../assets/images/tc27.png'),
+            require('../../assets/images/tc28.png')
+          ],
+          bio: "钱明，男，1988年出生，现年36岁。从事危化品运输工作12年，在运输安全和应急处理方面经验丰富，是危化品运输方面的专家。现任危化品运输二公司安全主管。",
+          deeds: [
+            {
+              title: "一、运输安全，万无一失",
+              content: "钱明同志在运输安全方面严格要求，他建立了完善的运输安全管理制度，严格执行安全操作规程。在他的管理下，公司连续多年实现运输安全零事故，获得了行业内的广泛认可。"
+            },
+            {
+              title: "二、应急处理，反应迅速",
+              content: "钱明同志在应急处理方面反应迅速，他制定了详细的应急预案，定期组织应急演练。在多次应急事件中，他都能迅速反应，妥善处理，确保了人员和货物的安全。"
+            }
+          ]
+        },
+
       ],
       serviceCoordination: [
-        { name: "西城服务协调中心", management: "员工服务部", value: "19" },
         {
-          name: "矿区物业服务中心",
+          id: 7,
+          name: "周军",
+          management: "员工服务部",
+          value: "19",
+          age: "现年38岁",
+          photo: require('../../assets/images/profile.jpg'),
+          description: "从事员工服务工作13年,在服务管理和员工关怀方面经验丰富,多次获得优秀服务工作者称号。",
+          workImages: [
+            require('../../assets/images/tc37.png'),
+            require('../../assets/images/tc38.png')
+          ],
+          bio: "周军，男，1986年出生，现年38岁。从事员工服务工作13年，在服务管理和员工关怀方面经验丰富，多次获得优秀服务工作者称号。现任员工服务部服务主管。",
+          deeds: [
+            {
+              title: "一、服务管理，细致周到",
+              content: "周军同志在服务管理方面细致周到，他建立了完善的服务管理制度，为员工提供全方位的服务。他服务的员工满意度达到了98%以上，获得了员工的一致好评。"
+            },
+            {
+              title: "二、员工关怀，温暖人心",
+              content: "周军同志在员工关怀方面温暖人心，他关心员工的工作和生活，积极帮助员工解决各种困难。他组织的员工活动，丰富了员工的业余生活，增强了员工的归属感。"
+            }
+          ]
+        },
+        {
+          id: 8,
+          name: "吴文",
           management: "物华矿区物业服务部",
           value: "20",
+          age: "现年40岁",
+          photo: require('../../assets/images/profile.jpg'),
+          description: "从事物业服务工作16年,在物业管理和服务创新方面经验丰富,是物业服务方面的专家。",
+          workImages: [
+            require('../../assets/images/tc39.png'),
+            require('../../assets/images/tc40.png')
+          ],
+          bio: "吴文，男，1984年出生，现年40岁。从事物业服务工作16年，在物业管理和服务创新方面经验丰富，是物业服务方面的专家。现任物华矿区物业服务部经理。",
+          deeds: [
+            {
+              title: "一、物业管理，科学规范",
+              content: "吴文同志在物业管理方面科学规范，他建立了完善的物业管理制度，提高了物业服务的质量和效率。在他的管理下，物业服务部的服务质量不断提高，获得了业主的一致好评。"
+            },
+            {
+              title: "二、服务创新，成效显著",
+              content: "吴文同志在服务创新方面成效显著，他提出了多项服务创新措施，实施后效果显著。他创新的服务模式，在行业内得到了广泛推广，为企业赢得了良好的声誉。"
+            }
+          ]
+        },
+      ],
+      partyBuilding: [
+        {
+          id: 9,
+          name: "陈强",
+          management: "党建部门1",
+          value: "21",
+          age: "现年42岁",
+          photo: require('../../assets/images/profile.jpg'),
+          description: "从事党建工作18年,在党建工作和思想政治工作方面经验丰富,多次获得优秀党务工作者称号。",
+          workImages: [
+            require('../../assets/images/tc41.png'),
+            require('../../assets/images/tc42.png')
+          ],
+          bio: "陈强，男，1982年出生，现年42岁。从事党建工作18年，在党建工作和思想政治工作方面经验丰富，多次获得优秀党务工作者称号。现任党建部门1党支部书记。",
+          deeds: [
+            {
+              title: "一、党建工作，扎实有效",
+              content: "陈强同志在党建工作方面扎实有效，他认真贯彻执行党的路线方针政策，积极开展各项党建活动。他组织的党建活动，形式多样，内容丰富，受到了党员和群众的广泛好评。"
+            },
+            {
+              title: "二、思想政治工作，深入人心",
+              content: "陈强同志在思想政治工作方面深入人心，他关心员工的思想动态，积极开展思想政治工作。他组织的思想教育活动，提高了员工的思想觉悟，增强了员工的凝聚力和向心力。"
+            }
+          ]
+        },
+        {
+          id: 10,
+          name: "赵明",
+          management: "党建部门2",
+          value: "22",
+          age: "现年39岁",
+          photo: require('../../assets/images/profile.jpg'),
+          description: "从事党建工作15年,在党建创新和党员教育方面经验丰富,是党建工作的创新者。",
+          workImages: [
+            require('../../assets/images/tc43.png'),
+            require('../../assets/images/tc1.png')
+          ],
+          bio: "赵明，男，1985年出生，现年39岁。从事党建工作15年，在党建创新和党员教育方面经验丰富，是党建工作的创新者。现任党建部门2党支部副书记。",
+          deeds: [
+            {
+              title: "一、党建创新，成效显著",
+              content: "赵明同志在党建创新方面成效显著，他提出了多项党建创新措施，实施后效果显著。他创新的党建模式，在行业内得到了广泛推广，为企业党建工作注入了新的活力。"
+            },
+            {
+              title: "二、党员教育，形式多样",
+              content: "赵明同志在党员教育方面形式多样，他组织了多种形式的党员教育活动，提高了党员的思想觉悟和业务能力。他教育的党员，在工作中发挥了先锋模范作用，为企业的发展做出了重要贡献。"
+            }
+          ]
         },
       ],
     };
@@ -995,7 +1311,8 @@ export default {
         ...this.oilGasProduction,
         ...this.research,
         ...this.specialization,
-        ...this.serviceCoordination
+        ...this.serviceCoordination,
+        ...this.partyBuilding
       ];
       return allUnits.filter(unit => unit.checked).length; // 计算已选中的数量
     },
@@ -1005,7 +1322,8 @@ export default {
         ...this.oilGasProduction.filter(unit => unit.checked),
         ...this.research.filter(unit => unit.checked),
         ...this.specialization.filter(unit => unit.checked),
-        ...this.serviceCoordination.filter(unit => unit.checked)
+        ...this.serviceCoordination.filter(unit => unit.checked),
+        ...this.partyBuilding.filter(unit => unit.checked)
       ];
     }
   },
@@ -1016,15 +1334,47 @@ export default {
     let query = this.$route.query;
     let tk = query.tk;
     console.log(tk, "tk================")
+    const aa = {
+      "adAccount": "t-zhaomings.slyt",  //用户AD账号
+      "dwmc": "/中国石化/胜利油田/胜利石油管理局有限公司/机关管理服务中心/信息化运维项目部/",   //用户单位名称
+      "sex": 1,
+      "avatar": "",
+      "delFlag": 0,
+      "realname": "赵明明",  //用户真实姓名
+      "ejdwmc": "机关管理服务中心",  //用户二级单位名称
+      "password": "1",
+      "dwdm": "/10010000/10010001/10200000/10210959/10211453/",  //用户单位代码
+      "createTime": 1262275200000,
+      "orgCode": "10211452",
+      "id": "zhaom25",
+      "username": "zhaom25",
+      "status": 1,
+      "ejdwdm": "10210958"  //用户二级单位代码
+    }
+    tk = encrypt(aa)
     //解密参数
+    if (tk) {
+      try {
         var data = decrypt(tk)
         console.log(data, "解密后data================")
+        if (data) {
           //字符串转obj
           var obj = JSON.parse(data)
           console.log(obj, "字符串转obj=========")
           //取出ad账号
           this.ipdz = obj.adAccount
           this.name = obj.realname
+          this.username = obj.id
+          this.wzdwdm = obj.dwdm
+          this.wzdwmc = obj.dwmc
+          this.ejdwdm = obj.ejdwdm
+          this.ejdwmc = obj.ejdwmc
+          console.log(this.username, this.wzdwdm, this.wzdwmc, this.ejdwdm, this.ejdwmc, "this.username, this.wzdwdm, this.wzdwmc, this.ejdwdm, this.ejdwmc=========");
+        }
+      } catch (error) {
+        console.error("解密或解析错误:", error)
+      }
+    }
   },
   methods: {
     //海洋采油厂
@@ -1236,23 +1586,73 @@ export default {
     },
     submitTp() {
       this.addLoading = true;
-      const isValid =
-        this.fwXz.length > 0 &&
-        this.zyhXz.length > 0 &&
-        this.kyXz.length > 0 &&
-        this.yzXz.length > 0;
-      if (!isValid) {
-        this.$modal.msgError("每个板块至少选 1 家单位。");
+      // 找到当前选中的人员（单选）
+      const aqSel = this.oilGasProduction.find(item => item.checked);
+      const scSel = this.research.find(item => item.checked);
+      const sbSel = this.specialization.find(item => item.checked);
+      const qgSel = this.serviceCoordination.find(item => item.checked);
+      const djSel = this.partyBuilding.find(item => item.checked);
+
+      // 验证每个分类是否至少选了一个人
+      if (!aqSel) {
+        this.$modal.msgError("安全分类必须选一个人");
+        this.addLoading = false;
+        return;
+      }
+      if (!scSel) {
+        this.$modal.msgError("生产分类必须选一个人");
+        this.addLoading = false;
+        return;
+      }
+      if (!sbSel) {
+        this.$modal.msgError("设备分类必须选一个人");
         this.addLoading = false;
-        return; // 终止提交
+        return;
       }
+      if (!qgSel) {
+        this.$modal.msgError("企管分类必须选一个人");
+        this.addLoading = false;
+        return;
+      }
+      if (!djSel) {
+        this.$modal.msgError("党建分类必须选一个人");
+        this.addLoading = false;
+        return;
+      }
+
       const params = {
         name: this.name,
-        ipdz: this.ipdz,
-        tpInfoCbListA: this.fwXz,
-        tpInfoCbListB: this.zyhXz,
-        tpInfoCbListC: this.kyXz,
-        tpInfoCbListD: this.yzXz,
+        adzh: this.ipdz, // ad账号
+        username: this.username,
+        wzdwdm: this.wzdwdm,
+        wzdwmc: this.wzdwmc,
+        ejdwdm: this.ejdwdm,
+        ejdwmc: this.ejdwmc,
+        aqTpRyInfoCb: {
+          ssbk: "安全",
+          tpryid: aqSel.id,
+          tprymc: aqSel.name
+        },
+        scTpRyInfoCb: {
+          ssbk: "生产",
+          tpryid: scSel.id,
+          tprymc: scSel.name
+        },
+        sbTpRyInfoCb: {
+          ssbk: "设备",
+          tpryid: sbSel.id,
+          tprymc: sbSel.name
+        },
+        qgTpRyInfoCb: {
+          ssbk: "企管",
+          tpryid: qgSel.id,
+          tprymc: qgSel.name
+        },
+        djTpRyInfoCb: {
+          ssbk: "党建",
+          tpryid: djSel.id,
+          tprymc: djSel.name
+        }
       };
 
       addTp(params)
@@ -1333,43 +1733,116 @@ export default {
       }
     },
     handleCheckboxChange(event, unit) {
+      // 安全分类 - 单选逻辑
       if (event.target.checked) {
-        this.yzXz.push({ dwid: unit.value });
+        // 先取消同分类中其他项的选中状态
+        this.oilGasProduction.forEach(item => {
+          if (item.value !== unit.value) {
+            this.$set(item, 'checked', false);
           } else {
-        this.yzXz = this.yzXz.filter((item) => item.dwid !== unit.value);
+            this.$set(item, 'checked', true);
+          }
+        });
+        // 清空数组，只保留当前选中的
+        this.yzXz = [{ dwid: unit.value }];
+      } else {
+        this.$set(unit, 'checked', false);
+        this.yzXz = [];
       }
       console.log(this.yzXz, "当前选中的 yzXz");
     },
     handleCheckboxChangeky(event, unit) {
+      // 生产分类 - 单选逻辑
       if (event.target.checked) {
-        this.kyXz.push({ dwid: unit.value });
+        // 先取消同分类中其他项的选中状态
+        this.research.forEach(item => {
+          if (item.value !== unit.value) {
+            this.$set(item, 'checked', false);
           } else {
-        this.kyXz = this.kyXz.filter((item) => item.dwid !== unit.value);
+            this.$set(item, 'checked', true);
+          }
+        });
+        // 清空数组，只保留当前选中的
+        this.kyXz = [{ dwid: unit.value }];
+      } else {
+        this.$set(unit, 'checked', false);
+        this.kyXz = [];
       }
       console.log(this.kyXz, "当前选中的 kyXz");
     },
     handleCheckboxChangezyh(event, unit) {
+      // 设备分类 - 单选逻辑
       if (event.target.checked) {
-        this.zyhXz.push({ dwid: unit.value });
+        // 先取消同分类中其他项的选中状态
+        this.specialization.forEach(item => {
+          if (item.value !== unit.value) {
+            this.$set(item, 'checked', false);
+          } else {
+            this.$set(item, 'checked', true);
+          }
+        });
+        // 清空数组，只保留当前选中的
+        this.zyhXz = [{ dwid: unit.value }];
       } else {
-        this.zyhXz = this.zyhXz.filter((item) => item.dwid !== unit.value);
+        this.$set(unit, 'checked', false);
+        this.zyhXz = [];
       }
       console.log(this.zyhXz, "当前选中的 zyhXz");
     },
     handleCheckboxChangefw(event, unit) {
+      // 企管分类 - 单选逻辑
       if (event.target.checked) {
-        this.fwXz.push({ dwid: unit.value });
+        // 先取消同分类中其他项的选中状态
+        this.serviceCoordination.forEach(item => {
+          if (item.value !== unit.value) {
+            this.$set(item, 'checked', false);
           } else {
-        this.fwXz = this.fwXz.filter((item) => item.dwid !== unit.value);
+            this.$set(item, 'checked', true);
+          }
+        });
+        // 清空数组，只保留当前选中的
+        this.fwXz = [{ dwid: unit.value }];
+      } else {
+        this.$set(unit, 'checked', false);
+        this.fwXz = [];
       }
       console.log(this.fwXz, "当前选中的 fwXz");
     },
+    handleCheckboxChangeParty(event, unit) {
+      // 党建分类 - 单选逻辑
+      if (event.target.checked) {
+        // 先取消同分类中其他项的选中状态
+        this.partyBuilding.forEach(item => {
+          if (item.value !== unit.value) {
+            this.$set(item, 'checked', false);
+          } else {
+            this.$set(item, 'checked', true);
+          }
+        });
+        // 清空数组，只保留当前选中的
+        this.form.party = [{ dwid: unit.value }];
+      } else {
+        this.$set(unit, 'checked', false);
+        this.form.party = [];
+      }
+      console.log(this.form.party, "当前选中的 party");
+    },
 
     openDialog(unit) {
       this.selectedUnit = unit; // 保存当前点击的单位信息
       this.showDialog = true; // 显示弹窗
     },
 
+    handleDetailClick(unit) {
+      this.currentDetailUnit = unit; // 保存当前查看的单位信息
+      this.showDetailDialog = true; // 显示详细事迹材料对话框
+    },
+
+    closeDetailDialog() {
+      this.showDetailDialog = false;
+      this.currentDetailUnit = null;
+    },
+
     tc() {
       window.location.href = "http://ipms.slof.com/tzLogout/sjbgtx"
     }
@@ -1610,7 +2083,7 @@ p {
 .btsty {
   font-family: Microsoft YaHei;
   font-weight: bold;
-  font-size: 16px;
+  font-size: 20px;
   color: #c80000;
   line-height: 30px;
 }
@@ -1660,6 +2133,144 @@ p {
   position: relative;
 }
 
+.person-card {
+  width: 550px;
+  height: 240px;
+  background: #F5F5F5;
+  margin: 10px 0;
+  padding: 15px;
+  position: relative;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+}
+
+.person-card.selected {
+  width: 550px;
+  height: 240px;
+  background: #F5F5F5;
+  border: 3px solid #C80000;
+  opacity: 0.8;
+}
+
+.person-content {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  height: calc(100% - 30px);
+}
+
+.person-photo {
+  width: 120px;
+  height: 160px;
+  margin-right: 15px;
+  flex-shrink: 0;
+}
+
+.person-photo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.person-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.person-name {
+  width: auto;
+  min-width: 40px;
+  height: 20px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  font-size: 20px;
+  color: #C80000;
+  line-height: 20px;
+  margin-bottom: 8px;
+}
+
+.person-age {
+  width: auto;
+  min-width: 59px;
+  height: 12px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  font-size: 14px;
+  color: #222222;
+  line-height: 20px;
+  margin-bottom: 10px;
+}
+
+.person-desc {
+  width: 348px;
+  height: 110px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 14px;
+  color: #000000;
+  line-height: 24px;
+  text-indent: 2em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  line-clamp: 5;
+  -webkit-box-orient: vertical;
+  margin-bottom: 8px;
+}
+
+.person-link {
+  width: 130px;
+  height: 16px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 14px;
+  color: #C80000;
+  line-height: 20px;
+  text-decoration-line: underline;
+  cursor: pointer;
+}
+
+.person-button-wrapper {
+  position: absolute;
+  bottom: 15px;
+  right: 15px;
+}
+
+.person-btn-select {
+  width: auto;
+  min-width: 60px;
+  height: 32px;
+  padding: 0 15px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 14px;
+  color: #FFFFFF;
+  line-height: 20px;
+  background-color: #C80000;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.person-btn-deselect {
+  width: 80px;
+  height: 28px;
+  padding: 0;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 14px;
+  color: #222222;
+  line-height: 20px;
+  background: #B4B4B4;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
 .btdlgsty {
   height: 18px;
   font-family: Microsoft YaHei;
@@ -1675,4 +2286,140 @@ p {
   flex-direction: row;
   flex-wrap: wrap;
 }
+
+/* 详细事迹材料对话框样式 */
+::v-deep .detail-dialog {
+  width: 600px !important;
+}
+
+::v-deep .detail-dialog .el-dialog {
+  width: 600px !important;
+  height: 840px !important;
+  background: #FFFFFF !important;
+}
+
+::v-deep .detail-dialog .el-dialog__body {
+  height: calc(840px - 110px);
+  overflow-y: auto;
+  background: #FFFFFF;
+  padding: 10px;
+}
+
+::v-deep .detail-dialog .el-dialog__header {
+  text-align: center;
+  position: relative;
+  padding-bottom: 20px;
+}
+
+::v-deep .detail-dialog .el-dialog__header::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 566px;
+  height: 1px;
+  background: #E5E5E5;
+}
+
+::v-deep .detail-dialog .el-dialog__title {
+  width: 108px;
+  height: 18px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  font-size: 18px;
+  color: #000000;
+  line-height: 24px;
+  text-align: center;
+  margin: 0 auto;
+}
+
+.detail-content {
+  padding: 20px;
+  background: #FFFFFF;
+}
+
+.detail-section {
+  margin-bottom: 30px;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.title-bar {
+  width: 4px;
+  height: 20px;
+  background: #C80000;
+  margin-right: 10px;
+  flex-shrink: 0;
+}
+
+.title-text {
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  font-size: 16px;
+  color: #000000;
+  line-height: 20px;
+}
+
+.work-images {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  justify-content: flex-start;
+}
+
+.work-image-item {
+  width: 257px;
+  height: 147px;
+  background: #F5F5F5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #E0E0E0;
+  overflow: hidden;
+}
+
+.work-image-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.section-content {
+  font-family: Microsoft YaHei;
+  font-size: 14px;
+  color: #000000;
+  line-height: 24px;
+  text-align: left;
+}
+
+.bio-text {
+  text-indent: 2em;
+}
+
+.deeds-item {
+  margin-bottom: 20px;
+}
+
+.deeds-title {
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  font-size: 14px;
+  color: #C80000;
+  line-height: 24px;
+  margin-bottom: 10px;
+}
+
+.deeds-text {
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 14px;
+  color: #000000;
+  line-height: 24px;
+  text-indent: 2em;
+}
 </style>

src/views/rytptj/index.vue

+<template>
+    <div class="app-container">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+            label-width="68px">
+            <el-form-item label="姓名" prop="name">
+                <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="AD账号" prop="ipdz">
+                <el-input v-model="queryParams.ipdz" placeholder="请输入AD账号" clearable
+                    @keyup.enter.native="handleQuery" />
+            </el-form-item>
+
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </el-form>
+
+
+        <el-table v-loading="loading" border :data="tpInfoList" @selection-change="handleSelectionChange">
+            <el-table-column label="姓名" align="center" width="100px" prop="name" />
+            <el-table-column label="二级单位名称" align="center" prop="ejdwmc" width="140px" />
+            <el-table-column label="单位名称" align="center" prop="dwmc" width="140px" />
+            <el-table-column label="AD账号" align="center" prop="adzh" width="140px" />
+            <el-table-column label="统一账号" align="center" prop="username" width="140px" />
+            <el-table-column label="投票时间" align="center" prop="createTime" width="155px" />
+            <el-table-column prop="tpry" label="投票人" align="left">
+                <!--        <template slot-scope="scope">-->
+                <!--          <el-tooltip popper-class="table-tooltip" :content="scope.row.dwmc" placement="top">-->
+                <!--            <div class="long_title">-->
+                <!--              <span>{{scope.row.dwmc}}</span>-->
+                <!--            </div>-->
+                <!--          </el-tooltip>-->
+                <!--        </template>-->
+            </el-table-column>
+        </el-table>
+
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize" @pagination="getList" />
+
+    </div>
+</template>
+
+<script>
+import { listTpInfo, listTpInfoJgs, getTpInfo, delTpInfo, addTpInfo, updateTpInfo } from "@/api/tp/tpInfo";
+
+export default {
+    name: "TpInfo",
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 选中数组
+            ids: [],
+            // 子表选中数据
+            checkedTpInfoCb: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 投票信息表格数据
+            tpInfoList: [],
+            // 投票信息从表格数据
+            tpInfoCbList: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                name: null,
+                sfzh: null,
+                ipdz: null,
+                yl1: null,
+                yl2: null,
+                yl3: null,
+                yl4: null,
+                yl5: null
+            },
+            // 表单参数
+            form: {},
+            // 表单校验
+            rules: {
+                createTime: [
+                    { required: true, message: "录入时间不能为空", trigger: "blur" }
+                ],
+            }
+        };
+    },
+    created() {
+        this.getList();
+    },
+    methods: {
+        /** 查询投票信息列表 */
+        getList() {
+            this.loading = true;
+            listTpInfoJgs(this.queryParams).then(response => {
+                this.tpInfoList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                id: null,
+                name: null,
+                sfzh: null,
+                ipdz: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                yl1: null,
+                yl2: null,
+                yl3: null,
+                yl4: null,
+                yl5: null
+            };
+            this.tpInfoCbList = [];
+            this.resetForm("form");
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            this.ids = selection.map(item => item.id)
+            this.single = selection.length !== 1
+            this.multiple = !selection.length
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.reset();
+            this.open = true;
+            this.title = "添加投票信息";
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.reset();
+            const id = row.id || this.ids
+            getTpInfo(id).then(response => {
+                this.form = response.data;
+                this.tpInfoCbList = response.data.tpInfoCbList;
+                this.open = true;
+                this.title = "修改投票信息";
+            });
+        },
+        /** 提交按钮 */
+        submitForm() {
+            this.$refs["form"].validate(valid => {
+                if (valid) {
+                    this.form.tpInfoCbList = this.tpInfoCbList;
+                    if (this.form.id != null) {
+                        updateTpInfo(this.form).then(response => {
+                            this.$modal.msgSuccess("修改成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    } else {
+                        addTpInfo(this.form).then(response => {
+                            this.$modal.msgSuccess("新增成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    }
+                }
+            });
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const ids = row.id || this.ids;
+            this.$modal.confirm('是否确认删除投票信息编号为"' + ids + '"的数据项？').then(function () {
+                return delTpInfo(ids);
+            }).then(() => {
+                this.getList();
+                this.$modal.msgSuccess("删除成功");
+            }).catch(() => { });
+        },
+        /** 投票信息从序号 */
+        rowTpInfoCbIndex({ row, rowIndex }) {
+            row.index = rowIndex + 1;
+        },
+        /** 投票信息从添加按钮操作 */
+        handleAddTpInfoCb() {
+            let obj = {};
+            obj.ssbk = "";
+            obj.dwid = "";
+            obj.dwmc = "";
+            this.tpInfoCbList.push(obj);
+        },
+        /** 投票信息从删除按钮操作 */
+        handleDeleteTpInfoCb() {
+            if (this.checkedTpInfoCb.length == 0) {
+                this.$modal.msgError("请先选择要删除的投票信息从数据");
+            } else {
+                const tpInfoCbList = this.tpInfoCbList;
+                const checkedTpInfoCb = this.checkedTpInfoCb;
+                this.tpInfoCbList = tpInfoCbList.filter(function (item) {
+                    return checkedTpInfoCb.indexOf(item.index) == -1
+                });
+            }
+        },
+        /** 复选框选中数据 */
+        handleTpInfoCbSelectionChange(selection) {
+            this.checkedTpInfoCb = selection.map(item => item.index)
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            this.download('system/tpInfo/export', {
+                ...this.queryParams
+            }, `tpInfo_${new Date().getTime()}.xlsx`)
+        }
+    }
+};
+</script>
+
+<style>
+.table-tooltip {
+    max-width: 500px;
+}
+
+.long_title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+</style>

vue.config.js

@@ -18,7 +18,7 @@ module.exports = {
   // 部署生产环境和开发环境下的URL。
   // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
   // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
-  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
+  publicPath: process.env.NODE_ENV === "production" ? "/tp" : "/tp",
   // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
   outputDir: "dist",
   // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
@@ -36,7 +36,7 @@ module.exports = {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
         // target: `http://localhost:8080`,
-        target: `http://192.168.31.108:8889`,
+        target: `http://192.168.31.22:8889`,
         changeOrigin: true,
         pathRewrite: {
           ["^" + process.env.VUE_APP_BASE_API]: "",