baianxi_admin/src/views/company/Grid.vue

<style lang="scss">
.staff {
  display: flex;
  justify-content: space-between;
  .companies {
    height: 75vh;
    overflow: auto;
    margin-right: 10px;
    overflow-x: hidden;
  }
  & > li {
    width: 30%;
    list-style: none;
    min-height: 70vh;
    background: #fff;
    border: 1px solid #d9d9d9;
    padding: 20px 10px;
  }
  .custom-tree-node {
    width: 100%;
    .el-tree-node__content {
      height: 32px;
    }
    .label_name {
      font-size: 14px;
    }
    .active {
      color: #1989fa;
    }
    .edit {
      float: right;
      i {
        font-weight: bolder;
        font-size: 14px;
      }
    }
  }
  .staff_list {
    width: 68%;
    .grid_item {
      height: 60vh;
      border: 1px solid #ccc;
      text-align: center;
      .el-input--mini {
        width: 90%;
        margin-top: 10px;
      }
      .el-button--primary {
        width: 90%;
        margin-top: 20px;
      }
    }
  }
}
.staffs {
  margin-right: 10px;
}
// 企业端
.qy_content{
    background:#151932;
    width:100%;
    height:85vh;
    margin-top:10px;
    .grid-item{
        padding:20px;
        color: #fff;
    }
    .intro{
        height: 85vh;
        overflow-y: scroll;
        line-height: 25px;
    }
}
</style>
<template>
  <section>
    <p>公司管理 > 网格化管理</p>
    <!-- 管理员端 -->
    <div v-if="utype == 0">
      <div class="content">
        <ul class="staff">
          <li class="companies">
            <el-form size="small">
              <el-form-item>
                <el-input
                  suffix-icon="el-icon-search"
                  v-model="name"
                  @change="getData"
                  placeholder="公司名称"
                ></el-input>
              </el-form-item>
            </el-form>
            <el-tree
              :data="data"
              node-key="id"
              :props="props"
              :expand-on-click-node="false"
            >
              <span
                class="custom-tree-node"
                slot-scope="{ node, data }"
                @click="change(data)"
              >
                <span v-if="id == data.id" class="label_name active">{{
                  node.label
                }}</span>
                <span v-else class="label_name">{{ node.label }}</span>
              </span>
            </el-tree>
          </li>
          <li class="staff_list">
            <el-form
              label-width="70px"
              :inline="true"
              size="small"
              label-position="left"
            >
              <el-form-item>
                <el-button
                  icon="el-icon-plus"
                  @click="(dialogFormVisible1 = true), (staff = {})"
                  type="primary"
                  size="mini"
                  >安全生产网格化管理简介</el-button
                >
              </el-form-item>
            </el-form>
            <div>
              <el-row :gutter="20">
                <el-col :span="4">
                  <div class="grid_item" v-for="item in gridList" :key="item">
                    <div>
                      <el-input
                        v-model="item.name"
                        placeholder="请输入"
                        size="mini"
                      >
                        <el-button
                          slot="append"
                          icon="el-icon-edit"
                          size="mini"
                          @click="dialogFormVisible1 = true"
                        ></el-button>
                      </el-input>
                    </div>
                    <el-button type="primary" size="mini">添加</el-button>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid_item">1111</div>
                </el-col>
                <el-col :span="4">
                  <div class="grid_item">1111</div>
                </el-col>
                <el-col :span="4">
                  <div class="grid_item">1111</div>
                </el-col>
                <el-col :span="4">
                  <div class="grid_item">1111</div>
                </el-col>
              </el-row>
            </div>
          </li>
        </ul>
      </div>
      <el-dialog
        title="编辑"
        :visible.sync="dialogFormVisible1"
        width="800px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <el-form size="small" label-width="120px">
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="类型">
                <el-select clearable v-model="form1.utype" placeholder="请选择">
                  <el-option label="部门级" value="部门级"></el-option>
                  <el-option label="岗位级" value="岗位级"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="负责人姓名">
                <el-input
                  v-model="form1.charge_person_name"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="负责人电话">
                <el-input
                  v-model="form1.charge_person_phone"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="负责人照片">
                <div class="upload_div">
                  <i
                    v-if="form.safecolor_img"
                    @click="form.safecolor_img = ''"
                    class="el-icon-delete"
                  ></i>
                  <i class="el-icon-upload"></i>
                  <img
                    v-if="form.safecolor_img"
                    width="100%"
                    height="100%"
                    :src="form.safecolor_img"
                    alt=""
                  />
                  <input
                    accept="image/png,image/jpg"
                    @change="upload('safecolor_img')"
                    id="safecolor_img"
                    type="file"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="安全证书">
                <div class="upload_div">
                  <i
                    v-if="form.safecolor_img"
                    @click="form.safecolor_img = ''"
                    class="el-icon-delete"
                  ></i>
                  <i class="el-icon-upload"></i>
                  <img
                    v-if="form.safecolor_img"
                    width="100%"
                    height="100%"
                    :src="form.safecolor_img"
                    alt=""
                  />
                  <input
                    accept="image/png,image/jpg"
                    @change="upload('safecolor_img')"
                    id="safecolor_img"
                    type="file"
                  />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="责任清单">
            <el-input
              type="textarea"
              v-model="form1.duty_list"
              placeholder=""
              rows="10"
            ></el-input>
          </el-form-item>
          <el-form-item label="履职清单">
            <el-input
              type="textarea"
              v-model="form1.job_list"
              placeholder=""
              rows="10"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogFormVisible1 = false"
            >取 消</el-button
          >
          <el-button size="small" type="primary" @click="addStaff"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>

    <!-- 企业端 -->
    <div class="qy_content">
        <el-row :gutter="10">
            <el-col :span="12">
                <div class="grid-item intro">
                    <h3 align="center">巴中市恩阳区子耀商贸有限公司</h3>
                    <h4 align="center">安全生产网格化管理建设过程简介</h4>
                <div id="w-e-textarea-1" data-slate-editor="" data-slate-node="value" suppresscontenteditablewarning="" role="textarea" spellcheck="true" autocorrect="true" autocapitalize="true" contenteditable="true">

                    <pre id="w-e-element-27" data-slate-node="element"><code id="w-e-element-28" data-slate-node="element"><span id="w-e-text-29" data-slate-node="text"><span data-slate-leaf="true"><span data-slate-string="true">公司自成立以来，认真贯彻执行《安全生产法》、《关于印发四川省安全风险分级管控工作指南》的通知》（川办〔2017〕25号）、企业安全文化建设评价准则 AQT9005-2008等文件要求，一直秉承着“人民至上、生命至上”的安全生产方针，把安全生产当做头等大事来抓，在市、区政府和应急管理局领导的关心关照下，不断提高安全生产管理水平，从未发生过安全生产事故。公司在安全生产方面主要做了以下几个方面的工作：
