rightBar.vue

<template>
  <div class="test-5" style="height: 100%;overflow:auto;overflow-x:hidden">
    <!-- 预警信息 -->
    <div>
      <div class="item1" >
        <!--<span class="dot">-->
          <!--<span class="dot-inner"></span>-->
        <!--</span>-->
        <span
          style="letter-spacing: 3px; color: #000000; cursor: pointer"
          >事件接报列表</span
        >
      </div>
      <div style="width: 100%" v-for="item in receiveList">
        <div class="el-form-div title-div">
          <div style="width: 80%;margin-left: 5px;">
            <img v-if="(item.governmentRead==0&&userType==-2)||(item.companyRead==0&&userType!=-2)" style="vertical-align:middle;"  src="@/assets/images/new.png" alt="" />
            事件名称：{{item.eventName}}
          </div>
          <!--<div v-if="item.status==2" style="width: 80%;margin-left: 5px;">待处置<span-->
            <!--v-if="(item.governmentRead==0&&userType==-2)||(item.companyRead==0&&userType!=-2)" class="massage"> (您有新消息)</span>-->
          <!--</div>-->
          <!--<div v-if="item.status==3" style="width: 80%;margin-left: 5px;">已处置<span-->
            <!--v-if="(item.governmentRead==0&&userType==-2)||(item.companyRead==0&&userType!=-2)" class="massage"> (您有新消息)</span>-->
          <!--</div>-->
          <!--<div v-if="item.status==4" style="width: 80%;margin-left: 5px;">已完结</div>-->
          <!--<div style="height:30px;color: red;cursor:pointer;" v-if="userType==-2" @click="handleDelete(item.id)">关闭事件</div>-->
        </div>
        <div class="content-div el-form-div" style="margin-top: 10px;overflow:hidden;">
            <div style="width: 60%; ">事件状态：
              <span style="color: #ff0000" v-if="item.status==1">未指派</span>
              <span style="color: #ff0000" v-if="item.status==2">待处置</span>
              <span style="color: #ff0000" v-if="item.status==3">处理中</span>
              <span v-if="item.status==4">已完结</span>
            </div>
            <div>事件分类：{{item.eventTypeName}}</div>
        </div>
        <div class="content-div el-form-div">
          <div style="width: 60%">发生时间：{{item.inforTime}}</div>
          <div>事件级别：{{item.eventGradeName}}</div>
        </div>
        <div class="content-div">事件地点：{{item.address}}</div>
        <div class="content-div">最新进展：<span v-if="item.handleList!=null">{{item.handleList.management}}</span></div>
        <div class="el-form-div">
          <div v-if="item.status==1 && userType==-2" class="button-div" @click="assignTask(item)">任务指派</div>
          <div v-if="userType==-2" class="button-div" @click="showList(item)" >预案指引</div>
          <div v-if="item.status==3 && userType==-2" class="button-div" @click="endevent(item.id)">事件结案</div>
          <div v-if="userType!=-2" class="button-div" @click="showList(item)">信息处置</div>
          <div  class="button-div" @click="showDetail(item.id,item.eventName)">详情</div>
          <div  class="button-div" style="background: #FA6767;" v-if="userType==-2" @click="handleDelete(item.id)">关闭事件</div>
        </div>
      </div>

      <div id = "detail" class="show-detail" style="display: none;margin-top: 15px;margin-bottom: 20px;position:fixed;right: 470px;width: 300px;
                                                      background: #ffffff;top: 110px;border-right:1px solid #99a9bf">
        <div class="el-form-div detail-back" style="height: 30px;">
            <div class="detail-title" >事件详情</div>
          <div style="cursor: pointer;" @click="closeDetail()">
            <img style="width: 14px;height: 14px;margin-top: 7px;" src="@/assets/mapImages/close.png" alt="" />
          </div>
        </div>
        <timeline :timeline-list="handleList" :nowItem="nowItem"></timeline>
        <div style="height: 40px;">

        </div>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <div class="el-form-div" style="width: 100%;margin-bottom: 20px;overflow-y:hidden;">
        <div style="width: 140px;">
          <div class="el-form-div" >
            <div class="num-div" @click="switchForm(nowItem,$event)">1</div>
            <div v-if="handleList.length>0" class="num-line"></div>
          </div>
          <div class="num-title">
            事件发布
          </div>
          <div class="num-title">
            {{dataTime}}
          </div>
        </div>

        <div v-for="(item,index) in handleList" style="width: 140px;">
          <div class="el-form-div" >
            <div class="num-div" @click="switchForm(item,$event)">{{index+2}}</div>
            <div v-if="index<handleList.length-1" class="num-line"></div>
          </div>
          <div v-if="item.eventType==1" class="num-title">
            处置信息
          </div>
          <div v-if="item.eventType==2" class="num-title">
            预案指引
          </div>
          <div class="num-title">
            {{item.createTime}}
          </div>
        </div>

      </div>
      <el-row  :gutter="10" class="mb8">
        <el-col :span="1.5" v-if="userType!=-2">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
          >新增处置信息</el-button>
        </el-col>
        <el-col :span="1.5" v-if="userType==-2">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleUpdate"
          >新增预案指引</el-button>
        </el-col>
      </el-row>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="事件名称"   v-if="form.eventType==3">
          <el-input v-model="form.eventName"  :readonly="readonly" />
        </el-form-item>
        <el-form-item label="事件分类"   v-if="form.eventType==3">
          <el-input v-model="form.eventTypeName" :readonly="readonly"/>
        </el-form-item>
        <el-form-item label="事件等级"   v-if="form.eventType==3">
          <el-input v-model="form.eventGradeName" :readonly="readonly"/>
        </el-form-item>
        <el-form-item label="发生时间"   v-if="form.eventType==3">
          <el-input v-model="form.inforTime"  :readonly="readonly"/>
        </el-form-item>
        <el-form-item label="发生地点"   v-if="form.eventType==3">
          <el-input v-model="form.address"  :readonly="readonly"/>
        </el-form-item>
        <el-form-item label="处置信息" prop="management"  v-if="form.eventType==1">
          <el-input v-model="form.management" type="textarea"  placeholder="请输入处置信息" />
        </el-form-item>
        <el-form-item label="指导意见" prop="management" v-if="form.eventType==2">
          <el-input v-model="form.management" type="textarea" placeholder="请输入指导意见" />
        </el-form-item>
        <el-form-item label="预案附件" :style="display2" v-if="form.eventType==2">
          <span
            class="dbtn"
            @click="checkFile(form.managementEvent)"
            v-if="form.managementEvent != null && form.managementEvent!=''"
            >
            <i class="el-icon el-icon-view"></i>查看/下载
            </span>
            <span v-else>-</span>
        </el-form-item>
        <el-form-item label="处置信息附件" :style="display2" v-if="form.eventType==1">
          <span
            class="dbtn"
            @click="checkFile(form.managementEvent)"
            v-if="form.managementEvent != null && form.managementEvent!=''"
          >
            <i class="el-icon el-icon-view"></i>查看/下载
            </span>
          <span v-else>-</span>
        </el-form-item>
        <el-form-item label="操作时间" :style="display2">
          <el-input v-model="form.createTime"  :readonly="readonly"/>
        </el-form-item>
        <el-form-item label="应急预案" prop="planId" :style="display" v-if="form.eventType==2">
          <el-select v-model="form.planId" placeholder="请选择预案等级"  @change="fananchange" >
            <el-option
              v-for = "dict in planInfoList"
              :key = "dict.planId"
              :label = "dict.planTitle"
              :value = "dict.planId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="处置附件" prop="managementEvent" :style="display" v-if="form.eventType==1">
          <FileUpload
            listType="picture"
            :fileType="fileType"
            @resFun="getFileInfo"
            @remove="listRemove"
            :fileArr="fileList"
          />
          <el-input v-show="false" disabled v-model="form.managementEvent"></el-input>
          <!--<el-input v-model="form.iconUrl" type="textarea" placeholder="请输入内容" />-->
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer" :style="display">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>

    </el-dialog>
      <!-- 添加或修改事件处置对话框 -->

  </div>
