前端初版

zengh

2021-01-27 f1ce9ebcc2203f79446f55ca1ef22fc78ddcf3fe

 src/views/realTimePolice/real.vue

@@ -11,6 +11,7 @@
               @row-update="rowUpdate"
               @row-save="rowSave"
               :before-open="beforeOpen"
               :row-style="rowStyle"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
@@ -29,26 +30,33 @@
      </template>

      <template slot="menuRight">
      <el-button size="small"
                 type="primary"
                 icon="el-icon-search"
                 @click="getBZdata">本周
      </el-button>
      <el-button size="small"
                 type="primary"
                 icon="el-icon-search"
                 @click="getBYdata">本月
      </el-button>
      <el-button size="small"
                 type="primary"
                 icon="el-icon-search"
                 @click="getQBdata">全部
      </el-button>
        <el-button size="small"
                   type="primary"
                   icon="el-icon-search"
                   @click="getBZdata">本周
        </el-button>
        <el-button size="small"
                   type="primary"
                   icon="el-icon-search"
                   @click="getBYdata">本月
        </el-button>
        <el-button size="small"
                   type="primary"
                   icon="el-icon-search"
                   @click="getQBdata">全部
        </el-button>
      </template>

      <template slot-scope="{row}" slot="jtype">
        <el-tag>{{row.jtype=='0'?'否':row.jtype=='1'?'是':'无'}}</el-tag>
      </template>

      <template slot-scope="{type,size,row}" slot="menu">
        <el-button icon="el-icon-check" :size="size" :type="type" @click.stop="handleStart(row)">历史</el-button>
        <el-button icon="el-icon-check" :size="size" :type="type">视频</el-button>
        <el-button icon="el-icon-check" :size="size" :type="type">处置</el-button>
      </template>

    </avue-crud>
  </basic-container>
</template>
@@ -56,13 +64,14 @@
<script>
  import {getList, remove, update, add, getclient} from "@/api/real/real";
  import {mapGetters} from "vuex";
  import {flowCategory, flowRoute} from "@/util/flow";

  export default {
    data() {
      return {
        form: {},
        query: {},
        dateTime:[],
        dateTime: [],
        loading: true,
        page: {
          pageSize: 10,
@@ -140,6 +149,8 @@
              prop: "place",
            }, {
              label: "设备编号",
              search: true,
              searchSpan: 3,
              prop: "deviceNumber",
            }, {
              label: "是否生成警单",
@@ -161,11 +172,11 @@
                }
              ],
            }, {
              label: '省份',
              label: '行政区',
              prop: 'province',
              search: true,
              searchSpan: 3,
              searchLabelWidth: 50,
              searchLabelWidth: 60,
              type: 'select',
              props: {
                label: 'name',
@@ -173,31 +184,29 @@
              },
              cascaderItem: ['city', 'district'],
              dicUrl: '/api/blade-system/region/select',
              span: 4,
              labelWidth:'44',
              className:'cityClass'
              span: 6,
              className: 'cityClass1'
            },
            {
              label: '地市',
              prop: 'city',
              type: 'select',
              searchLabelWidth: 50,
              searchSpan: 3,
              searchLabelWidth: 1,
              searchSpan: 2,
              search: true,
              props: {
                label: 'name',
                value: 'code'
              },
              dicFlag: false,
              dicUrl: '/api/blade-system/region/select?code={{key}}',
              span:4,
              labelWidth:'44',
              className:'cityClass'
              span: 3,
              labelWidth: '0',
              className: 'cityClass2'
            },
            {
              label: '区县',
              searchSpan: 3,
              searchLabelWidth: 50,
              searchSpan: 2,
              searchLabelWidth: 1,
              search: true,
              prop: 'district',
              type: 'select',
@@ -205,11 +214,10 @@
                label: 'name',
                value: 'code'
              },
              dicFlag: false,
              dicUrl: '/api/blade-system/region/select?code={{key}}',
              span: 4,
              labelWidth:'44',
              className:'cityClass'
              span: 3,
              labelWidth: '0',
              className: 'cityClass3'
            },

          ]
@@ -218,7 +226,7 @@
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      ...mapGetters(["permission", "flowRoutes"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.real_add, false),
@@ -254,7 +262,6 @@
        });
      },
      rowUpdate(row, index, done, loading) {
        debugger
        row.coordinate = "";
        update(row).then(() => {
          this.onLoad(this.page);
@@ -364,7 +371,7 @@
          this.selectionClear();
        });
      },
      getDate(){
      getDate() {
        // 当前时间
        var timestamp = Date.parse(new Date());
        var serverDate = new Date(timestamp);
@@ -426,14 +433,46 @@
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
      }
      },
      rowStyle({row, column, rowIndex}) {
        if (row.jtype == "1") {
          return {
            color: '#15a2fe'
          }
        } else {
          return {
            color: '#ff7627'
          }
        }
      },
      handleStart(row) {

        this.$router.push({path: `/real/video/${row.channelNumber}/${row.serialNumber}`});
      },
    }
  };
</script>

<style>
  .cityClass{
  .cityClass1 {
    padding-right: 5px !important;
  }

  .cityClass2 {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .cityClass2 div label {
    display: none;
  }

  .cityClass3 div label {
    display: none;
  }

  .cityClass3 {
    padding-left: 5px !important;
  }

</style>