样式修改

shuishen

2021-04-08 a4e06ccd3cd976fbe4eef99e188d42ec9f3ad054

 src/views/distribution/index.vue

@@ -1,151 +1,203 @@
<template>
  <el-form
    :model="form"
    label-position="right"
    size="mini"
    label-width="100px"
    style="background: #fff; margin-left: 10px; margin-right: 10px; height: calc(100% - 40px); width: calc(100% - 20px)"
  >
    <el-row>
      <el-col span="12"
        ><el-form-item label="报警人姓名">
          <el-input
            disabled="true"
            v-model="form.galarmPeople"
            autocomplete="off"
          ></el-input> </el-form-item
      ></el-col>
      <el-col span="12"
        ><el-form-item label="联系方式">
          <el-input
            disabled="true"
            v-model="form.phoneNumber"
            autocomplete="off"
          ></el-input> </el-form-item
      ></el-col>
    </el-row>
    <el-row>
      <el-col span="12"
        ><el-form-item label="事发地址">
          <el-input
            disabled="true"
            v-model="form.place"
            autocomplete="off"
          ></el-input> </el-form-item
      ></el-col>
      <el-col span="12"
        ><el-form-item label="行政区">
          <el-input
            disabled="true"
            v-model="form.addvnm"
            autocomplete="off"
          ></el-input> </el-form-item
      ></el-col>
    </el-row>
    <el-row>
      <el-col span="12"
        ><el-form-item label="报警时间">
          <el-input
            disabled="true"
            v-model="form.galarmTime"
            autocomplete="off"
          ></el-input> </el-form-item
      ></el-col>
      <el-col span="12"
        ><el-form-item label="报警内容">
          <el-input
            disabled="true"
            v-model="form.content"
            autocomplete="off"
          ></el-input> </el-form-item
      ></el-col>
    </el-row>
    <el-row>
      <el-col span="12"
        ><el-form-item label="警情级别">
          <el-input
            disabled="true"
            v-model="form.level"
            autocomplete="off"
          ></el-input> </el-form-item
      ></el-col>
      <el-col span="12"
        ><el-form-item label="警情类别">
          <el-input
            disabled="true"
            v-model="form.waringType"
            autocomplete="off"
          ></el-input> </el-form-item
      ></el-col>
    </el-row>
    <el-row>
      <el-col span="12"
        ><el-form-item label="处理方式">
          <el-radio-group
            @change="processChange"
            v-model="processmode"
            :disabled="this.form.type == 0 ? false : true"
          >
            <el-radio label="派发保安"></el-radio>
            <el-radio label="提示业主"></el-radio>
          </el-radio-group> </el-form-item
      ></el-col>
      <el-col span="12"
        ><el-form-item label="处理人">
          <el-select
            v-model="form.handName"
            @change="selectChange"
            placeholder="请选择处理人"
            :disabled="
              this.form.type == 0
                ? this.form.handletype == 1
                  ? true
                  : false
                : true
            "
          >
            <el-option
              v-for="item in selectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.snumber"
            >
            </el-option>
          </el-select> </el-form-item
      ></el-col>
    </el-row>
    <el-row>
      <el-col span="12"
        ><el-form-item label="是否上报110">
          <el-input
            disabled="true"
            v-model="form.alarmPeople"
            autocomplete="off"
          ></el-input> </el-form-item
      ></el-col>
      <el-col span="12"
        ><el-form-item label="设备编号">
          <el-input
            disabled="true"
            v-model="form.deviceNumber"
            autocomplete="off"
          ></el-input> </el-form-item
      ></el-col>
    </el-row>
    <el-form-item style="text-align: center; margin: 0" class="dispose">
      <el-button
        :style="
          this.form.type == 0
            ? 'background:#66b1ff; border-color:#66b1ff'
            : 'background:#cfcfcf; border-color:#cfcfcf'
  <el-row>
    <el-col :span="12">
      <el-form
        :model="form"
        label-position="right"
        size="mini"
        label-width="100px"
        style="
          background: #fff;
          margin-left: 10px;
          margin-right: 10px;
          height: calc(100% - 40px);
          width: calc(100% - 20px);
        "
        type="primary"
        @click="onSubmit"
      >
        保 存
      </el-button>
    </el-form-item>
  </el-form>
        <el-row>
          <el-col span="12"
            ><el-form-item class="distribution-form-label" label="报警人姓名">
              <el-input
                disabled="true"
                v-model="form.galarmPeople"
                autocomplete="off"
              ></el-input> </el-form-item
          ></el-col>
          <el-col span="12"
            ><el-form-item class="distribution-form-label" label="联系方式">
              <el-input
                disabled="true"
                v-model="form.phoneNumber"
                autocomplete="off"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col span="12"
            ><el-form-item class="distribution-form-label" label="事发地址">
              <el-input
                disabled="true"
                v-model="form.place"
                autocomplete="off"
              ></el-input> </el-form-item
          ></el-col>
          <el-col span="12"
            ><el-form-item class="distribution-form-label" label="要求处置时间">
              <el-input
                disabled="true"
                v-model="form.czTime"
                autocomplete="off"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col span="12"
            ><el-form-item class="distribution-form-label" label="报警时间">
              <el-input
                disabled="true"
                v-model="form.galarmTime"
                autocomplete="off"
              ></el-input> </el-form-item
          ></el-col>
          <el-col span="12"
            ><el-form-item class="distribution-form-label" label="报警内容">
              <el-input
                disabled="true"
                v-model="form.content"
                autocomplete="off"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col span="12"
            ><el-form-item class="distribution-form-label" label="警情级别">
              <el-input
                disabled="true"
                v-model="form.level"
                autocomplete="off"
              ></el-input> </el-form-item
          ></el-col>
          <el-col span="12"
            ><el-form-item class="distribution-form-label" label="警情类别"
              >
              <el-input
                disabled="true"
                v-model="form.$waringType"
                autocomplete="off"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col span="12"
            ><el-form-item class="distribution-form-label" label="处理方式">
              <el-radio-group @change="processChange" v-model="processmode">
                <el-radio
                  class="distribution-form-label"
                  label="派发保安"
                ></el-radio>
                <el-radio
                  class="distribution-form-label"
                  label="提示业主"
                ></el-radio>
              </el-radio-group> </el-form-item
          ></el-col>
          <el-col span="12"
            ><el-form-item class="distribution-form-label" label="处理人">
              <el-select
                style="width: 100%"
                v-model="handName"
                @change="selectChange"
                placeholder="请选择处理人"
                :disabled="this.processmode == '派发保安' ? false : true"
              >
                <el-option
                  v-for="item in selectOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.snumber"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col span="12"
            ><el-form-item class="distribution-form-label" label="是否上报110">
              <el-input
                disabled="true"
                v-model="form.alarmPeople"
                autocomplete="off"
              ></el-input> </el-form-item
          ></el-col>
          <el-col span="12"
            ><el-form-item class="distribution-form-label" label="设备编号">
              <el-input
                disabled="true"
                v-model="form.deviceNumber"
                autocomplete="off"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>

        <el-row>
          <el-col span="12"
            ><el-form-item class="distribution-form-label" label="省份">
              <el-input
                disabled="true"
                v-model="form.$province"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col span="12"
            ><el-form-item class="distribution-form-label" label="地市">
              <el-input
                disabled="true"
                v-model="form.$city"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col span="12"
            ><el-form-item class="distribution-form-label" label="行政区">
              <el-input
                disabled="true"
                v-model="form.$district"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item
          class="distribution-form-save"
          style="text-align: center; margin: 0"
        >
          <el-button
            :style="
              this.form.type == 0
                ? 'background:#66b1ff; border-color:#66b1ff'
                : 'background:#cfcfcf; border-color:#cfcfcf'
            "
            type="primary"
            @click="onSubmit"
          >
            保 存
          </el-button>
        </el-form-item>
      </el-form></el-col
    >
    <el-col :span="12">
      <iframe
        id="DistributionMapDiv"
        ref="DistributionMapDiv"
        :src="baseUrl"
        frameborder="0"
        width="100%"
        height="100%"
      ></iframe>
    </el-col>
  </el-row>
