图片和视频的新增按钮

fangyuan

2022-12-12 2b6f23b6039be670be04f14fe49442696741a8b5

 src/views/intelligentPatrol/studyJudge/index.vue

@@ -1,14 +1,14 @@
<template>
  <div class="study-judge">
    <div class="study-judge-header">
      <span>您有1111条待审核报警信息,今日立案0条,再学习0条</span>
      <span>您有{{ countData.review }}条待审核报警信息,今日立案{{ countData.register }}条,再学习{{ countData.study }}条</span>
    </div>
    <div class="study-judge-main">
      <!-- sjm:study-judge-main -->
      <div class="sjm-header">
        <div class="sjm-header-left">
          <span class="moni-name">监控点位名称:中华路XX路口 </span>
          <span class="moni-area">中华街道区域</span>
          <span class="moni-name">监控点位名称: {{ currentEvent.name }} </span>
          <span class="moni-area">{{ currentEvent.street }}</span>
          <span>{{ currentEvent.address }}</span>
        </div>
        <div class="sjm-header-right">
          <el-button size="small">实时预览</el-button>
@@ -17,22 +17,10 @@
      </div>
      <div class="sjm-content">
        <div class="sjm-content-left">
          <div class="img-item">
          <div class="img-item" v-for="(item, index) in imageList" :key="item.id">
            <span>报警图片</span>
            <img
              src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__67d4d15bfc501319f8377f2ce37bf441.svg"
              alt="">
            <span>报警时间：2022-09-08 14:23:34</span>
          </div>
          <div class="img-item">
            <img
              src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__67d4d15bfc501319f8377f2ce37bf441.svg"
              alt="">
          </div>
          <div class="img-item">
            <img
              src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__67d4d15bfc501319f8377f2ce37bf441.svg"
              alt="">
            <img :src="item">
            <span v-if="index === 0">报警时间：{{ currentEvent.alarmTime }}</span>
          </div>
        </div>
        <div class="sjm-content-center">
