更改界面

zhengpz

2021-09-12 19b2aecdae749714ece664c8faddd7bda846f9f1

 src/views/securityUnitOperation/operationAnalysis.vue

@@ -1,20 +1,11 @@
<template>
  <div class="page1">
    <el-row>
      <el-col :span="24">
        <div class="rowContent first-menu">
  <div class="yyPage">
    <el-row :gutter="20">
      <el-col :span="14">
        <div class="rowContent first-menu" style="position: relative;">
          <div class="rowTitle">
            <img src="../../../public/img/bajgxt/u1618.png" />
            <span>数据概览</span>

            <!-- <el-select class="select0" v-model="value0" placeholder="请选择">
              <el-option
                v-for="item in options0"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select> -->
            <el-select
              class="select1"
              ref="treeForm"
@@ -54,23 +45,18 @@
              <span>{{ card.baoanTotal }}</span>
              <span>较上月增加{{ card.addbaoanTotal }}人</span>
            </div>
            <div class="box-card">
            <!-- <div class="box-card">
              <span>正常保安员</span>
              <span>{{ card.zcBaoan }}</span>
              <span>较上月增加{{ card.addzcBaoan }}人</span>
            </div>
            </div> -->
            <div class="box-card">
              <span>持证保安员</span>
              <span>{{ card.czBaoan }}</span>
              <span>较上月增加{{ card.addczBaoan }}人</span>
            </div>
            <!-- <div class="box-card">
              <span>过考保安员</span>
              <span>{{ card.gkBaoan }}</span>
              <span>较上月增加{{ card.addgkBaoan }}人</span>
            </div> -->
            <div class="box-card">
              <span>服务客户</span>
              <span>服务对象</span>
              <span>{{ card.kh }}</span>
              <span>较上月增加{{ card.addkh }}家</span>
            </div>
@@ -87,6 +73,44 @@
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="rowContent first-menu">
          <div class="rowTitle">
            <img src="../../../public/img/bajgxt/yj.png" />
            <span>预警分析</span>
          </div>

          <div class="col-content" style="margin-left: 55px;">
            <div
              class="box-card"
              style="margin-right: 50px;cursor: pointer; "
              @click="showTable('fw')"
            >
              <span>服务对象预警(家)</span>
              <span>{{ card.czBaoan }}</span>
              <span>服务对象不多于1家</span>
            </div>
            <div
              class="box-card"
              style="margin-right: 50px;cursor: pointer;"
              @click="showTable('pq')"
            >
              <span>派遣预警(家)</span>
              <span>{{ card.kh }}</span>
              <span>派遣比例低于50%</span>
            </div>
            <div
              class="box-card"
              style="margin-right: 50px;cursor: pointer;"
              @click="showTable('cz')"
            >
              <span>持证上岗预警(家)</span>
              <span>{{ card.sheb }}</span>
              <span>持证率低于50%</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
@@ -97,7 +121,7 @@
      </el-col>
      <el-col :span="8">
        <div class="rowContent" v-loading="loading2">
          <span class="span-title">服务客户</span>
          <span class="span-title">服务对象</span>
          <div id="middleEchart2"></div>
        </div>
      </el-col>
