qdtlui/src/views/qdtl/incident/index.vue

<template>
  <div class="app-container">
     <!-- <headerdiv ref="headerDiv" :currentindexP = currentindexNew></headerdiv> -->
     <div class="divtitle">
       <img src="~@/assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
       <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:1rem">{{divtitle}}</div>
      </div>
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="6.8rem" style="margin-top:1rem">
     <el-row>
         <el-col :span="18">
                <el-form-item>
                    <el-button type="primary"  size="mini" @click="getincidentExport">导出</el-button>
                    <!-- <el-button type="primary"  size="mini" @click="handleQuery">批量导出</el-button> -->
                </el-form-item>
         </el-col>
         <el-col :span="6">
                     <el-input
                                    v-model="queryParams.name"
                                    placeholder="请输入事件名称"
                                    clearable
                                    size="small"
                                    style="width:30rem"
                                    />
                    <el-button type="primary"  size="mini" @click="handleQuery">确定</el-button>
         </el-col>
     </el-row>
    </el-form>

    <el-table v-loading="loading" :data="documentList" @selection-change="handleSelectionChange" stripe
      class="my_table"
      :row-class-name="tableRowClassName"
      :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
                    <el-table-column label="序号" align="center" type='index' />
                    <!-- <el-table-column label="区域" align="center" prop="area" /> -->
                    <el-table-column label="区域" align="center" prop="area">
                        <template slot-scope="scope">
                        <dict-tag :options="dict.type.tl_xun_area" :value="scope.row.area"/>
                        </template>
                    </el-table-column>
                    <el-table-column label="位置" align="center" prop="address" />
                    <el-table-column label="上报时间" align="center" prop="happenTime" />
                    <el-table-column label="事件等级" align="center" class-name="small-padding fixed-width">
                                <template slot-scope="scope">
                                     <div :class='"color_"+scope.row.incLevel'>
                                        {{getLevel(scope.row.incLevel)}}
                                     </div>
                                </template>
                    </el-table-column>
                     <el-table-column label="状态" align="center" class-name="small-padding fixed-width">
                                <template slot-scope="scope">
                                     <div>
                                        {{getStatus(scope.row.status)}}
                                     </div>
                                </template>
                    </el-table-column>
                    <el-table-column label="事件名称" align="center" prop="name" />
                    <el-table-column label="事件描述" align="center" prop="detail" />
                    <el-table-column label="相关图片" align="center" class-name="small-padding fixed-width">
                                <template slot-scope="scope">
                                      {{getCount(scope.row.pics)+getCount(scope.row.dealPics)}}
                                </template>
                    </el-table-column>
                    <el-table-column label="上报人" align="center" prop="createByName" />
                    <el-table-column label="接收人" align="center" prop="acceptUserName" />
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                                <template slot-scope="scope">
                                        <el-button
                                            size="mini"
                                            type="text"
                                            @click="openDetail(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="dialogVisible"
            v-if='dialogVisible'
            width="90%"
            >
            <div style="height:80vh">
                   <el-col :span="8">
                       <div style="padding-left:10rem">
                            <div style="font-size: 1.6rem;
                                        font-family: Microsoft YaHei;
                                        font-weight: 400;
                                        color: #3DFFEA;
                                        line-height: 36px;">
                                        基本信息
                            </div>
                            <div style="font-size: 16px;
                                        font-family: Microsoft YaHei;
                                        font-weight: 400;
                                        color: #C5D0D4;
                                        line-height: 36px;
                                        margin-top:10rem">
                               <el-row type="flex" class="row-bg">
                                    <el-col :span="5"><div  style="float:right">区域:</div></el-col>
                                    <el-col :span="19"><div style="padding-left:2rem">{{getAreaName(detailObj.area)}}</div></el-col>
                               </el-row>
                                <el-row type="flex" class="row-bg" style="margin-top:2rem">
                                    <el-col :span="5"><div  style="float:right">位置:</div></el-col>
                                    <el-col :span="19"><div style="padding-left:2rem">{{detailObj.address}}</div></el-col>
                               </el-row>
                                <el-row type="flex" class="row-bg" style="margin-top:2rem">
                                    <el-col :span="5"><div style="float:right">上报时间:</div></el-col>
                                    <el-col :span="19"><div style="padding-left:2rem">{{detailObj.happenTime}}</div></el-col>
                               </el-row>
                                <el-row type="flex" class="row-bg" style="margin-top:2rem">
                                    <el-col :span="5"><div style="float:right">状态:</div></el-col>
                                    <el-col :span="19">
                                        <div style="padding-left:2rem">
                                                <div>
                                                    {{getStatus(detailObj.status)}}
                                                </div>
                                        </div></el-col>
                               </el-row>
                                 <el-row type="flex" class="row-bg" style="margin-top:2rem">
                                    <el-col :span="5"><div style="float:right">事件等级:</div></el-col>
                                    <el-col :span="19">
                                        <div style="padding-left:2rem">
                                                <div :class='"color_"+detailObj.incLevel'>
                                                    {{getLevel(detailObj.incLevel)}}
                                                </div>
                                        </div></el-col>
                               </el-row>
                                 <el-row type="flex" class="row-bg" style="margin-top:2rem">
                                    <el-col :span="5"><div style="float:right">事件名称:</div></el-col>
                                    <el-col :span="19"><div style="padding-left:2rem">{{detailObj.name}}</div></el-col>
                               </el-row>
                                 <el-row type="flex" class="row-bg" style="margin-top:2rem">
                                    <el-col :span="5"><div style="float:right">事件描述:</div></el-col>
                                    <el-col :span="19"><div style="padding-left:2rem">{{detailObj.detail}}</div></el-col>
                               </el-row>
                                 <el-row type="flex" class="row-bg" style="margin-top:2rem">
                                    <el-col :span="5"><div style="float:right">上报人:</div></el-col>
                                    <el-col :span="19"><div style="padding-left:2rem">{{detailObj.createByName}}</div></el-col>
                               </el-row>
                                 <el-row type="flex" class="row-bg" style="margin-top:2rem">
                                    <el-col :span="5"><div style="float:right">接收人:</div></el-col>
                                    <el-col :span="19"><div style="padding-left:2rem">{{detailObj.acceptUserName}}</div></el-col>
                               </el-row>
                           </div>
                       </div>
                   </el-col>
                   <el-col :span="16">
                           <div>
                                    <div style="font-size: 1.6rem;
                                                    font-family: Microsoft YaHei;
                                                    font-weight: 400;
                                                    color: #3DFFEA;
                                                    line-height: 36px;">
                                                    相关图片
                                    </div>
                                    <div style="padding-top:2rem;padding-left:5rem">
                                              <img :src='getImage()' style="width: 88.7rem;height: 50.7rem;"/>
                                    </div>
                                    <div v-if="detailObj.pics" style="display:flex; flex-direction: row;margin-top:3rem;padding-left:5rem">
                                                <div v-for="(pic,index) in detailObj.picList.split(',')">
                                                     <div :class='selectindex === index?"imgSelect":""' v-if="pic !== ''" @click="selectImg(index)" style="margin-left:1rem">
                                                     <img :src='getImageUrl(pic)' style="width: 11.7rem;height: 8.7rem;"/>
                                                     </div>
                                                </div>
                                                <!-- <div v-for="(pic,index) in detailObj.dealPics.split(',')">
                                                     <div :class='selectindex === index?"imgSelect":""' @click="selectImg(index)" style="margin-left:1rem">
                                                     <img :src='getImageUrl(pic)' style="width: 11.7rem;height: 8.7rem;"/>
                                                     </div>
                                                </div> -->
                                    </div>
                           </div>
                   </el-col>
            </div>
            <!-- <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span> -->
            </el-dialog>

  </div>