</template>

<script>
@@ -153,20 +205,51 @@
export default {
  data() {
    return {
      handName: '',
      selectOptions: [],
      form: {},
      processmode: "提示业主"
      baseUrl: "",
      processmode: "派发保安",
      ref: this.$refs,
    };
  },
  created() {
    this.form = this.$route.query;
    this.form.handletype = 1;
    this.form.handletype = 0;


    if (this.form.type == 0) {
      this.form.handleP = "";
      this.form.handName = "";
    }
    this.getSelectOptions();

    this.baseUrl = `/map/index.html?ISinit=1&openid=AlertSecurity&id=${this.form.id}&jd=${this.form.jd}&wd=${this.form.wd}`;

    var arr = [];
    var flag = false;

    this.$store.state.tags.tagList.forEach((item) => {
      if (item.label != "警情分发处置") {
        arr.push(item);
      } else if (item.label == "警情分发处置" && flag == false) {
        arr.push(item);
        flag = true;
      }
    });

    this.$store.state.tags.tagList = arr;
  },

  mounted() {
    this.$refs.DistributionMapDiv.onload = () => {
      window.frames[0].init("AlertSecurity", {
        x: this.form.jd,
        y: this.form.wd,
      });
    };
  },

  methods: {
    onSubmit() {
      if (this.form.type == 1 || this.form.type == 2) return;
@@ -179,9 +262,9 @@
      }

      var newAxios = axios.create({
        baseURL: "https://s16s652780.51mypc.cn",
        baseURL: "https://web.byisf.com",
        withCredentials: false,
        headers: {}
        headers: {},
      });

      newAxios
@@ -194,14 +277,14 @@
              handleP: this.form.handleP,
              handName: this.form.handName,
              handletype: this.form.handletype,
              type: "1"
            }
              type: "1",
            },
          }
        )
        .then(res => {
        .then((res) => {
          if (res.data.msg == "修改成功") {
            var arr = [];
            this.$store.state.tags.tagList.forEach(item => {
            this.$store.state.tags.tagList.forEach((item) => {
              if (item.value != this.$store.state.tags.tag.value) {
                arr.push(item);
              }
@@ -214,9 +297,9 @@

    getSelectOptions() {
      var newAxios = axios.create({
        baseURL: "https://s16s652780.51mypc.cn",
        baseURL: "https://web.byisf.com",
        withCredentials: false,
        headers: {}
        headers: {},
      });

      newAxios
@@ -228,57 +311,57 @@
            this.form.wd +
            ")"
        )
        .then(res => {
          res.data.data.forEach(item => {
        .then((res) => {
          res.data.data.forEach((item) => {
            this.selectOptions.push({
              value: item.sname,
              label: item.sname,
              snumber: item.snumber
              snumber: item.snumber,
            });
          });
        });
    },

    selectChange(value) {
      this.selectOptions.forEach(item => {

      this.selectOptions.forEach((item) => {
        if (item.snumber == value) {
          this.form.handName = item.value;
          this.handName = item.value;
          this.form.handleP = value;
        }
      });

    },

    processChange(value) {

      value == "提示业主"
        ? (this.form.handletype = 1)
        : (this.form.handletype = 0);
    }
  }

    },
  },
};
</script>

<style spend="lang">
<style scoped>
.el-form .el-row {
  padding: 0 40px !important;
  padding: 0 20px !important;
}
.el-form .el-col {
  padding: 0 40px !important;
  padding: 0 20px !important;
}
.el-form .el-col,
.el-form .el-col .el-form-item__label,
.el-form .el-col .el-form-item__content {
  height: 50px !important;
  line-height: 50px !important;
  /* margin: 0 !important; */

  margin: 0 !important;
}

.el-form .el-col .el-form-item {
  height: 100% !important;

  margin: 0 !important;
}

.dispose .el-form-item__content {
  margin: 0 !important;
  line-height: 1.2 !important;
}
</style>