index.vue 9.64 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" 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" :label="item.dictLabel" :value="item.dictValue" />

          getCaseType
        </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 clearable size="small" style="width: 200px" v-model="queryParams.createTime" type="date"
                        value-format="yyyy-MM-dd" placeholder="开始时间">
        </el-date-picker>
      </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>

    <a  @click="handleInfo(item)" v-for="item in violationWarningInformationList">
        <el-card class="box-card"  style="margin-bottom: 10px;"
            >
           <el-row class="card_row">
             <el-col :span="24" class="card_grid">
              <div class="card_title" style="font-weight: bold;">预警类型:{{getCaseType(item.violationType)}}</div>
             </el-col>
           </el-row>
           <el-row class="card_row" style="margin-top:10px;margin-bottom:10px;">
              <el-col :span="24">
                 <span >项目名称:{{item.projectName}}</span>
              </el-col>
           </el-row>

              <el-row class="card_row">
               <el-col :span="24" class="card_grid" >
             <span >企业名称:{{item.companyName}}</span>
               </el-col>
            </el-row>

           <el-row class="card_row">
             <el-col :span="12">
                <span >预警对象类型:{{item.violationObjectType == 0 ? "工地" :item.violationObjectType == 1 ?"处理场所":"企业"}}</span>
             </el-col>
             <el-col :span="12" class="card_grid" >
               <span >所属区域:{{item.owningRegion}}</span>
             </el-col>
          </el-row>
             <el-row class="card_row">
              <el-col :span="24" class="card_grid" >
               <div>时间:{{item.createTime}}</div>
              </el-col>
           </el-row>
           <span>{{parseStatus(item.status) }}</span>

         </el-card>
    </a>

    <h5Page
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改预警预警信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="300px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

            <el-form-item label="预警编号" prop="number">
              <el-input v-model="form.number" placeholder="请输入预警编号" :disabled="true"/>
            </el-form-item>
            <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-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-form-item label="预警类型" prop="violationType">
                <el-input :value="getCaseType(form.violationType)" :disabled="true"/>
            </el-form-item>

            <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-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" :key="item.name" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>

            <el-button type="primary" @click="createDescribe">生成预警描述</el-button>
            <el-form-item label="企业名称" prop="companyName">
              <el-select v-model="form.companyName" :filterable="true" :remote-method="companyLoadOptions" :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-form-item label="预警描述" prop="describe">
              <el-input v-model="form.describe" type="textarea" placeholder="请输入内容" :rows="4"/>
            </el-form-item>
        <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,.xlsx,.xls,.ppt,.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">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="openInfo" width="300px" append-to-body :close-on-click-modal="false">
      <h5Info :idInfo="idInfo" v-if="openInfo" :entryType="0"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="" :visible.sync="showPic" append-to-body width="400px">
      <img :src="picImage" width="100%" height="400px"/>
    </el-dialog>
  </div>
</template>

<script src="../../../api/warningInfo.js">
<style scope>
  .el-select-dropdown__item{
    width:300px;
  }
</style>