</template>

<script>
  import { mapGetters  } from 'vuex'
  import { listReceive, getReceive, delReceive, addReceive, updateReceive } from "@/api/system/receive";
  import { listHandle, getHandle, delHandle, addHandle, updateHandle, exportHandle } from "@/api/system/handle";
  import { listPlanInfo } from "@/api/system/planInfo";
  import Timeline from "./Timeline";
  import { getUserProfile } from "@/api/system/user";
  import FileUpload from '@/components/FileUpload';
  let uploadfile = require("@/assets/uploadfile.png");
// 当不轮播时候的刷新时间
export default {
   components: {
  //     RightPic,
          FileUpload,
     Timeline
   },
  data() {
    return {
      readonly:true,
      fileType:['png', 'jpg', 'jpeg',"doc", "xls", "ppt", "txt", "pdf"],
      dataTime:"",
      // 是否显示弹出层
      open: false,
      open2: false,
      fileList:[],
      receiveList:[],
      userType:"",
      display:"display:none",
      display2:"",
      //方案列表
      planInfoList:[],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        status:5,
        enterpriseId:""
      },
      detailTitle:"",
      form:'',
      // 遮罩层
      loading: true,
      title:"",
      title2:"",
      // 总条数
      total: 0,
      // 事件处置表格数据
      handleList: [],
      // 查询参数
      queryParams2: {
        pageNum: 1,
        pageSize: 10,
        eventId: null,
      },
      dongtai:[
      ],
      // 表单校验
      rules: {
        management: [
          { required: true, message: "请输入处置信息", trigger: "blur" },
        ],
      },
      eventTypeOptions:[],
      eventGradeOptions:[],
      nowItem:{},
    };
  },
  computed:{
    ...mapGetters([
      "emergencyData"
    ]),
  },
  created(){
    this.getDicts("event_type").then(response => {
      this.eventTypeOptions = response.data;
    });
      this.getDicts("event_grade").then(response => {
        this.eventGradeOptions = response.data;
    });
  },
  mounted() {
    // this.$nextTick(()=>{
    //     this.getScrollHeight();
    // })
    getUserProfile().then(response => {
      this.userType = response.data.deptId;
      if(this.userType!=-2){
        this.queryParams.enterpriseId = response.data.deptId;
      }
      this.getList(1);
    });
    this.socket();
    // //定时检测新消息
    // setInterval(() => {
    //
    // }, 5000);
  },
  watch:{
    emergencyData:{
      handler (val) {
        this.showDetail(val.eventId,val.eventName);
        console.log('深度监听：', val);

      },
      deep: true
    }
  },

  methods: {
    socket() {
      console.log("socket执行");
      this.ws = new WebSocket(
        "ws://222.223.203.154:8902/gassafety/websocketServer"
      );
      this.ws.onopen = (evt) => {
        console.log("WebSockets开启");
      };
      this.ws.onmessage = (evt) => {
        console.log("推送", evt);
        const obj = JSON.parse(evt.data);
        console.log("接受socketobj", obj);
        this.getNow();
      };
      this.ws.onclose = () => {
        console.log("ws协议关闭");
      };
    },
    getNow(){
      var params = this.queryParams;
      if(this.userType==-2){
        params.governmentRead=0
      }else {
        params.companyRead=0
      }
      listReceive(params).then(response => {
            var newList = response.rows;
          newList.forEach((model) => {
              this.receiveList.forEach((item) => {
                  //判断登录账户等级
                  if(item.id == model.id){
                    if(this.userType==-2){
                      item.governmentRead =0;
                      item.status=3;
                    }else {
                      item.companyRead =0;
                    }
                }
              });
        });
    });
    },
    /** 查询事件接报列表 */
    getList(type) {
      listReceive(this.queryParams).then(response => {
        this.receiveList = response.rows;
        if(type==1){
          if(this.$route.query.eventId!=undefined){
            this.showDetail(this.$route.query.eventId,this.$route.query.eventName);
          }
        }
      //
      this.receiveList.forEach((item) => {
        //console.log("ggg"+item.eventGrade, this.eventGradeOptions[item.eventGrade-1].dictLabel)
         item.eventGradeName = this.eventGradeOptions[item.eventGrade-1].dictLabel;
         item.eventTypeName = this.eventTypeOptions[item.eventType-1].dictLabel;
         console.log(item)
      });
        //this.total = response.total;
      //console.log(this.receiveList)
    });
    },
    //获取事件处置列表
    getHandleList() {
      this.loading = true;
      listHandle(this.queryParams2).then(response => {
        this.handleList = response.rows;
        if(this.handleList.length>0){
          this.form = this.handleList[this.handleList.length-1]
        }
        this.total = response.total;
        this.loading = false;
        this.$nextTick(() => {
          this.showlast();
        })

    });
    },
    showlast(){
      if(document.getElementsByClassName("num-div2").length>0){
        document.getElementsByClassName("num-div2")[0].setAttribute("class","num-div")
      }
      document.getElementsByClassName("num-div")[this.handleList.length].setAttribute("class","num-div2")
    },
    showList(item) {
      this.closeDetail();
      item.eventType=3;
      this.nowItem = item;
      this.dataTime = item.createTime;
      this.form = item;
      this.open = true;
      this.title = "事件处置";
      this.queryParams2.eventId= item.id
      // if(this.userType==-2){
      //   this.queryParams2.eventType= 2;
      // }else {
      //   this.queryParams2.eventType= 1;
      // }
      this.getHandleList();
    },
    choice() {
      this.getList();
    },
    getType(row){
      if(row.eventType==1){
        return "处置信息"
      }
      return "预案指引"
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.fileList=[]
      this.form.eventType=1;
      this.display2="display:none";
      this.display="";
      //this.title2 = "添加事件处置";
      this.form.eventId = this.queryParams2.eventId
    },
    /** 新增预案 */
    handleUpdate() {
      this.reset();
      this.display2="display:none";
      this.display="";
      //this.form = row;
      // this.open2 = true;
      // this.title2 = "预案指引";
      this.form.eventId = this.queryParams2.eventId
      this.form.eventType=2;
      this.yuanList();
    },
    yuanList(){
      var params ={pageNum: 1,
          pageSize: 1000};
        listPlanInfo(params).then(response => {
          this.planInfoList = response.rows;
      });
    },
    fananchange(value){
        let obj = {};
        obj = this.planInfoList.find((item)=>{
          return item.planId === value;
        ``});
        this.form.planTitle = obj.planTitle;
        this.form.managementEvent = obj.iconUrl;
        this.form.planId = value;
    },
    // 表单重置
    reset() {
      this.form = {
        handleId: null,
        eventId: null,
        enterpriseId: null,
        enterpriseName: null,
        management: null,
        managementEvent:null,
        planId: null,
        planTitle:'',
        planUrl:'',
        guidanceOpinion: null,
      };
      this.resetForm("form");
    },
    /** 提交按钮 处置信息*/
    submitForm() {
      this.display2="";
      this.display="display:none";
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.handleId != null) {
            updateHandle(this.form).then(response => {
              this.msgSuccess("修改成功");
            this.getHandleList();
          });
          } else {
            addHandle(this.form).then(response => {
              this.msgSuccess("新增成功");
            this.getHandleList();
            this.upReceive(this.form.eventId);
          });
          }
        }
      });
    },
    upReceive(id){
      var receiveform = {id:id}
      if(this.form.eventType==2){
        receiveform.companyRead=0;
      }else {
        receiveform.status=3;
        receiveform.governmentRead=0;
      }
      updateReceive(receiveform).then(response => {
      });
    },
    updateend(id){
      var receiveform = {id:id,status:4}
      updateReceive(receiveform).then(response => {
      });
    },
    // 取消按钮
    cancel() {
      this.display2="";
      this.display="display:none";
      //this.reset();
      this.getHandleList();
    },
    endevent(id){
      var that = this;
      this.$confirm('是否确认事件结案?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return that.updateend(id);
      }).then(() => {
        this.getList();
      this.msgSuccess("处理成功");
    }).catch(() => {});
    },
    /** 删除按钮操作 */
    handleDelete2(row) {
      const handleIds = row.handleId || this.ids;
      this.$confirm('是否确认删除事件处置数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return delHandle(handleIds);
      }).then(() => {
        this.getHandleList();
      this.msgSuccess("删除成功");
    }).catch(() => {});
    },
    /** 删除按钮操作 */
    handleDelete(id) {
      this.$confirm('是否确认取消事件接报数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return delReceive(id);
      }).then(() => {
        this.getList();
      this.msgSuccess("删除成功");
    }).catch(() => {});
    },
    assignTask(item){
      this.$parent.handleUpdate(item);
    },
    async showDetail(id,title){
      //列表信息
      this.receiveList.forEach((item) => {
          if(item.id==id){
            this.nowItem = item;
          }
      });
      //详情
      var that = this;
      that.detailTitle=title;
      that.queryParams2.eventId= id
      that.queryParams2.pageSize=100;
          await listHandle(that.queryParams2).then(response => {
              this.handleList = response.rows;
              // if(response.total==0){
              //   this.msgSuccess("暂无详情");
              // }else{
                document.getElementById("detail").style.display="";
                that.updateRead(id);
              //}
        });
    },
    closeDetail(id,event){
      document.getElementById("detail").style.display="none";
    },
    //更改读取状态
    updateRead(id){
      var receiveform = {id:id}
      if(this.userType==-2){
        receiveform.governmentRead = 1;
      }else {
        receiveform.companyRead = 1;
      }
      updateReceive(receiveform).then(response => {
      });
      this.receiveList.forEach((item) => {
        if(item.id == id){
            if(this.userType==-2){
              item.governmentRead =1;
            }else {
              item.companyRead =1;
            }
        }
      });
    },
    switchForm(item,$event){
      if(document.getElementsByClassName("num-div2")[0]!=undefined){
        document.getElementsByClassName("num-div2")[0].setAttribute("class","num-div")
      }

      $event.target.setAttribute("class","num-div2");
      if(item!=null){
        this.form = item;
      }

    },
    //上传
    getFileInfo(res){
      //this.form.dealPlan = res.fileName;
      this.form.managementEvent = res.url;
      this.fileList.push({
        name: res.fileName,
        url: uploadfile,
      });
    },
    listRemove(e) {
      this.form.managementEvent = "";
      this.fileList = [];
    },
    checkFile(url) {
      window.open(url,'_blank');
    },
  },
};
</script>