</template>

<script>
import { getincidentList,getincidentExport } from "@/api/qdtl/data";
import { listWork } from "@/api/qdtl/work";
import { listDocument } from '@/api/qdtl/document'
import headerdiv from '@/components/HeaderDiv/index.vue'
import mapdiv from "@/components/map/index.vue"
import addDocument from '@/views/qdtl/document/add.vue'


export default {
  name: "Location",
  dicts: ['tl_xun_area'],
  data() {
    return {
      pageList:[],

      picImage:'',

      detailObj:{},
      // 遮罩层
      loading: false,

      divtitle:'隐患上报列表',
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 巡检点管理表格数据
      documentList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,

      dialogVisible:false,

      isEdit:'true',

      selectUser:[],

      userList:[],

      dateRange:'',

      dateRangeArry:[],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {},
      selectindex:0,

      formObj:{},

      pointArry:{
        locations:'',
        type:''
      },
      scheduleList:[],
      // 表单校验
      rules: {
      }
    };
  },
   components:{
      mapdiv,
      headerdiv,
      addDocument
    },
  created() {
    this.getList();
    // this.handleAdd();
    // this.dialogVisible = false;
    // this.getAreaList();
  },
   mounted() {
       this.dialogVisible = true;
       this.dialogVisible = false;
   },
  methods: {
      getincidentExport(){
         this.download('/qdtl/incident/export', {
                        ...this.queryParams
                    }, `location_${new Date().getTime()}.xlsx`)
              // getincidentExport(this.queryParams).then(response =>{
              //          console.log(response);
              // })
      },
      selectImg(index){
            //console.log(index);
            //this.detailObj.index = index;
            this.selectindex=index;
            this.picImage = this.detailObj.picList.split(',')[index];
            console.log(this.picImage);
             //console.log(this.detailObj.index);
      },
      getAreaName(id){
            console.log(this.dict.type.tl_xun_area);
            for(var index in this.dict.type.tl_xun_area){
                     if(this.dict.type.tl_xun_area[index].value == id){
                                    return this.dict.type.tl_xun_area[index].label
                     }
            }
      },
      getImage (){
            return process.env.VUE_APP_BASE_API+this.picImage
      },
      getImageUrl(pic){
            return process.env.VUE_APP_BASE_API+pic
      },
      openDetail(obj){
            //console.log(obj);
            this.dialogVisible = true
            this.detailObj = obj
            console.log(this.detailObj.dealPics);
            this.detailObj.picList = this.detailObj.pics+','+this.detailObj.dealPics
            this.picImage = this.detailObj.pics.split(',')[0];
            this.selectindex = 0;
            console.log(this.picImage);
      },
      getStatus(status){
               if(status == 1){
                      return '未处理'
               }else{
                      return '已处理'
               }
      },
      getLevel(level){
           if(level == 0){
                  return '紧急'
           }else if(level == 1){
                  return '一般'
           }else if(level == 2){
                  return '重大'
           }
      },
      getCount(data){
          if(data){
              return data.split(',').length
          }else{
              return 0
          }
      },
    /** 查询巡检点管理列表 */
    getList() {
    //   this.loading = true;
     getincidentList(this.queryParams).then(response =>{
         console.log(response);
               this.documentList = response.rows
               this.total = response.total
     })
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        locationCode: null,
        locationName: null,
        detail: null,
        deviceIds: null,
        areaId: null,
        lnglat: null,
        remark: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {

      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.formObj = {};
      this.dialogVisible = true;
      this.title = "新增公文";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
     this.formObj = row;
     this.title = "修改公文";
     this.dialogVisible = true
    //  console.log(this.$refs.documentDiv.queryParams);
    //   getLocation(id).then(response => {
    //     this.form = response.data;
    //     this.open = true;
    //     this.title = "修改巡检点管理";
    //     this.openMap();
    //   });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
              if(this.$refs.mapv.locations.length > 0){
                  this.form.lnglat = this.$refs.mapv.locations.join(',');
              }
            updateLocation(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
              this.form.lnglat = this.$refs.mapv.locations.join(',');
            addLocation(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 delLocation(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('qdtl/location/export', {
        ...this.queryParams
      }, `location_${new Date().getTime()}.xlsx`)
    },
        tableRowClassName({ row, rowIndex }) {
        if ((rowIndex + 1) % 2 === 0) {
             return "warning-row";
        } else {
             return "success-row";
        }
    },

  }
};
</script>


<style scoped>
 .divtitle{
          background: url("~@/assets/images/title2@2x.png") no-repeat;
          background-size: 100% 100%;
          width:100%;
          height:3.9rem;
          padding-top:0.8rem;
          padding-left:3rem;
          display: inline-flex;
       }
.color_1{
       color: #C5D0D4;
}
.color_0{
    color: #FF7400;
}
.color_2{
    color: #F4002D;
}
.imgSelect{
    background: #041824;
    border: 1px solid rgba(66,255,231,0.46);
    opacity: 0.84;
}
</style>