一、安全生产行业规范管理</span></span></span></code></pre><p id="w-e-element-13" data-slate-node="element"><span id="w-e-text-14" data-slate-node="text"><span data-slate-leaf="true"><span data-slate-string="true">公司按照行业安全生产规范要求，落实了安全生产主体责任，建立了全员安全生产责任制（安全生产清单制管理），通过全员全过程参与，全面管控经营活动各环节的安全生产工作，实现了安全管理系统化、岗位操作行为规范化等。</span></span></span></p><p id="w-e-element-15" data-slate-node="element"><span id="w-e-text-16" data-slate-node="text"><span data-slate-leaf="true"><span data-slate-string="true">二、安全文化建设</span></span></span></p><p id="w-e-element-17" data-slate-node="element"><span id="w-e-text-18" data-slate-node="text"><span data-slate-leaf="true"><span data-slate-string="true">公司通过安全文化建设，形成了富有公司特色的安全文化理念；通过开展安全文化进部门、进班组、进岗位创新安全文化建设模式；树立安全文化建设典型，使全员的安全知识、安全意识、安全能力、安全素质得到普遍提高；创建本质安全型部门、班组、员工；通过学习和借鉴各行业先进的安全管理思想和安全文化理论，结合公司安全管理实际，通过提炼总结，逐步形成安全文化的价值体系，做到内涵丰富、系统完善、个性鲜明，逐步形成上下齐心、知行合一的安全文化，推动企业安全、健康、和谐发展。</span></span></span></p><p id="w-e-element-19" data-slate-node="element"><span id="w-e-text-20" data-slate-node="text"><span data-slate-leaf="true"><span data-slate-string="true">三、风险管控和隐患排查双重预防机制建设</span></span></span></p><p id="w-e-element-21" data-slate-node="element"><span id="w-e-text-22" data-slate-node="text"><span data-slate-leaf="true"><span data-slate-string="true">公司以安全风险辨识和分级管控为基础，以隐患排查和治理为手段，把风险控制在隐患前面，并通过隐患排查，及时找出风险控制过程可能出现的缺失、缺陷、漏洞及风险控制失效环节，把隐患消灭在事故发生之前。通过安全风险管控和隐患排查双重预防机制建设，还建立健全了安全风险分级管控和隐患排查治理工作制度和规范，完善了技术工程支撑、智能化管控、第三方专业化服务的保障措施，实现企业安全风险自辨自控、隐患自查自治，全面提升了公司安全生产整体预控能力，防止重特大事故的发生。</span></span></span></p><p id="w-e-element-23" data-slate-node="element"><span id="w-e-text-24" data-slate-node="text"><span data-slate-leaf="true"><span data-slate-string="true">为进一步落实公司的安全生产责任，构建长效的安全生产机制，形成公司各负其责、上下联动、齐抓共管的安全生产工作良好局面，在原有的规范管理基础上，进一步实行公司内部的安全生产网格化管理，更进一步明确网格单元内各责任人和责任区域在工作中的安全职责，做到定人、定岗、定责，确保安全管理工作无遗漏、全覆盖，达到安全隐患排查工作“横向到边、纵向到底”，安全隐患整治责任明确、落实到位的目的。</span></span></span></p><p id="w-e-element-25" data-slate-node="element"><span id="w-e-text-26" data-slate-node="text"><span data-slate-leaf="true"><span data-slate-string="true">安全生产网格化管理责任图</span></span></span></p><p id="w-e-element-3" data-slate-node="element" style="text-align: center;"><span id="w-e-text-4" data-slate-node="text"><span data-slate-leaf="true"><span data-slate-string="true" style="font-size: 10.5pt; font-family: Calibri, &quot;sans-serif&quot;;"> 