<style lang="scss" scoped>
.item1 {
  height: 30px;
  font-size: 15px;
  line-height: 30px;
  font-weight: 700;
  background: url(../../assets/images/chuzhilist.png) repeat-x 50px 10px;
  background-size:360px 7px;
  background-repeat: no-repeat;
  text-align: center;
}
.dot {
  display: inline-block;
  position: relative;
  width: 10px;
  height: 10px;
  background: rgb(30, 185, 190);
  border-radius: 50%;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 2px;
}

.dot-inner {
  background: #44d7dc;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-animation: vabDot 1.2s ease-in-out infinite;
  animation: vabDot 1.2s ease-in-out infinite;
}
  .content-div{
    color: #000000;
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    margin-left: 15px;
  }
.el-form-div{
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  width: 100%;
}
  .button-div{
    cursor:pointer;
    color: #ffffff;
    margin-bottom: 8px;
    border-radius: 2px;
    width: 88px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 14px;
    margin-left: 22px;
    margin-top: 10px;
    background: #4091F7;
  }
  .title-div{
    width: 100%;
    margin-left: 12px;
    height: 30px;
    color: #ffffff;
    line-height: 30px;
    background: url(../../assets/images/yjcz.png);
    background-size:450px 30px;
    background-repeat: no-repeat;
  }
  .detail-back{
    background: url(../../assets/images/yjcz.png);
    background-size:300px 30px;
  }
