优化

zhanghua

2022-10-20 bb036407bcc0f26a9a0f246aca100d87db2f6e76

优化

 src/components/dispatch/index.vue

@@ -1,421 +1,457 @@
<template>
    <div class="dispatch">
        <el-form ref="form" :model="dispatch" :rules="rules" label-width="120px">
            <!-- 选择距离 -->
            <el-form-item label="距离:" prop="distance">
                <el-radio-group v-model="dispatch.distance">
                    <el-radio :label="1">100m以内</el-radio>
                    <el-radio :label="2">300m以内</el-radio>
                    <el-radio :label="3">500m以内</el-radio>
                    <el-radio :label="4">1km以内</el-radio>
                    <el-radio :label="5">2km以内</el-radio>
                    <el-radio :label="6">3km以内</el-radio>
                </el-radio-group>
            </el-form-item>
            <!-- 选择执法车 -->
            <el-form-item label="选择执法车:" prop="enforcementCar">
                <el-select v-model="dispatch.enforcementCar" placeholder="请选择">
                    <el-option v-for="item in carOptions" :key="item.id" :label="item.carNumber" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <!-- 选择人员 -->
            <div class="form-person">
                <!-- 部门 -->
                <el-form-item label="选择人员:" prop="createUser">
                    <el-select v-model="dispatch.createUser" placeholder="请选择部门" @change="handleTopChange">
                        <el-option v-for="item in departOptions" :key="item.id" :label="item.departName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 中队 -->
                <el-form-item prop="enforcementTeam" class="person-item">
                    <el-select v-model="dispatch.enforcementTeam" placeholder="选择中队"
                        :disabled="squadronOptions.length!==0 && squadronOptions?false:true" @change="handleMidChange">
                        <el-option v-for="item in squadronOptions" :key="item.id" :label="item.departName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop='lawEnforcer' class="person-item">
                    <!-- 人员 -->
                    <el-select v-model="dispatch.lawEnforcer" placeholder="请选择人员"
                        :disabled="personOptions.length !== 0 && personOptions? false:true" @change="handlePerChange">
                        <el-option v-for="item in personOptions" :key="item.id" :label="item.username" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </div>
            <div class="form-footer">
                <!-- 执法人员编号 -->
                <el-form-item label="执法人员编号:" prop="lawEnforcerName">
                    <el-input v-model="dispatch.lawEnforcerName" disabled></el-input>
                </el-form-item>
                <!-- 执法人员联系方式 -->
                <el-form-item label="联系方式:" prop="contactWay">
                    <el-input v-model="dispatch.contactWay" disabled></el-input>
                </el-form-item>
                <el-button type="primary">发送短信</el-button>
            </div>
            <div class="form-time">
                <el-form-item label="派遣意见" prop="dispatchOpinion">
                    <el-input v-model="dispatch.dispatchOpinion" placeholder="请输入派遣意见"></el-input>
                </el-form-item>
                <el-form-item label="处置日期" prop="disposeDate">
                    <el-date-picker v-model="dispatch.disposeDate" type="datetime" placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
            </div>
        </el-form>
        <div class="map">
            <!-- <MyMap></MyMap> -->
        </div>
        <div class="footer">
            <el-button type="primary" @click="handleDispatch">确定</el-button>
            <el-button @click="handleBack">返回</el-button>
        </div>
  <div class="dispatch">
    <el-form ref="form" :model="dispatch" :rules="rules" label-width="120px">
      <!-- 选择距离 -->
      <el-form-item label="距离:" prop="distance">
        <el-radio-group v-model="dispatch.distance">
          <el-radio :label="1">100m以内</el-radio>
          <el-radio :label="2">300m以内</el-radio>
          <el-radio :label="3">500m以内</el-radio>
          <el-radio :label="4">1km以内</el-radio>
          <el-radio :label="5">2km以内</el-radio>
          <el-radio :label="6">3km以内</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 选择执法车 -->
      <el-form-item label="选择执法车:" prop="enforcementCar">
        <el-select v-model="dispatch.enforcementCar" placeholder="请选择">
          <el-option
            v-for="item in carOptions"
            :key="item.id"
            :label="item.carNumber"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 选择人员 -->
      <div class="form-person">
        <!-- 部门 -->
        <el-form-item label="选择人员:" prop="createUser">
          <el-select
            v-model="dispatch.createUser"
            placeholder="请选择部门"
            @change="handleTopChange"
          >
            <el-option
              v-for="item in departOptions"
              :key="item.id"
              :label="item.departName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 中队 -->
        <el-form-item prop="enforcementTeam" class="person-item">
          <el-select
            v-model="dispatch.enforcementTeam"
            placeholder="选择中队"
            :disabled="
              squadronOptions.length !== 0 && squadronOptions ? false : true
            "
            @change="handleMidChange"
          >
            <el-option
              v-for="item in squadronOptions"
              :key="item.id"
              :label="item.departName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="lawEnforcer" class="person-item">
          <!-- 人员 -->
          <el-select
            v-model="dispatch.lawEnforcer"
            placeholder="请选择人员"
            :disabled="
              personOptions.length !== 0 && personOptions ? false : true
            "
            @change="handlePerChange"
          >
            <el-option
              v-for="item in personOptions"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="form-footer">
        <!-- 执法人员编号 -->
        <el-form-item label="执法人员编号:" prop="lawEnforcerName">
          <el-input v-model="dispatch.lawEnforcerName" disabled></el-input>
        </el-form-item>
        <!-- 执法人员联系方式 -->
        <el-form-item label="联系方式:" prop="contactWay">
          <el-input v-model="dispatch.contactWay" disabled></el-input>
        </el-form-item>
        <el-button type="primary">发送短信</el-button>
      </div>
      <div class="form-time">
        <el-form-item label="派遣意见" prop="dispatchOpinion">
          <el-input
            v-model="dispatch.dispatchOpinion"
            placeholder="请输入派遣意见"
          ></el-input>
        </el-form-item>
        <el-form-item label="处置日期" prop="disposeDate">
          <el-date-picker
            v-model="dispatch.disposeDate"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
      </div>
    </el-form>
    <div class="map">
      <!-- <MyMap></MyMap> -->
    </div>
    <div class="footer">
      <el-button type="primary" @click="handleDispatch">确定</el-button>
      <el-button @click="handleBack">返回</el-button>
    </div>
  </div>