巴中市恩阳区子耀商贸有限公司


安全生产网格化管理建设过程简介


公司自成立以来，认真贯彻执行《安全生产法》、《关于印发四川省安全风险分级管控工作指南》的通知》（川办〔2017〕25号）、企业安全文化建设评价准则 AQT9005-2008等文件要求，一直秉承着“人民至上、生命至上”的安全生产方针，把安全生产当做头等大事来抓，在市、区政府和应急管理局领导的关心关照下，不断提高安全生产管理水平，从未发生过安全生产事故。公司在安全生产方面主要做了以下几个方面的工作：


一、安全生产行业规范管理


公司按照行业安全生产规范要求，落实了安全生产主体责任，建立了全员安全生产责任制（安全生产清单制管理），通过全员全过程参与，全面管控经营活动各环节的安全生产工作，实现了安全管理系统化、岗位操作行为规范化等。


二、安全文化建设


公司通过安全文化建设，形成了富有公司特色的安全文化理念；通过开展安全文化进部门、进班组、进岗位创新安全文化建设模式；树立安全文化建设典型，使全员的安全知识、安全意识、安全能力、安全素质得到普遍提高；创建本质安全型部门、班组、员工；通过学习和借鉴各行业先进的安全管理思想和安全文化理论，结合公司安全管理实际，通过提炼总结，逐步形成安全文化的价值体系，做到内涵丰富、系统完善、个性鲜明，逐步形成上下齐心、知行合一的安全文化，推动企业安全、健康、和谐发展。


三、风险管控和隐患排查双重预防机制建设


公司以安全风险辨识和分级管控为基础，以隐患排查和治理为手段，把风险控制在隐患前面，并通过隐患排查，及时找出风险控制过程可能出现的缺失、缺陷、漏洞及风险控制失效环节，把隐患消灭在事故发生之前。通过安全风险管控和隐患排查双重预防机制建设，还建立健全了安全风险分级管控和隐患排查治理工作制度和规范，完善了技术工程支撑、智能化管控、第三方专业化服务的保障措施，实现企业安全风险自辨自控、隐患自查自治，全面提升了公司安全生产整体预控能力，防止重特大事故的发生。





为进一步落实公司的安全生产责任，构建长效的安全生产机制，形成公司各负其责、上下联动、齐抓共管的安全生产工作良好局面，在原有的规范管理基础上，进一步实行公司内部的安全生产网格化管理，更进一步明确网格单元内各责任人和责任区域在工作中的安全职责，做到定人、定岗、定责，确保安全管理工作无遗漏、全覆盖，达到安全隐患排查工作“横向到边、纵向到底”，安全隐患整治责任明确、落实到位的目的。


安全生产网格化管理责任图







 