@@ -44,115 +32,132 @@
              <span>报警记录</span>
              <span>乱停乱放违法占道</span>
            </div>
            <el-form ref="currentEvent" label-width="120px" :model="currentEvent" :rules="rules">
            <el-form ref="currentEvent" label-width="120px" :model="eventInfoData" :rules="rules">
              <el-form-item label="事件编号:">
                <span>{{ currentEvent.number }}</span>
                <span>{{ currentEvent.code }}</span>
              </el-form-item>
              <el-form-item label="事件等级:">
                <span>{{ currentEvent.level }}</span>
                <span>{{ currentEvent.grade }}</span>
              </el-form-item>
              <el-form-item label="首次报警时间:">
                <span>{{ currentEvent.firstTime }}</span>
                <span>{{ currentEvent.alarmTime }}</span>
              </el-form-item>
              <el-form-item label="最近报警时间:">
                <span>{{ currentEvent.recentTime }}</span>
                <span>{{ currentEvent.currentAlarmTime }}</span>
              </el-form-item>
              <el-form-item label="持续时间:">
                <span>{{ currentEvent.conntinueTime }}</span>
              </el-form-item>
              <el-form-item label="处理意见:" prop="advice">
                <el-radio-group v-model="currentEvent.advice">
                  <el-radio :label="item.id" v-for="item in adviceList" :key="item.id">{{ item.label }}</el-radio>
              <el-form-item label="关联店铺" prop="store">
                <el-select v-model="eventInfoData.store" clearable @change="selectStoreChange" placeholder="请选择关联店铺">
                  <el-option v-for="store in storeList" :value="store.id" :label="store.storeName" :key="store.id" />
                </el-select>
              </el-form-item>
              <el-form-item v-if="eventInfoData.store" label="店铺得分:">
                <span>{{ selectStoreChange(eventInfoData.store).storeScore }}</span>
              </el-form-item>
              <el-form-item label="处理意见:" prop="state">
                <el-radio-group v-model="eventInfoData.state">
                  <el-radio :label="item.id" v-for="item in stateList" :key="item.id">{{ item.label }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="问题类型:" prop="type">
                <el-input v-model="currentEvent.type" placeholder="请选择问题类型"></el-input>
              <el-form-item label="大类名称:" prop="categoryId">
                <el-select v-model="eventInfoData.categoryId" placeholder="请选择大类名称" @change="categoryChange">
                  <el-option v-for="category in categoryOptions" :key="category.id" :value="category.id" :label="category.name" />
                </el-select>
              </el-form-item>
              <el-form-item label="大类名称:" prop="bigKind">
                <el-input v-model="currentEvent.bigKind" placeholder="请选择大类名称"></el-input>
              </el-form-item>
              <el-form-item label="小类名称:" prop="smallKind">
                <el-input v-model="currentEvent.smallKind" placeholder="请选择小类名称"></el-input>
              <el-form-item label="小类名称:" prop="typeId">
                <el-select v-model="eventInfoData.typeId" placeholder="请选择小类名称">
                  <el-option v-for="type in typeOptions" :key="type.id" :value="type.id" :label="type.name" />
                </el-select>
              </el-form-item>
              <el-form-item label="车牌号:" prop="carNumber">
                <el-input v-model="currentEvent.carNumber" placeholder="请填写车牌号码"></el-input>
                <el-input v-model="eventInfoData.carNumber" placeholder="请填写车牌号码"></el-input>
              </el-form-item>
              <el-form-item label="备注:">
                <el-input type="textarea" :rows="5" v-model="currentEvent.tip"></el-input>
              <el-form-item label="备注:" prop="description">
                <el-input type="textarea" :rows="5" v-model="eventInfoData.description"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button>上一条</el-button>
                <el-button :disabled="currentPage === 1" @click="pageChange('prev')">上一条</el-button>
                <el-button @click.native.prevent="handleConfirm">确认</el-button>
                <el-button>下一条</el-button>
                <el-button @click="pageChange('next')">下一条</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible="isShowDialog" title="调度信息">
      <MyDispatch v-if="isShowDialog" :mytype="1" @getDispatchData="confirmInspection" :isGetData="true" @changeDialog="closeDialog"></MyDispatch>
    </el-dialog>
  </div>
</template>

<script>
import basecase from "@/api/operate/basecase";
import baseInfo from "@/api/baseInfo";
import { getStoreInfoList } from "@/api/operate/storeManagement";
import { FILE_ORIGINAL_URL } from "@/utils";
import { validateCarNum } from "@/utils/validate";
import MyDispatch from '@/components/dispatch';

export default {
  components: { MyDispatch },
  created() {
    this.getInspectionData();
    this.initEventParams();
    basecase.getInspectionCountData()
        .then(res => {
          this.countData = res;
        })
        .catch(err => this.$message.error(err))

    getStoreInfoList({ current: 1, size: 100 })
        .then(({ list }) => {
          this.storeList = list;
        })
        .catch(err => {
          this.$message.error(err)
        })

    baseInfo.getCategoryList()
        .then(res => {
          this.categoryOptions = res;
        })
        .catch(err => this.$message.error(err))

    baseInfo.getTypeList()
        .then(res => {
          this.typeList = res;
        })
        .catch(err => this.$message.error(err))
  },
  data() {
    const validateAdvice = (rule,value,callback)=>{
      if(value){
        callback()
      }else{
        callback(new Error('处理意见不能为空'))
    const validateCarNumber = (rule, value, callback) => {
      if (value) {
        if (validateCarNum(value)) {
          callback();
        } else {
          callback(new Error('请输入正确的车牌号'));
        }
      } else {
        callback();
      }
    }
    const validateType = (rule,value,callback)=>{
      if(value){
        callback()
      }else{
        callback(new Error('问题类型不能为空'))
      }
    }
    const validateBigKind = (rule,value,callback)=>{
      console.log(value)
      if(value){
        callback()
      }else{
        callback(new Error('大类名称不能为空'))
      }
    }
    const validateSmallKind = (rule,value,callback)=>{
      if(value){
        callback()
      }else{
        callback(new Error('小类名称不能为空'))
      }
    }
    const validateCarNumber = (rule,value,callback)=>{
      if(value){
        callback()
      }else{
        callback(new Error('车牌号不能为空'))
      }
    }
    };
    return {
      currentEvent: {
        number: '1233123414141414',
        level: '一般事件',
        firstTime: '2022/09/23 12:00:00',
        recentTime: '2022/09/23/ 12:00:00',
        conntinueTime: '0小时10分钟',
        advice: null,
        type: '',
        bigKind: '',
        smallKind: '',
        carNumber: '',
        tip: ''
      countData: {
        study: 0,
        review: 0,
        register: 0
      },
      adviceList: [
      currentEvent: {},
      stateList: [
        {
          id: 1,
          id: 2,
          label: '上报',
        },
        {
          id: 2,
          id: 6,
          label: '调度',
        },
        {
@@ -164,47 +169,120 @@
          label: '暂不处理',
        },
      ],
      eventInfoData: null,
      rules:{
        advice:[
        state:[
          {
            trigger:'blur',validator:validateAdvice
            required: true, trigger:['blur'], message: '处理意见不能为空'
          },
        ],
        type:[
        categoryId:[
          {
            trigger:'blur',validator:validateType
            required: true, trigger:['blur'], message: '大类名称不能为空'
          }
        ],
        bigKind:[
        typeId:[
          {
            trigger:'blur',validator:validateBigKind
            required: true, trigger:['blur'], message: '小类名称不能为空'
          }
        ],
        smallKind:[
          {
            trigger:'blur',validator:validateSmallKind
          }
        ],
        carNumber:[
          {
            trigger:'blur',validator:validateCarNumber
          }
        ]
      }
        carNumber:[{ trigger:['blur', 'change'], validator: validateCarNumber }]
      },
      imageList: [],
      currentPage: 1,
      categoryOptions: [],
      typeOptions: [],
      storeList: [],
      typeList: [],
      isShowDialog: false
    }
  },
  methods:{
    pageChange(type) {
      if (type === 'next') {
        this.currentPage += 1;
      } else {
        this.currentPage -= 1;
      }
      this.getInspectionData();
    },

    getInspectionData() {
      basecase.getInspectionData({ current: this.currentPage })
          .then(({ records }) => {
            this.currentEvent = records[0];
            if (this.currentEvent?.picData) {
              this.imageList = this.currentEvent.picData.split(',').map(item => `${FILE_ORIGINAL_URL}${item}`);
            }
            if (this.currentEvent?.alarmTime || this.currentEvent?.currentAlarmTime) {
              const { alarmTime, currentAlarmTime } = this.currentEvent;
              const continueAlarmTime = new Date().getTime() -
                  (currentAlarmTime ? new Date(currentAlarmTime).getTime() : new Date(alarmTime).getTime());
              const CONTINUE_DAY = continueAlarmTime / 1000 / 60 / 60 / 24;
              const CONTINUE_HOURS = (CONTINUE_DAY - parseInt(CONTINUE_DAY)) * 24;
              this.currentEvent.conntinueTime = `${parseInt(CONTINUE_DAY)}天${parseInt(CONTINUE_HOURS)}小时`;
            }
          })
          .catch(err => this.$message.error(err))
    },

    // 确认点击事件
    handleConfirm(){
      console.log(this.$refs.currentEvent)
      this.$refs.currentEvent.validate((flag)=>{
        console.log(flag)
        if(flag){
          this.eventInfoData.baseId = this.currentEvent.baseId;

        }else{
          return false
          // 调度
          if (this.eventInfoData.state === 6) {
            this.isShowDialog = true;
          } else {
            this.confirmInspection();
          }
        } else {
          this.$message.warning('请检查必填项');
        }
      })
    },

    initEventParams() {
      this.eventInfoData = {
        baseId: null,
        store: null,
        state: null,
        categoryId: null,
        typeId: null,
        carNumber: null,
        description: null,
        linkShop: 0,
        shopName: null
      }
    },

    categoryChange(id) {
      this.typeOptions = this.typeList.filter(type => type.parentId === id);
    },

    confirmInspection(data) {
      const eventParams = Object.assign({}, this.eventInfoData);
      delete eventParams.store;
      basecase.confirmInspection({ ...eventParams, ...data })
          .then(() => {
            this.$message.success('操作成功');
            this.getInspectionData();
            this.initEventParams();
          })
          .catch(err => this.$message.error(err))
    },

    closeDialog() {
      this.isShowDialog = false;
    },

    selectStoreChange(id) {
      const selectedStore = this.storeList.find(store => store.id === id);
      this.eventInfoData.shopName = selectedStore.id;
      this.eventInfoData.linkShop = 1;
      return selectedStore;
    }
  }
}
@@ -281,7 +359,6 @@

  .el-form {
    ::v-deep .el-form-item {
      // margin-bottom: 10px;
    }

    ::v-deep .el-form-item__label {
@@ -293,4 +370,4 @@
    color: #4b9bb7;
  }
}
</style>
</style>