.test-5::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.test-5::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius   : 10px;
  background-color: #1c84c6;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
.dbtn {
  display: inline-block;
  line-height: normal;
  padding-left: 2px;
  padding-right: 2px;
  cursor: pointer;
  border-radius: 3px;
  border-style: solid;
  border-width: 0;
  color: rgb(48, 180, 107);
}
.detail-title{
  height: 100%;
  width: 270px;
  color: #ffffff;
  margin-top: 3px;
  margin-left: 10px;
}
.massage{
  color: #00ffff;
}
.test-5::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #112238;
  border-radius: 10px;
}
.num-div{
  width: 30px;
  height: 30px;
  border:2px solid #b0b0b0;
  color: #b0b0b0;
  border-radius: 15px;
  text-align: center;
  font-size: 18px;
  line-height: 26px;
  margin-left: 5px;
  cursor:pointer;
}
.num-div2{
  width: 30px;
  height: 30px;
  border:2px solid #000000;
  color: #000000;
  border-radius: 15px;
  text-align: center;
  font-size: 18px;
  line-height: 26px;
  margin-left: 5px;
  cursor:pointer;
}
.num-line{
  margin-left: 5px;
  width: 100px;
  height: 1px;
  border:1px solid #b0b0b0;
  margin-top: 14px;
}
.num-title{
  width: 140px;
  height: 30px;
  line-height: 30px;
}
.show-detail{
  overflow-y: scroll;
  max-height: 800px;
}
.show-detail::-webkit-scrollbar {
  width:0px;
}
::v-deep .el-dialog:not(.is-fullscreen) {
  margin-top: 13vh !important;
  min-height: 500px;
}

</style>