index.vue

<template>
  <div class="app-container">
    <div style="width: 100%;height: 10em;">
      <div class="first-div">
        <div style="width: 40%;height: 100%; text-align: center;float: left;font-size: 15px;">
          <img src="../../../assets/trouble.png" width="25%" style="margin-top: 2rem;">
          <p>事故发生数</p>
        </div>
        <div style="width: 60%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">{{troubleObj.troubleTotal}}</div>
      </div>
      <div class="first-div">
        <div style="width: 40%;height: 100%; text-align: center;float: left;font-size: 15px;">
          <img src="../../../assets/trouble.png" width="25%" style="margin-top: 2rem;">
          <p>伤亡人数</p>
        </div>
        <div style="width: 60%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">{{troubleObj.injuryTotal+troubleObj.deathTotal}}</div>
      </div>
      <div class="first-div">
        <div style="width: 40%;height: 100%; text-align: center;float: left;font-size: 15px;">
          <img src="../../../assets/trouble.png" width="25%" style="margin-top: 2rem;">
          <p>事故处理办结率</p>
        </div>
        <div style="width: 60%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">{{troubleObj.completionRate}}%</div>
      </div>
    </div>

    <div style="width: 100%; padding: 30px;">
      <el-table v-loading="loading" :data="troubleList" >
        <el-table-column label="事故名称" align="center" prop="troubleName" width="200px"/>
        <el-table-column label="事故类型" align="center" prop="troubleType" width="130px">
          <template slot-scope="scope">
            <span v-if="scope.row.troubleType == 1">生产安全事故</span>
            <span v-if="scope.row.troubleType == 2">非生产安全事故</span>
          </template>
        </el-table-column>
        <el-table-column label="事故地点" align="center" prop="troubleLocation" width="300px"/>
        <el-table-column label="事故发生时间" align="center" prop="happenDate" width="150px"/>
        <el-table-column label="是否人员伤亡" align="center" prop="isCasualties" width="150px">
          <template slot-scope="scope">
            <span v-if="scope.row.isCasualties == 1">是</span>
            <span v-if="scope.row.isCasualties == 2">否</span>
          </template>
        </el-table-column>
        <el-table-column label="责任单位" align="center" prop="responsibleUnit" width="180px"/>
        <el-table-column label="责任人员" align="center" prop="responsiblePeople"/>
        <el-table-column label="是否处理" align="center" prop="isDeal">
          <template slot-scope="scope">
            <span v-if="scope.row.isDeal == 1">已处理</span>
            <span v-if="scope.row.isDeal == 2">未处理</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="showDetail(scope.row)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body @cancel="cancel" @close="cancel">
        <el-row>
          <el-col :span="14">
            <el-form ref="detailForm" :model="detailForm" label-width="120px">
              <el-row>
                <el-col :span="11">
                  <el-form-item label="事故名称:">
                    <el-input v-model="detailForm.troubleName" disabled/>
                  </el-form-item>
                  <el-form-item label="事故原因:">
                    <el-input v-model="detailForm.troubleReason" disabled/>
                  </el-form-item>
                  <el-form-item label="责任单位:">
                    <el-input v-model="detailForm.responsibleUnit" disabled/>
                  </el-form-item>
                  <el-form-item label="是否人员伤亡:">
                    <el-input v-if="detailForm.isCasualties == '1'" value="是" disabled/>
                    <el-input v-if="detailForm.isCasualties == '2'" value="是" disabled/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="事故类型:">
                    <el-input v-if="detailForm.troubleType == '1'" value="安全生产事故" disabled/>
                    <el-input v-if="detailForm.troubleType == '2'" value="非生产安全事故" disabled/>
                  </el-form-item>
                  <el-form-item label="事故地点:">
                    <el-input v-model="detailForm.troubleLocation" disabled/>
                  </el-form-item>
                  <el-form-item label="责任人员:">
                    <el-input v-model="detailForm.responsiblePeople" disabled/>
                  </el-form-item>
                  <el-form-item label="是否处理:">
                    <el-input v-if="detailForm.isDeal == '1'" value="已处理" disabled/>
                    <el-input v-if="detailForm.isDeal == '2'" value="未处理" disabled/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="detailForm.isCasualties == '1'">
                <el-col :span="11">
                  <el-form-item label="受伤人数:">
                    <el-input v-model="detailForm.injuryNum" disabled/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="死亡人数:">
                    <el-input v-model="detailForm.deathNum" disabled/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="23">
                  <el-form-item label="处理完成时间:">
                    <el-input v-model="detailForm.dealDate" disabled/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="23">
                  <el-form-item label="简要经过:">
                    <el-input type="textarea" v-model="detailForm.briefProcess" disabled/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="23">
                  <el-form-item label="备注信息:">
                    <el-input type="textarea" v-model="detailForm.remarks" disabled/>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-col>

          <el-col :span="9">
            <div style="width: 100%;height: 390px; border: 1px solid rgb(218, 213, 213);margin-bottom: 10px;">
              <div style="width: 100%;height: 100%" id="troubleContainer"></div>
            </div>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { troubleStatistic } from "@/api/statistic/statisticAnalysis";
  import { listTrouble, getTrouble } from "@/api/standingBook/trouble";
  import { EditorMap } from "@/utils/mapClass/getPath.js";

  export default {
    name: "TroubleStatisticAnalysis",
    components: {
    },
    data() {
      return {
        // 统计数据
        troubleObj: {},
        // 遮罩层
        loading: true,
        // 事故台账表格数据
        troubleList: [],
        // 总条数
        total: 0,
        // 地图
        map: null,
        devicePos: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        // 表单参数
        detailForm: {},
      };
    },
    created() {
    },
    mounted() {
      this.getStatiData();
      this.getList();
    },
    methods: {
      getStatiData() {
        troubleStatistic().then(response => {
          this.troubleObj = response.data;
        });
      },
      getList() {
        this.loading = true;
        listTrouble(this.queryParams).then(response => {
          this.troubleList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      reset() {
        this.detailForm = {
          troubleId: null,
          troubleName: null,
          troubleLocation: null,
          longitude: null,
          latitude: null,
          troubleType: null,
          briefProcess: null,
          troubleReason: null,
          isCasualties: null,
          injuryNum: null,
          deathNum: null,
          responsibleUnit: null,
          responsiblePeople: null,
          isDeal: null,
          happenDate: null,
          dealDate: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          isDel: null,
          remarks: null
        };
        this.resetForm("detailForm");
        this.devicePos = [];
      },
      /** 详细信息跳转 */
      showDetail(row) {
        this.reset();
        getTrouble(row.troubleId).then(response => {
          this.detailForm = response.data;
          this.devicePos = [this.detailForm.longitude, this.detailForm.latitude];
          console.log("this.devicePos",this.devicePos);
          this.open = true;
          this.title = "燃气事故台账详情";

          this.$nextTick(() => {
            this.map = new EditorMap("troubleContainer", {}, this);
            this.map.addDevice({ path: this.devicePos });
            this.map.nowMouseTarget = null;
            this.map.mousetoolClose(false);
          });
        });
      },
      cancel() {
        this.open = false;
        this.reset();
        this.map.destroy();
      },
    }
  };
</script>
<style>
  .first-div{
    margin-top: 20px;
    width: 30%;
    float: left;
    margin-left: 2.5%;
    height: 9rem;
    color: #515a6e;
    background-color: #FFF;
    border-radius: 5px;
    border: 2px solid rgb(22, 151, 207, 0.3);
    box-shadow:  0 0 8px 8px rgba(131, 229, 255, 0.1)inset, 0 0 7px 7px rgba(22, 151, 207, 0.2);
  }
</style>