@@ -134,6 +158,141 @@
        </div>
      </el-col>
    </el-row>
    <el-dialog
      class="dialog"
      :title="gridData.title"
      v-loading="dialogloading"
      element-loading-text="数据加载中"
      :visible.sync="dialogTableVisible"
      :modal-append-to-body="false"
    >
      <el-table :data="gridData.data">
        <template v-if="gridData.type === 'fw'">
          <el-table-column :key="gridData.type" type="index"> </el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="realName"
            label="保安公司名称"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="deptName"
            label="所属辖区"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="sex"
            label="服务对象数"
            :formatter="sexFormatter"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="cardid"
            label="服务单位名称"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="age"
            label="备注"
            :show-overflow-tooltip="true"
            width="100"
          ></el-table-column>
        </template>
        <template v-if="gridData.type === 'pq'">
          <el-table-column :key="gridData.type" type="index"> </el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="enterpriseName"
            label="保安公司名称"
            width="180"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="znum"
            label="所属辖区"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="cznum"
            label="保安总人数"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="czl"
            label="派遣人数"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="sbnum"
            label="派遣比例"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="sbl"
            label="备注"
            :show-overflow-tooltip="true"
          ></el-table-column>
        </template>
        <template v-if="gridData.type === 'cz'">
          <el-table-column :key="gridData.type" type="index"> </el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="enterpriseName"
            label="保安公司名称"
            width="180"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="znum"
            label="所属辖区"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="cznum"
            label="保安总人数"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="painum"
            label="持证人数"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="fwnum"
            label="持证比例"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="pql"
            label="备注"
            :show-overflow-tooltip="true"
          ></el-table-column>
        </template>
      </el-table>
      <el-pagination
        @current-change="changePage"
        @size-change="changePage"
        :current-page.sync="gridData.current"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="gridData.total"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>

@@ -219,10 +378,30 @@
        label: "title",
        value: "id"
      },
      node: {} //选中的记录
      node: {}, //选中的记录
      gridData: {
        data: [],
        total: 0,
        current: 1,
        type: "fw",
        title: ""
      },
      dialogloading: false,
      dialogTableVisible: false
    };
  },
  methods: {
    showTable(type) {
      this.gridData.type = type;
      this.dialogTableVisible = true;
      if (type === "fw") {
        this.gridData.title = "服务对象预警保安公司";
      } else if (type === "pq") {
        this.gridData.title = "派遣预警保安公司";
      } else if (type === "cz") {
        this.gridData.title = "持证上岗预警保安公司";
      }
    },
    //点击节点
    handleNodeClick(data) {
      this.node = data;
@@ -509,7 +688,7 @@
  }
}
// 适配分辨率1600*900
@media screen and (min-width: 1281px)and (max-width: 1600px)  {
@media screen and (min-width: 1281px) and (max-width: 1600px) {
  .box-card {
    font-size: 15px;
    width: 128px;
@@ -594,13 +773,13 @@
    }
  }
}
@media screen and (min-width: 1601px)and (max-width: 1920px) {
@media screen and (min-width: 1601px) and (max-width: 1920px) {
  .box-card {
    width: 150px;
    background: #00aaf1;
    height: 135px;
    text-align: center;
    margin-right: 66px;
    margin-right: 30px;
    box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
    line-height: 40px;
    span:nth-child(2) {
@@ -679,7 +858,7 @@
  }
}

.page1 {
.yyPage {
  height: 100%;
  width: 100%;
}
@@ -760,7 +939,7 @@
}
.col-content {
  display: flex;
  margin-top: 15px;
  margin-top: 35px;
  margin-left: 36px;
}
.leftEchartTitle {
@@ -795,4 +974,46 @@
    color: #2ec7c9;
  }
}
/deep/ .el-table .cell {
  text-align: center;
}
.yyPage {
  /deep/.dialog {
    z-index: 10000000 !important;
    .el-table {
      top: 0px !important;
      margin: 0px !important;
      width: 100% !important;
      height: calc(100% - 50px) !important;

      .el-table__header {
        background-color: #2d5cc8 !important;
      }
      .el-table__body-wrapper {
        height: calc(100% - 50px);
        overflow-x: hidden;
        overflow-y: auto;
      }
    }
    .el-pagination {
      color: #a2a5a5;
    }
    .btn-prev,
    .btn-next {
      background: transparent !important;
    }
    .el-dialog__body {
      padding: 10px 20px;
      height: calc(100% - 60px);
      .el-input {
        width: 50px !important;
        border-bottom: 1px solid #8a7b7b !important;
      }
    }
  }
  /deep/ .el-dialog {
    width: 80% !important;
    height: 77%;
  }
}
</style>