</span></span></span></p></div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-item grid_chart">
                    <h3 align="center">安全生产网格化管理责任图</h3>
                    <!-- <img src="../../images/grid.png" alt="" style="margin-top:50px;text-align:center;margin-left:50px;"> -->
                    <vue2-org-tree :data="treeData" :horizontal="true"/>
                </div>
            </el-col>
        </el-row>
    </div>
  </section>
</template>
<script>
import Page from "../../components/Page";
export default {
  components: {
    Page,
  },
  data() {
    return {
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      data: [],
      form: { page: 1, page_size: 20 },
      list: [],
      total: 1,
      loading: false,
      props: {
        label: "name",
      },
      id: "",
      dpt: { enterprise_name: "", enterprise_id: "", staffusers: [] },
      enterprise_name: "",
      name: "",
      staff: {},
      dptList: [],
      form1: {},
      gridList: [
        {
          name: "公司负责人",
          id: 1,
          children: [
            {
              name: "安全科",
              id: 2,
              children: [
                {
                  name: "仓库运行班",
                  id: 3,
                  children: [
                    {
                      name: "储存员",
                      id: 4,
                      children: [],
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      utype: 2,
      treeData: {
        id: 0,
        label: "XXX科技有限公司",
        children: [
          {
            id: 2,
            label: "产品研发部",
            children: [
              {
                id: 5,
                label: "研发-前端"
              },
              {
                id: 6,
                label: "研发-后端"
              },
              {
                id: 9,
                label: "UI设计"
              },
              {
                id: 10,
                label: "产品经理"
              }
            ]
          },
          {
            id: 3,
            label: "销售部",
            children: [
              {
                id: 7,
                label: "销售一部"
              },
              {
                id: 8,
                label: "销售二部"
              }
            ]
          },
          {
            id: 4,
            label: "财务部"
          },
          {
            id: 9,
            label: "HR人事"
          }
        ]
      }
    };
  },
  methods: {
    gopage(size) {
      if (size) {
        this.form.page_size = size;
      }
      this.form.page = this.$refs.pageButton.page;
      this.getData();
    },
    change(data) {
      this.id = data.id;
      this.enterprise_name = data.name;
      this.getDpt();
      this.$api.getDepartmentList({ enterprise_id: data.id }).then((res) => {
        this.dptList = res.data.data.list;
      });
    },
    getData() {
      this.loading = true;
      this.$api.getEnterpriseList({ name: this.name }).then((res) => {
        this.data = res.data.data.list;
        // this.id=this.data[0].id;
        // this.enterprise_name=this.data[0].name;
        this.change(this.data[0]);
      });
    },
    //获取员工列表
    getDpt() {
      var parm = this.form;
      parm.enterprise_id = this.id;
      this.$api.getStaffuserList(parm).then((res) => {
        this.loading = false;
        this.list = res.data.data.list;
        this.total = res.data.data.total;
      });
    },
    del(id) {
      this.$confirm("确定删除吗", "提示", {
        type: "warning",
      }).then(() => {
        this.$api.deleteStaffuser({ id: id }).then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getDpt();
        });
      });
    },
    addStaff() {
      let parm = this.staff;

      if (!parm.name) {
        this.$message.error("请输入员工名称");
        return;
      }
      if (!parm.username) {
        this.$message.error("请输入账号");
        return;
      }
      if (!parm.password) {
        this.$message.error("请输入密码");
        return;
      }
      if (!parm.utype) {
        this.$message.error("请选择账号类型");
        return;
      }
      if (parm.utype != "公司级" && !parm.department_id) {
        this.$message.error("请选择部门");
        return;
      }
      if (parm.id) {
        this.$api.updateStaffuser(parm).then((res) => {
          if (res.data.code == 0) {
            this.getDpt();
            this.staff = {};
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.dialogFormVisible1 = false;
          } else {
            this.$message.error(res.data.message);
          }
        });
      } else {
        parm.id = 0;
        parm.enterprise_id = this.id;
        this.$api.saveStaffuser(parm).then((res) => {
          if (res.data.code == 0) {
            this.getDpt();
            this.staff = {};
            this.$message({
              message: "新增成功",
              type: "success",
            });
            this.dialogFormVisible1 = false;
          } else {
            this.$message.error(res.data.message);
          }
        });
      }
    },
    handleClose(index) {
      this.dpt.staffusers.splice(index, 1);
    },
    edit(data) {
      this.dialogFormVisible1 = true;
      this.staff = { ...data };
    },
  },
  created() {
    this.getData();
  },
};
</script>