</template>
<script>
import MyMap from '@/components/map'
import {parseTime } from '@/utils/index'
import MyMap from "@/components/map";
import { parseTime } from "@/utils/index";
export default {
    components: {
        MyMap
  components: {
    MyMap,
  },
  props: ["id", "changeDialog", "refresh", "mytype"],
  created() {
    // 判断车辆类型
    this.mytype === 1 ? this.getLawCarList() : this.getSoilCarList();
    this.getDepartList();
  },
  data() {
    const checkPhone = (rule, value, callback) => {
      if (value) {
        const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/;
        if (!rep.test(value)) {
          callback("请输入正确的手机号码");
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    const checkOpinion = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        callback(new Error("派遣意见不能为空"));
      }
    };
    const checkDistance = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        callback(new Error("距离不能为空"));
      }
    };
    const checkTeam = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        callback(new Error("处置日期不能为空"));
      }
    };
    const checkPerson = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        callback();
      }
    };
    const checkNumber = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        callback();
      }
    };
    const checkDepart = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        callback(new Error("请选择部门"));
      }
    };
    return {
      dispatch: {
        baseCaseId: 0, //案件id
        contactWay: "", //联系方式
        dispatchOpinion: "", //处置意见
        disposeDate: "", //处置日期
        distance: 0, //距离
        enforcementCar: "", //执法车
        enforcementTeam: "", //执法中队
        lawEnforcer: "", //执法人员
        lawEnforcerName: "", //执法编号,
        createUser: null,
      },
      rules: {
        createUser: [
          {
            required: true,
            trigger: "change",
            validator: checkDepart,
          },
        ],
        contactWay: [
          {
            required: false,
            trigger: "blur",
            validator: checkPhone,
          },
        ],
        dispatchOpinion: [
          { required: true, trigger: "change", validator: checkOpinion },
        ],
        // distance: [
        //   { required: true, trigger: "change", validator: checkDistance },
        // ],
        // enforcementTeam: [
        //     { required: true, trigger: 'change', validator: checkTeam }
        // ],
        lawEnforcer: [
          { required: true, trigger: "change", validator: checkPerson },
        ],
        lawEnforcerName: [
          { required: false, trigger: "change", validator: checkNumber },
        ],
        disposeDate: [
          {
            required: true,
            trigger: "false",
            validator: checkTeam,
          },
        ],
      },
      carOptions: [
        {
          label: "车辆一",
          value: 1,
        },
        {
          label: "车辆二",
          value: 2,
        },
      ],
      departOptions: [],
      carOptions: [
        {
          label: "车辆一",
          value: 1,
        },
        {
          label: "车辆二",
          value: 2,
        },
      ],
      squadronOptions: [],
      personOptions: [],
    };
  },
  methods: {
    // 执行调度
    handleDispatch() {
      console.log(this.dispatch);
      this.$refs.form.validate((valid) => {
        console.log(valid);
        if (valid) {
          const { dispatch, id } = this;
          // dispatch.disposeDate = new Date();
          console.log(id);
          dispatch.baseCaseId = id;
          console.log(dispatch);
          this.$axios({
            method: "post",
            url: `sccg/dispatch_handle/dispatch`,
            data: dispatch,
          }).then((res) => {
            this.$message({
              type: res.code === 200 ? "success" : "error",
              message: res.code === 200 ? "调度成功" : res.message,
            });
            this.$emit("changeDialog", { flag: false });
            this.refresh();
          });
        } else {
          return false;
        }
      });
    },
    props: ['id', 'changeDialog', 'refresh', 'mytype'],
    created() {
        // 判断车辆类型
        this.mytype === 1 ? this.getLawCarList() : this.getSoilCarList();
        this.getDepartList();
    // 取消调度
    handleBack() {
      this.$emit("changeDialog", { flag: false });
    },
    data() {
        const checkPhone = (rule, value, callback) => {
            if (value) {
                const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/
                if (!rep.test(value)) {
                    callback("请输入正确的手机号码");
                } else {
                    callback();
                }
            } else {
                callback()
            }
        }
        const checkOpinion = (rule, value, callback) => {
            if (value) {
                callback();
            } else {
                callback(new Error('派遣意见不能为空'))
            }
        }
        const checkDistance = (rule, value, callback) => {
            if (value) {
                callback();
            } else {
                callback(new Error('距离不能为空'))
            }
        }
        const checkTeam = (rule, value, callback) => {
            if (value) {
                callback();
            } else {
                callback(new Error('处置日期不能为空'))
            }
        }
        const checkPerson = (rule, value, callback) => {
            if (value) {
                callback();
            } else {
                callback()
            }
        }
        const checkNumber = (rule, value, callback) => {
            if (value) {
                callback();
            } else {
                callback()
            }
        }
        const checkDepart = (rule, value, callback) => {
            if (value) {
                callback();
            } else {
                callback(new Error('请选择部门'))
            }
        }
        return {
            dispatch: {
                baseCaseId: 0,//案件id
                contactWay: "",//联系方式
                dispatchOpinion: "",//处置意见
                disposeDate: "",//处置日期
                distance: 0,//距离
                enforcementCar: '',//执法车
                enforcementTeam: "",//执法中队
                lawEnforcer: '',//执法人员
                lawEnforcerName: "",//执法编号,
                createUser: null,
            },
            rules: {
                createUser: [
                    {
                        required: true, trigger: 'change', validator: checkDepart
                    }
                ],
                contactWay: [
                    {
                        required: false, trigger: 'blur', validator: checkPhone
                    }
                ],
                dispatchOpinion: [
                    { required: true, trigger: 'change', validator: checkOpinion }
                ],
                distance: [
                    { required: true, trigger: 'change', validator: checkDistance }
                ],
                // enforcementTeam: [
                //     { required: true, trigger: 'change', validator: checkTeam }
                // ],
                lawEnforcer: [
                    { required: true, trigger: 'change', validator: checkPerson }
                ],
                lawEnforcerName: [
                    { required: false, trigger: 'change', validator: checkNumber }
                ],
                disposeDate: [
                    {
                        required: true, trigger: 'false', validator: checkTeam
                    }
                ]
            },
            carOptions: [
                {
                    label: '车辆一',
                    value: 1,
                },
                {
                    label: '车辆二',
                    value: 2,
                },
            ],
            departOptions: [
            ],
            carOptions: [
                {
                    label: '车辆一',
                    value: 1,
                },
                {
                    label: '车辆二',
                    value: 2,
                },
            ],
            squadronOptions: [
            ],
            personOptions: [

            ],
        }
    // 获取执法车辆
    getLawCarList() {
      this.$axios({
        method: "get",
        url: `sccg/car_Manage/query_enforce?current=1&size=1000`,
      }).then((res) => {
        this.carOptions = res.data.records;
        console.log(res, this.carOptions);
      });
    },
    methods: {
        // 执行调度
        handleDispatch() {
            console.log(this.dispatch);
            this.$refs.form.validate((valid) => {
                console.log(valid);
                if (valid) {
                    const { dispatch, id } = this;
                    dispatch.disposeDate = new Date();
                    console.log(id);
                    dispatch.baseCaseId = id;
                    console.log(dispatch);
                    this.$axios({
                        method: 'post',
                        url: `sccg/dispatch_handle/dispatch`,
                        data: {
                            ...dispatch,
                            disposeDate:parseTime(dispatch.disposeDate)
                        }
                    })
                        .then(res => {
                            this.$message({
                                type: res.code === 200 ? 'success' : 'error',
                                message: res.code === 200 ? '调度成功' : res.message,
                            })
                            this.$emit('changeDialog', { flag: false });
                            this.refresh();
                        })
                } else {
                    return false;
                }
            })
        },
        // 取消调度
        handleBack() {
            this.$emit('changeDialog', { flag: false })
        },
        // 获取执法车辆
        getLawCarList() {
            this.$axios({
                method: 'get',
                url: `sccg/car_Manage/query_enforce?current=1&size=1000`
            })
                .then(res => {
                    this.carOptions = res.data.records;
                    console.log(res, this.carOptions);
                })
        },
        // 获取渣土车辆
        getSoilCarList() {
            this.$axios({
                method: 'get',
                url: `sccg/car_Manage/query_slag?current=1&size=1000`
            })
                .then(res => {
                    this.carOptions = res.data.records;
                    console.log(res);
                })
        },
        // 获取顶级部门
        getDepartList() {
            this.$axios({
                method: 'get',
                url: `sccg/depart/query_father`,
            })
                .then(res => {
                    this.departOptions = res.data;
                })
        },
        // 获取中队
        async getTeamList(id) {
            console.log(id);
            await this.$axios({
                method: 'get',
                url: `sccg/depart/query_father_children?fatherId=${id}`
            })
                .then(res => {
                    this.squadronOptions = res.data;
                })
                .catch(err => {
                    console.log(err);
                })
        },
        // 获取部门下的用户
        async getDepartUserList(id) {
            console.log(id);
            await this.$axios({
                method: 'get',
                url: `sccg/admin/getDepartUser/${id}`,
            })
                .then(res => {
                    console.log(res);
                    if (res.code === 200) {
                        this.personOptions = res.data;
                    } else {
                        this.personOptions = [];
                    }
                    if(this.personOptions.length === 0){
                        this.$message({
                            type: 'warning',
                            message: '该中队下没有人员'
                        })
                    }
                })
                .catch(err => {
                    this.$message({
                        type: 'error',
                        message: '该部门人员不足，请换个部门'
                    })
                })
        },
        // 部门更改
        async handleTopChange(id) {
            this.dispatch.lawEnforcer = '';
            this.dispatch.enforcementTeam = '';
            this.dispatch.contactWay = '';
            this.dispatch.lawEnforcerName = '';
            await this.getTeamList(id);
            // if (this.squadronOptions.length === 0) {
            //     await this.getDepartUserList(id);
            // }
        },
        // 中队更改
        async handleMidChange(id) {
            this.dispatch.lawEnforcer = '';
            this.dispatch.contactWay = '';
            this.dispatch.lawEnforcerName = '';
            await this.getDepartUserList(id);
        },
        // 人员更改
        async handlePerChange(id) {
            let obj = await this.getLawUser(id);
            this.dispatch.lawEnforcerName = obj.nickName;
            this.dispatch.contactWay = obj.mobile;
        },
        // 获取执法人员信息
        async getLawUser(id) {
            let obj = {}
            await this.$axios({
                method: 'get',
                url: `sccg/admin/${id}`
            })
                .then(res => {
                    obj = res.data;
                })
            return obj;
        }
    // 获取渣土车辆
    getSoilCarList() {
      this.$axios({
        method: "get",
        url: `sccg/car_Manage/query_slag?current=1&size=1000`,
      }).then((res) => {
        this.carOptions = res.data.records;
        console.log(res);
      });
    },
    watch: {
        'squadronOptions.length': {
            handler(newval, oldval) {
                console.log(newval);
                if (newval === 0) {
                    console.log(1);
                    this.$message({
                        type: 'warning',
                        message: '该部门下没有中队'
                    })
                }
            },
            deep: true
        },
    }
}
    // 获取顶级部门
    getDepartList() {
      this.$axios({
        method: "get",
        url: `sccg/depart/query_father`,
      }).then((res) => {
        this.departOptions = res.data;
      });
    },
    // 获取中队
    async getTeamList(id) {
      console.log(id);
      await this.$axios({
        method: "get",
        url: `sccg/depart/query_father_children?fatherId=${id}`,
      })
        .then((res) => {
          this.squadronOptions = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取部门下的用户
    async getDepartUserList(id) {
      console.log(id);
      await this.$axios({
        method: "get",
        url: `sccg/admin/getDepartUser/${id}`,
      })
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.personOptions = res.data;
          } else {
            this.personOptions = [];
          }
          if (this.personOptions.length === 0) {
            this.$message({
              type: "warning",
              message: "该中队下没有人员",
            });
          }
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: "该部门人员不足，请换个部门",
          });
        });
    },
    // 部门更改
    async handleTopChange(id) {
      this.dispatch.lawEnforcer = "";
      this.dispatch.enforcementTeam = "";
      this.dispatch.contactWay = "";
      this.dispatch.lawEnforcerName = "";
      await this.getTeamList(id);
      // if (this.squadronOptions.length === 0) {
      //     await this.getDepartUserList(id);
      // }
    },
    // 中队更改
    async handleMidChange(id) {
      this.dispatch.lawEnforcer = "";
      this.dispatch.contactWay = "";
      this.dispatch.lawEnforcerName = "";
      await this.getDepartUserList(id);
    },
    // 人员更改
    async handlePerChange(id) {
      let obj = await this.getLawUser(id);
      this.dispatch.lawEnforcerName = obj.nickName;
      this.dispatch.contactWay = obj.mobile;
    },
    // 获取执法人员信息
    async getLawUser(id) {
      let obj = {};
      await this.$axios({
        method: "get",
        url: `sccg/admin/${id}`,
      }).then((res) => {
        obj = res.data;
      });
      return obj;
    },
  },
  watch: {
    "squadronOptions.length": {
      handler(newval, oldval) {
        console.log(newval);
        if (newval === 0) {
          console.log(1);
          this.$message({
            type: "warning",
            message: "该部门下没有中队",
          });
        }
      },
      deep: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.dispatch {
    padding: 50px 20px 10px;
  padding: 50px 20px 10px;

    .form-person {
        display: flex;
  .form-person {
    display: flex;

        .person-item {
            margin-left: -100px;
        }
    .person-item {
      margin-left: -100px;
    }
  }

    .form-footer {
        display: flex;
        align-items: center;
        line-height: 40px;
  .form-footer {
    display: flex;
    align-items: center;
    line-height: 40px;

        .el-button {
            margin-bottom: 22px;
            margin-left: 40px;
        }
    .el-button {
      margin-bottom: 22px;
      margin-left: 40px;
    }
  }

    .map {
        height: 388px;
        width: 100%;
    }
  .map {
    height: 388px;
    width: 100%;
  }

    .footer {
        display: flex;
        justify-content: flex-end;
        padding: 10px 20px;
    }
  .footer {
    display: flex;
    justify-content: flex-end;
    padding: 10px 20px;
  }
}
</style>

 src/components/process/index.vue

@@ -1,165 +1,227 @@
<template>
    <div class="my-process">
        <div class="my-pro-header">
            <div class="pro-step" v-for="(item,index) in list" :key="item.name">
                <div class="pro-step-top">
                    <div
                        :class="['circle',active === index ? 'in-process__circle' : active > index ? 'finish' : 'wait' ]">
                    </div>
                    <div :class="['line',active> index ? 'finish-line' :'']"
                        v-if="index<list.length-1 ? true:false"></div>
                </div>
                <div
                    :class="['pro-step-name',active === index ? 'in-process' : active > index ? 'finish-name' : 'wait' ]">
                    {{item.name}}</div>
            </div>
  <div class="my-process">
    <div class="my-pro-header">
      <div class="pro-step" v-for="(item, index) in list" :key="item.name">
        <div class="pro-step-top">
          <div
            :class="[
              'circle',
              active === index
                ? 'in-process__circle'
                : active > index
                ? 'finish'
                : 'wait',
            ]"
          ></div>
          <div
            :class="['line', active > index ? 'finish-line' : '']"
            v-if="index < list.length - 1 ? true : false"
          ></div>
        </div>
        <div class="my-pro-main">
            <div class="pro-step-ver" v-for="(item,index) in list" :key="item.title">
                <div
                    :class="['pro-step-name',active === index ? 'in-process' : active > index ? 'finish-name' : 'wait' ]">
                    {{item.name}}</div>
                <div class="pro-step-top">
                    <div
                        :class="['circle',active === index ? 'in-process__circle' : active > index ? 'finish' : 'wait' ]">
                    </div>
                    <div :class="['line',active > index ? 'finish-line' :'']"
                        v-if="index<list.length-1 ? true:false"></div>
                </div>
                <div :class="['desc',active === index ? 'in-process' : active > index ? 'finish-name' : 'wait' ]"> 
                    <div class="desc-title">环节用时:{{item.disposeRecords.length !==0 ? item.disposeRecords[0].linkTime : ''}}</div>
                    <div class="desc-content" v-if="active > index">
                        <div class="desc-content-message">1111111</div>
                        <div class="desc-content-endtime">{{item.disposeRecords.length !==0 ? filterTime(item.disposeRecords[0].endTime):''}}</div>
                    </div>
                </div>
            </div>
        <div
          :class="[
            'pro-step-name',
            active === index
              ? 'in-process'
              : active > index
              ? 'finish-name'
              : 'wait',
          ]"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="my-pro-main">
      <div class="pro-step-ver" v-for="(item, index) in list" :key="item.title">
        <div
          :class="[
            'pro-step-name',
            active === index
              ? 'in-process'
              : active > index
              ? 'finish-name'
              : 'wait',
          ]"
        >
          {{ item.name }}
        </div>
        <div class="pro-step-top">
          <div
            :class="[
              'circle',
              active === index
                ? 'in-process__circle'
                : active > index
                ? 'finish'
                : 'wait',
            ]"
          ></div>
          <div
            :class="['line', active > index ? 'finish-line' : '']"
            v-if="index < list.length - 1 ? true : false"
          ></div>
        </div>
        <div
          :class="[
            'desc',
            active === index
              ? 'in-process'
              : active > index
              ? 'finish-name'
              : 'wait',
          ]"
        >
          <div class="desc-title">
            环节用时:{{
              item.disposeRecords.length !== 0
                ? item.disposeRecords[0].linkTime
                : ""
            }}
          </div>
          <div class="desc-content" v-if="active > index">
            <div class="desc-content-message">
              {{ item.disposeRecords[0].result || "" }}
            </div>
            <div class="desc-content-endtime">
              {{
                item.disposeRecords.length !== 0
                  ? filterTime(item.disposeRecords[0].endTime)
                  : ""
              }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import helper from '@/utils/mydate'
import helper from "@/utils/mydate";
export default {
    data() {
        return {
            active: 0,
            list: [
            ],
        }
    },
    props:['handlePassVo','baseCase'],
    created(){
        const {handlePassVo:{workflowConfigSteps:mylist},baseCase:{state:mystate}} = this;
        // console.log(this.handlePassVo.workflowConfigSteps[0].name); 
        // console.log(mylist);
        console.log(mystate);
        if(mystate ===6){
            this.active = 1;
        }else if(mystate===7){
            this.active = 2;
        }else if(mystate ===8){
            this.active = 3;
        }else if(mystate ===9){
            this.active = 4;
        }else{
            this.active = -1;
        }
        this.list =  mylist;
    },
    methods:{
        filterTime(time){
            if(time){
                return helper(time)
            }
            return;
        }
  data() {
    return {
      active: 0,
      list: [],
    };
  },
  props: ["handlePassVo", "baseCase"],
  created() {
    const {
      handlePassVo: { workflowConfigSteps: mylist },
      baseCase: { state: mystate },
    } = this;
    // console.log(this.handlePassVo.workflowConfigSteps[0].name);
    // console.log(mylist);
    console.log(mystate);
    if (mystate === 6) {
      this.active = 1;
    } else if (mystate === 7) {
      this.active = 2;
    } else if (mystate === 8) {
      this.active = 3;
    } else if (mystate === 9) {
      this.active = 4;
    } else {
      this.active = -1;
    }
}
    this.list = mylist;
  },
  methods: {
    filterTime(time) {
      if (time) {
        return helper(time);
      }
      return;
    },
  },
};
</script>
<style lang="scss" scoped>
.my-process {
    padding-top: 50px;
    .my-pro-header {
  padding-top: 50px;
  .my-pro-header {
    display: flex;

    .pro-step {
      flex: 1;

      .pro-step-top {
        display: flex;
        align-items: center;

        .pro-step {
            flex: 1;

            .pro-step-top {
                display: flex;
                align-items: center;

                .line {
                    flex: 1;
                    height: 2px;
                }
            }

            .pro-step-name {
                line-height: 20px;
            }
        .line {
          flex: 1;
          height: 2px;
        }
    }
      }

    .my-pro-main {
        margin-top: 30px;
        margin-left: -50px;
        .pro-step-ver {
            display: flex;
            align-items: flex-start;
            .line {
                width: 2px;
                height: 100px;
            }
        }
        .pro-step-top{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .pro-step-name {
            width: 120px;
            line-height: 24px;
            margin-right: 10px;
            text-align: right;
        }
        .desc{
            flex: 1;
            line-height: 24px;
            margin-left: 10px;
            // color: #4b9bb7;
            .desc-content-endtime{
                display: flex;
                justify-content: flex-end;
            }
        }
      .pro-step-name {
        line-height: 20px;
      }
    }
  }

    .circle {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #fff;
        border: 2px solid #808080;
  .my-pro-main {
    margin-top: 30px;
    margin-left: -50px;
    .pro-step-ver {
      display: flex;
      align-items: flex-start;
      .line {
        width: 2px;
        height: 100px;
      }
    }
    .pro-step-top {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .pro-step-name {
      width: 120px;
      line-height: 24px;
      margin-right: 10px;
      text-align: right;
    }
    .desc {
      flex: 1;
      line-height: 24px;
      margin-left: 10px;
      // color: #4b9bb7;
      .desc-content-endtime {
        display: flex;
        justify-content: flex-end;
        padding-right: 50px;
      }
    }
  }

    .line {
        background-color: #c0c4cc;
    }
    .in-process{
        color: #0079fe;
    }
    .in-process__circle{
        border: 2px solid #0079fe;
    }
    .finish-line {
        background-color: #0079fe;
    }
    .finish{
        border: 2px solid #4b9bb7;
    }
    .finish-name{
        color: #4b9bb7;
    }
  .circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #808080;
  }

  .line {
    background-color: #c0c4cc;
  }
  .in-process {
    color: #0079fe;
  }
  .in-process__circle {
    border: 2px solid #0079fe;
  }
  .finish-line {
    background-color: #0079fe;
  }
  .finish {
    border: 2px solid #4b9bb7;
  }
  .finish-name {
    color: #4b9bb7;
  }
}
</style>

 src/views/operate/baseSetting/illegalBuild/createUser/index.vue

@@ -29,9 +29,9 @@
                        </el-select>
                    </el-form-item>
                    <!-- 案由 -->
                    <el-form-item class="optionItem" label="案由:" prop="type">
                    <!-- <el-form-item class="optionItem" label="案由:" prop="type">
                        <el-input type="textarea" :rows="2"  v-model="things.type" placeholder="请输入案由描述内容" :disabled="things.level!==2"></el-input>
                    </el-form-item>
                    </el-form-item> -->
                    <el-form-item>
                        <div class="optionBtn">
                            <el-button type="primary" class="btn submit" @click.native.prevent="handleSubmit">确认

 src/views/operate/baseSetting/illegalBuild/index.vue

@@ -30,11 +30,11 @@
                    @selection-change="tableChange">
                    <el-table-column type="selection" min-width="5">
                    </el-table-column>
                    <el-table-column prop="number" label="编号" min-width="10">
                    <el-table-column prop="number" label="编号" min-width="5">
                    </el-table-column>
                    <el-table-column prop="typeFirst" label="所属类型" min-width="10">
                    </el-table-column>
                    <el-table-column prop="type" label="所属类别" min-width="10">
                    <el-table-column prop="type" label="所属类别" min-width="20">
                    </el-table-column>
                    <el-table-column prop="operation" label="操作" min-width="10">
                        <template slot-scope="scope">

 src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/arrive/index.vue

@@ -172,6 +172,7 @@
        img {
            width: 60px;
            height: 60px;
            margin-right: 10px;
        }
        .img{
            height: 60px;

 src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/book/index.vue

@@ -78,7 +78,7 @@
                        </div>
                        <div class="upload" v-if="book.originalPic.length<4">
                            <el-upload :file-list="fileList" class="upload-demo"
                                action="http:///sccg/file/medias" multiple :show-file-list="false"
                                action="/sccg/file/medias" multiple :show-file-list="false"
                                :limit="4" :on-success="handleSuccess2" :headers="getToken()">
                                <i class="el-icon-plus"></i>
                            </el-upload>
@@ -97,7 +97,7 @@
                        </div>
                        <div class="upload" v-if="book.rectifiedPic.length<4">
                            <el-upload :file-list="fileList" class="upload-demo"
                                action="http:///sccg/file/medias" multiple :show-file-list="false"
                                action="/sccg/file/medias" multiple :show-file-list="false"
                                :limit="4" :on-success="handleSuccess3" :headers="getToken()">
                                <i class="el-icon-plus"></i>
                            </el-upload>
@@ -116,7 +116,7 @@
                        </div>
                        <div class="upload" v-if="book.otherPic.length<4">
                            <el-upload :file-list="fileList" class="upload-demo"
                                action="http:///sccg/file/medias" multiple :show-file-list="false"
                                action="/sccg/file/medias" multiple :show-file-list="false"
                                :limit="4" :on-success="handleSuccess4" :headers="getToken()">
                                <i class="el-icon-plus"></i>
                            </el-upload>
@@ -428,6 +428,7 @@
        .img {
            height: 60px;
            position: relative;
            margin-right: 10px;
        }

        .myicon {

 src/views/operate/disposal/casepool/pool/createUser/ill/index.vue

@@ -508,7 +508,7 @@
            
            .upload-demo {
                position: relative;

                margin-right: 20px;
                .text {
                    position: absolute;
                    top: 22%;