index.vue 12.7 KB
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="105px">
      <el-form-item label="预警对象类型" prop="violationObjectType">
        <el-select v-model="queryParams.violationObjectType" placeholder="请选择预警对象类型" clearable size="small">
          <el-option label="工地" value="0" />
          <el-option label="处理场所" value="1" />
          <el-option label="企业" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属区域" prop="owningRegion">
        <el-select v-model="queryParams.owningRegion" multiple placeholder="请选择所属区域" clearable size="small">
          <el-option  v-for="item in areas" :label="item.name" :value="item.name" />
        </el-select>
      </el-form-item>
      <el-form-item label="预警类型" prop="violationType">
        <el-select v-model="queryParams.violationType" placeholder="请选择预警类型" clearable size="small">
          <el-option  v-for="item in caseType" v-if="item.status=='0'" :label="item.dictLabel" :value="item.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="预警对象" prop="projectName">
        <el-input
          v-model="queryParams.projectName"
          placeholder="请输入预警对象"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="日期" prop="createTime">
        <el-date-picker  size="small" v-model="queryParams.createTime" type="datetimerange"
          start-placeholder="开始日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="状态" prop="status1">
        <el-select v-model="queryParams.status1" placeholder="状态" size="small">
            <el-option label="未回复" value="0"/>
            <el-option label="已回复" value="1"/>
            <el-option label="审核中" value="2"/>
            <el-option label="结案存档" value="3"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" 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-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['casefile:violationWarningInformation:add']"

          v-if="checkPer(['taskrun.messagetask.add'])"
        >预警信息录入</el-button>
      </el-col>
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="danger"-->
<!--          icon="el-icon-delete"-->
<!--          size="mini"-->
<!--          :disabled="multiple"-->
<!--          @click="handleDelete"-->
<!--          v-hasPermi="['casefile:violationWarningInformation:remove']"-->
<!--        >删除</el-button>-->
<!--      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['casefile:violationWarningInformation:export']"
        >导出</el-button>
      </el-col>
	  <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="violationWarningInformationList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" type='index'/>
      <el-table-column label="所属区域" align="center" prop="owningRegion" />
      <el-table-column label="预警对象" align="center" prop="projectName" />
      <el-table-column label="预警对象类型" align="center" prop="violationObjectType" >
        <template slot-scope="scope">
          <span>{{scope.row.violationObjectType == 0 ? "工地" :scope.row.violationObjectType == 1 ?"处理场所":"企业"}}</span>
        </template>
      </el-table-column>
      <el-table-column label="预警类型" align="center" prop="violationType">
        <template slot-scope="scope">
          <span>{{getCaseType(scope.row.violationType)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="日期" align="center" prop="createTime"/>
      <el-table-column label="状态" align="center" prop="status1">
        <template slot-scope="scope">
            <span>{{getCaseStatus(scope.row)}}</span>
          </template>
        </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleInfo(scope.row)"
            v-hasPermi="['casefile:violationWarningInformation:view']"
          >详情</el-button>
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-edit"-->
<!--            @click="handleUpdate(scope.row)"-->
<!--            v-hasPermi="['casefile:violationWarningInformation:edit']"-->
<!--          >修改</el-button>-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-delete"-->
<!--            @click="handleDelete(scope.row)"-->
<!--            v-hasPermi="['casefile:violationWarningInformation:remove']"-->
<!--          >删除</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="850px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="115px">
        <el-row :gutter="2">
          <el-col :span="11">
            <el-form-item label="预警编号" prop="number">
              <el-input v-model="form.number" placeholder="请输入预警编号" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="预警对象类型" prop="violationObjectType">
              <el-select v-model="form.violationObjectType" placeholder="请选择预警对象类型" style="width: 100%;">
                <el-option label="工地" value="0" />
                <el-option label="处理场所" value="1" />
                <el-option label="企业" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="2">
          <el-col :span="11">
            <el-form-item label="所属区域" prop="owningRegion">
              <el-select v-model="form.place" placeholder="请输入所属区域" style="width: 100%;">
                <el-option  v-for="item in areas" :label="item.name" :value="item.code" @click.native="selectArea(item)"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="预警类型" prop="violationType">
              <el-select v-model="form.violationType" placeholder="请选择预警类型" style="width: 100%;">
                <el-option v-for="item in caseType"  v-if="item.status=='0'" :label="item.dictLabel" :value="item.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="2">
          <el-col :span="11">
            <el-form-item label="预警等级" prop="violationGrade">
              <el-select v-model="form.violationGrade" placeholder="请选择企业名称" style="width: 100%;">
                <el-option label="一般类" value="一般类"/>
                <el-option label="重点类" value="重点类" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="项目名称" prop="projectName">
              <el-select v-model="form.projectName" :filterable="true"
              :remote-method="projectNameLoadOptions" :loading="isLoading" placeholder="请输入项目名称" style="width: 100%;">
                <el-option v-for="item in projectNameList[form.violationObjectType]"
                :label="item.name" :value="item.name" :title="item.name" @click.native="getAreaName(item.areaCode)"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="2">
          <el-col :span="8" :offset="3">
            <el-button style="margin-left: 14px" type="primary" @click="createDescribe">生成预警描述</el-button>
          </el-col>
          <el-col :span="11">
            <el-form-item label="企业名称" prop="companyName">
              <el-select v-model="form.companyName" :filterable="true"
              :filter-method="getCompanys" :loading="isLoadingCompany" placeholder="请输入项目名称" style="width: 100%;">
                <el-option v-for="item in companyList" :key="item.name" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="预警描述" prop="describe">
              <el-input v-model="form.describe" type="textarea" placeholder="请输入内容" :rows="4"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="推送对象">
          <el-radio-group v-model="form.sendObject">
            <el-radio label="区管理部门">区管理部门</el-radio>
            <el-radio label="运输企业">运输企业</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="附件预览" v-if="slide1.length!=0">
          <el-image v-for="item in slide1"
                    style="width: 150px; height: 100px; margin: 5px;"
                    :src="item"
                    :preview-src-list="slide1"
                    :z-index="2000">
          </el-image>
          <div style="display: inline-block;margin: 5px;position: relative; width: 150px;height: 100px;overflow:hidden;" v-for="item in videoSrc" >
            <video width="100%" controls="controls" height="100%" :src="item"></video>
          </div>
        </el-form-item>
        <el-form-item prop="fileEntityList" label="附件">
          <el-upload
            ref="upload"
            action=""
            accept=".docx,.doc,.pdf,.png,.jpeg,.png,.jpg,.mp4,.avi"
            :on-change="fileChange"
            :auto-upload="false"
            :show-file-list="false"
            multiple
            :file-list="fileEntityList">
            <el-button size="small" type="primary" icon="el-icon-upload">上传附件</el-button>
          </el-upload>
        </el-form-item>
        <el-table :data="fileEntityList">
          <el-table-column property="name" label="附件名称" header-align="center" align="center"></el-table-column>
          <el-table-column label="操作" class-name="small-padding fixed-width" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button
                size="small" type="success"
                icon="el-icon-download"
                @click="downloadFA(scope.row)"
                v-hasPermi="['office:management:edit']"
                v-if="form.id!=null"
                round>下载
              </el-button>
              <el-button
                size="small" type="danger"
                icon="el-icon-delete"
                @click="handleDeleteFile(scope.$index)"
                v-hasPermi="['office:management:remove']"
                round>删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm"
        v-loading.fullscreen.lock="modalLoading">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="openInfo" width="850px" append-to-body :close-on-click-modal="false">
      <violationWarningInformationInfo :idInfo="idInfo" v-if="openInfo" :entryType="0"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script src="@/api/warningInfo">
</script>