cyzh-park/src/views/device/iot/parkingmonitor.vue

<template>
  <basic-container>
    <el-dialog :modal-append-to-body="false" :visible.sync="heartbeatVisible" title="设备心跳" width="80%">
      <deviceHeartbeat :deviceId="deviceId" :data="heartbeatData" ref="heartbeat"></deviceHeartbeat>
    </el-dialog>
    <el-dialog :append-to-body="true" :close-on-click-modal="false" :modal-append-to-body="false"
      :visible.sync="editVisible" title="编辑" width="60%">
      <avue-form v-model="editForm" :option="option" @submit="submitSmartgas"></avue-form>
    </el-dialog>

    <avue-data-tabs :option="countOption" style="margin-left: 200px"></avue-data-tabs>

    <avue-crud :option="option" :table-loading="loading" :data="data" :page="page" :permission="permissionList"
      :before-open="beforeOpen" v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel"
      @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
      @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">

      <template slot="menu" slot-scope="scope">
        <el-button icon="el-icon-setting" size="small" type="text">
          <el-dropdown>
            <span class="el-dropdown-link">操作<i class="el-icon-arrow-down el-icon--right"></i></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-view" type="text" @click.native="viewDetail(scope.row)">详情
              </el-dropdown-item>
              <el-dropdown-item icon="el-icon-view" type="text" v-if="permission.device_heartbeat"
                @click.native="viewHeartBeat(scope.row)">心跳</el-dropdown-item>
              <el-dropdown-item type="text" v-if="permission.smartdevice_edit" @click.native="edit(scope.row)"
                icon="el-icon-edit">编辑</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-button>
      </template>

      <template slot="mapSelectForm" slot-scope="scope">
        <div>
          <el-button @click="openMap"> 选择地址</el-button>
          <el-dialog :append-to-body="true" :close-on-click-modal="false" :modal-append-to-body="false"
            :visible.sync="mapVisible" title="编辑地址" width="80%">
            <!--            <customAvueMap v-if="mapVisible" v-model="scope.row.mapSelect"></customAvueMap>-->
            <editPolygonMap editForm="{}" ref="map" :region.sync="form.deviceInstallAddress"
              :longitude.sync="form.longitude" :latitude.sync="form.latitude" v-if="mapVisible"
              v-model="scope.row.mapSelect" :visible.sync="mapVisible"></editPolygonMap>
          </el-dialog>
        </div>
        <!-- <avue-map v-model="scope.row.mapSelect"></avue-map> -->
      </template>

      <template slot="battery" slot-scope="scope">
        <!-- <battery style=" width: 90px;height: 30px;" :proIsCharge="proIsCharge" :proQuantity="scope.row.battery"></battery> -->
        <el-progress v-if="scope.row.battery>20" color="green" :text-inside="true" :stroke-width="18"
          :percentage="scope.row.battery"></el-progress>
        <el-progress v-if="scope.row.battery<20 ||scope.row.battery == 20" color="red" :text-inside="true"
          :stroke-width="18" :percentage="scope.row.battery"></el-progress>
      </template>

      <template slot="signalIntensity" slot-scope="scope">

      </template>
      <template slot="menuLeft">
        <el-tabs :value="query.deviceType" @tab-click="handleClickType">
          <el-tab-pane></el-tab-pane>
          <el-tab-pane label="智能地磁" name="100007"></el-tab-pane>
        </el-tabs>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
  import {
    getList,
    getDetail,
    add,
    update,
    remove,
    deviceListCount
  } from "@/api/device/iotdevice";

  import {
    getDetail as getResidentialDetail
  } from "@/api/community/residential"
  import {
    mapGetters
  } from "vuex";
  import editPolygonMap from "../../../components/residential/editPolygonMap.vue"
  import {
    getList as getIotList
  } from "@/api/system/terminal/iotaepproduct"
  import {
    getHeartBeatByDeviceId
  } from "@/api/device/iotdeviceheartbeat";

  import deviceHeartbeat from "../../../components/device/deviceheartbeat.vue"

  export default {
    components: {
      editPolygonMap,
      deviceHeartbeat
    },
    data() {

      return {
        heartbeatData: [],
        deviceId: "",
        mapVisible: false,
        heartbeatVisible: false,
        smartDeviceStaticVo: {},
        location: {},
        detailForm: {},
        editVisible: false,
        editForm: {},
        proIsCharge: true,
        activeName: "first",
        detailVisible: false,
        form: {},
        alarmForm: {},
        homeUserForm: {},
        orderUserForm: {},
        query: {
          deviceType: "100007"
        },
        loading: true,
        alarmSetOptionLoading: true,
        homeUserLoading: true,
        orderUserLoading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        alarmPage: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        homeUserPage: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        countOption: {
          span: 3,
          data: [{
              click: function(item) {},
              title: '设备总数',
              count: 0,
              color: '#409EFF',
              key: '设备总数'
            },
            {
              click: function(item) {},
              title: '正常',
              count: 0,
              color: '#67C23A',
              key: '正常'
            },
            {
              click: function(item) {},
              title: '失联',
              count: 0,
              color: '#F56C6C',
              key: '失联'
            },
            {
              click: function(item) {},
              title: '告警',
              count: 0,
              color: '#E6A23C',
              key: '告警'
            },
            {
              click: function(item) {},
              title: '停用',
              count: 0,
              color: '#909399',
              key: '停用'
            },
            {
              click: function(item) {},
              title: '待布防',
              count: 0,
              color: '#987856',
              key: '待布防'
            }
          ]
        },


        option: {
          height: 'auto',
          menuWidth: 200,
          labelWidth: 140,
          calcHeight: 60,
          tip: false,
          searchShow: true,
          searchMenuSpan: 20,
          border: true,
          index: true,
          // viewBtn: false,
          // addBtn: false,
          // delBtn: false,
          editBtn: false,
          selection: true,
          dialogClickModal: false,

          group: [{
            icon: 'el-icon-info',
            label: '基础信息',
            prop: 'group1',
            column: [{
                label: '设备名称',
                prop: 'deviceName',
              },
              {
                label: 'IMEI',
                prop: 'imei',
              },
              {
                label: "操作者",
                prop: "person",

                rules: [{
                  required: false,
                  message: "请输入操作者",
                  trigger: "blur"
                }]
              },

            ]
          }, {
            icon: 'el-icon-bangzhu',
            label: '产品分类',
            // arrow: false,
            prop: 'group2',
            column: [{
              label: "平台",
              prop: "platform",
              type: "select",
              value: "AEP",
              cascaderItem: ['productId'],
              dicData: [{
                  label: "AEP",
                  value: "AEP"
                },
                {
                  label: "scepctwing",
                  value: "scepctwing",
                }
              ],
            }, {
              label: "设备注册平台标识",
              prop: "isAep",
              search: true,
              searchSpan: 6,
              type: "select",
              display: false,
              width: 120,
              // cascaderItem: ['productId'],
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=device_registry_label",
              props: {
                label: 'dictValue',
                value: 'dictKey'
              },
              // dataType: "number",
              search: true,
              searchLabelWidth: 140,
              // searchSpan: 8,
              display: false,
              rules: [{
                required: true,
                message: "请输入设备注册平台标识,1:aep,2:华为,3:厂商",
                trigger: "blur"
              }]
            }, {
              label: "产品类型",
              prop: "productId",
              type: "select",
              remote: true,
              dicUrl: `/api/cyzh-third/iotaepproduct/list?platform=AEP`,
              props: {
                label: "productName",
                value: "productId"
              },
              dicFormatter: (res) => {
                return res.data.records;
              },
            }]
          }, {
            icon: 'el-icon-location',
            label: '位置信息',
            prop: 'group3',
            column: [{
                label: '设备用途',
                prop: 'deviceUsage',
                type: "select",
                value: 20,
                dicData: [{
                    label: "公共设备",
                    value: 20
                  },
                  {
                    label: "居家设备",
                    value: 10
                  },
                ],
                rules: [{
                  required: true,
                  message: "设备用途",
                  trigger: "blur"
                }]
              },
              {
                label: '所属区域',
                prop: 'residentialId',
                type: "select",
                remote: true,
                cascaderItem: ['buildingId'],
                dicUrl: "/api/cyzh-community/residential/list?size=500&name={{key}}",
                props: {
                  label: "name",
                  value: "id"
                },
                dicFormatter: (res) => {
                  return res.data.records;
                },
                rules: [{
                  required: true,
                  message: "所属区域",
                  trigger: "blur"
                }]
              },
              {
                label: '所属楼栋',
                prop: 'buildingId',
                type: "select",
                display: true,
                cascaderItem: ['unitId'],
                dicUrl: "/api/cyzh-community/building/list?size=500&residentialId={{key}}",
                props: {
                  label: "name",
                  value: "id"
                },
                dicFormatter: (res) => {
                  return res.data.records;
                },
              },
              {
                label: '所属单元',
                prop: 'unitId',
                display: true,
                type: "select",
                cascaderItem: ['roomId'],
                dicUrl: "/api/cyzh-community/unit/list?size=500&buildingId={{key}}",
                props: {
                  label: "name",
                  value: "id"
                },
                dicFormatter: (res) => {
                  return res.data.records;
                },
              },
              {
                label: '所属房间',
                prop: 'roomId',
                type: "select",
                display: true,
                dicUrl: "/api/cyzh-community/room/list?size=500&unitId={{key}}",
                props: {
                  label: "name",
                  value: "id"
                },
                dicFormatter: (res) => {
                  return res.data.records;
                },
              },
              {
                label: '',
                prop: 'mapSelect',
                // row: true,
                // span: 20,
                formslot: true,
                hide: true,
              },
              {
                label: "经度",
                prop: "longitude",
                // disabled: true,
              },
              {
                label: "纬度",
                prop: "latitude",
                // disabled: true,
              },
              {
                label: "安装位置",
                prop: "deviceInstallAddress",
                row: true,
                span: 24,
                // disabled: true,
              }

            ]
          }],
          column: [{
              label: "设备唯一标识",
              prop: "deviceId",
              display: false,
              hide: true,
              rules: [{
                required: true,
                message: "请输入设备唯一标识",
                trigger: "blur"
              }]
            },
            {
              label: "设备名称",
              prop: "deviceName",
              search: true,
              display: false,
              rules: [{
                required: true,
                message: "请输入设备名称",
                trigger: "blur"
              }]
            },

            {
              label: "设备注册平台标识",
              prop: "isAep",
              search: true,
              searchSpan: 6,
              display: false,
              type: "select",
              width: 120,
              // cascaderItem: ['productId'],
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=device_registry_label",
              props: {
                label: 'dictValue',
                value: 'dictKey'
              },
              // dataType: "number",
              search: true,
              searchLabelWidth: 140,
              // searchSpan: 8,

              rules: [{
                required: true,
                message: "请输入设备注册平台标识,1:aep,2:华为,3:厂商",
                trigger: "blur"
              }]
            },

            {
              label: "操作者",
              prop: "operator",
              hide: true,
              display: false,
              rules: [{
                required: false,
                message: "请输入操作者",
                trigger: "blur"
              }]
            },

            {
              label: "订阅事件",
              prop: "autoObserver",
              type: "select",
              hide: true,
              display: false,
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=auto_subscribe",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dataType: "number",
              rules: [{
                required: true,
                message: "请输入0 自动订阅（默认），1 取消自动订阅 (LWM2M 协议选填，其他协议不填）",
                trigger: "blur"
              }]
            },
            {
              label: "设备类型",
              prop: "deviceType",
              type: "select",
              hide: true,
              display: false,
              // search: true,
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=device_type",
              props: {
                label: "dictValue",
                value: "dictKey",
              },
              rules: [{
                required: true,
                message: "请输入设备类型",
                trigger: "blur"
              }]
            },
            {
              label: "安装位置",
              prop: "deviceInstallAddress",
              search: true,
              display: false,
              overHidden: true,
              rules: [{
                required: true,
                message: "请输入安装位置",
                trigger: "blur"
              }]
            },
            {
              label: "设备状态",
              prop: "deviceStatus",
              type: "select",
              search: true,
              display: false,
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=device_status",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dataType: "number",
              rules: [{
                required: true,
                message: "请输入设备状态",
                trigger: "blur"
              }]
            },
            {
              label: "电池电量",
              prop: "battery",
              slot: true,

              display: false,
              rules: [{
                required: true,
                message: "请输入电池电量",
                trigger: "blur"
              }]
            },
            {
              label: "信号强度",
              prop: "signalIntensity",
              slot: true,
              display: false,
              rules: [{
                required: true,
                message: "请输入信号强度",
                trigger: "blur"
              }]
            },
            {
              label: "厂家名称",
              prop: "manufacturers",
              hide: true,
              display: false,
              rules: [{
                required: true,
                message: "请输入厂家名称",
                trigger: "blur"
              }]
            },
            {
              label: "厂商编号(附录)",
              prop: "manufacturersNo",
              hide: true,
              display: false,
              rules: [{
                required: false,
                message: "请输入厂商编号(附录)",
                trigger: "blur"
              }]
            },
            {
              label: "设备型号",
              prop: "deviceSpecld",
              hide: true,
              display: false,
              rules: [{
                required: true,
                message: "请输入设备型号",
                trigger: "blur"
              }]
            },
            {
              label: "IMEI号",
              hide: true,
              display: false,
              prop: "imei",
              rules: [{
                required: true,
                message: "请输入IMEI号",
                trigger: "blur"
              }]
            },
            {
              label: "iccid",
              prop: "iccid",
              hide: true,
              display: false,
              rules: [{
                required: true,
                message: "请输入iccid",
                trigger: "blur"
              }]
            },
            {
              label: "Mcu软件版本",
              prop: "mcuEdition",
              hide: true,
              display: false,
              rules: [{
                required: true,
                message: "请输入Mcu软件版本",
                trigger: "blur"
              }]
            },
            {
              label: "NB模组型号",
              prop: "nbModuleModel",
              hide: true,
              display: false,
              rules: [{
                required: true,
                message: "请输入NB模组型号",
                trigger: "blur"
              }]
            },
            {
              label: "NB模组版本信息",
              prop: "nbModuleEdition",
              hide: true,
              display: false,
              rules: [{
                required: true,
                message: "请输入NB模组版本信息",
                trigger: "blur"
              }]
            },
            {
              label: "最后更新时间",
              prop: "lastUpdateTime",
              hide: true,
              display: false,
              type: "datetime",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
              rules: [{
                required: true,
                message: "请输入最后更新时间",
                trigger: "blur"
              }]
            },
            {
              label: "心跳保护时间",
              prop: "heartbeatTime",
              hide: true,
              display: false,
              type: "datetime",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
              rules: [{
                required: true,
                message: "请输入心跳保护时间",
                trigger: "blur"
              }]
            },
            {
              label: "无线信号覆盖等级",
              prop: "wirelessLevel",
              hide: true,
              display: false,
              rules: [{
                required: true,
                message: "请输入无线信号覆盖等级",
                trigger: "blur"
              }]
            },
            {
              label: "当前磁场值",
              prop: "magneticField",
              hide: true,
              display: false,
              rules: [{
                required: true,
                message: "请输入当前磁场值",
                trigger: "blur"
              }]
            },
            {
              label: "终端发射功率",
              prop: "transmittingPower",
              hide: true,
              display: false,
              rules: [{
                required: true,
                message: "请输入终端发射功率",
                trigger: "blur"
              }]
            },
            {
              label: "终端接收功率",
              prop: "receivingPower",
              hide: true,
              display: false,
              rules: [{
                required: true,
                message: "请输入终端接收功率",
                trigger: "blur"
              }]
            },
            {
              label: "信噪比",
              prop: "signalNoiseRatio",
              hide: true,
              display: false,
              rules: [{
                required: true,
                message: "请输入信噪比",
                trigger: "blur"
              }]
            },
            {
              label: "IMSI",
              prop: "imsi",
              hide: true,
              display: false,
              rules: [{
                required: false,
                message: "请输入IMSI",
                trigger: "blur"
              }]
            },

          ]
        },
        data: []
      };
    },
    watch: {
      "form.platform"() {
        let platformColumn = this.option.group[1].column[0];
        let isAepColumn = this.option.group[1].column[1];
        let productColumn = this.option.group[1].column[2];
        if (this.form.platform == "AEP") {
          getIotList(1, 10000, {
            "platform": "AEP"
          }).then(res => {
            productColumn['dicData'] = res.data.data.records
            // platformColumn.cascaderItem = ['productId']
            productColumn.dicUrl = "/api/cyzh-third/iotaepproduct/list?platform=AEP&productName={{key}}"
            isAepColumn.display = false;
            productColumn.display = true
          })
        } else if (this.form.platform == "scepctwing") {
          getIotList(1, 10000, {
            "platform": "scepctwing"
          }).then(res => {
            productColumn['dicData'] = res.data.data.records
            productColumn.dicUrl = "/api/cyzh-third/iotaepproduct/list?platform=scepctwing&productName={{key}}"
             isAepColumn.display = true;
            if (this.form.isAep == 1) {
              productColumn.display = true
            } else {
              productColumn.display = false
            }
          })
        }
        this.option = Object.assign({}, this.option)
      },
      "form.isAep"() {
        if (this.form.platform == "AEP") return
        let productColumn = this.option.group[1].column[2];
        if (this.form.isAep == 1) {
          productColumn.display = true;
        } else {
          productColumn.display = false;
        }

        this.option = Object.assign({}, this.option)
      },

      "form.deviceUsage"() {
        console.log(this.form.deviceUsage + "dddd")
        const buildingColumn = this.option.group[2].column[2];
        const unitColumn = this.option.group[2].column[3];
        const roomColumn = this.option.group[2].column[4];
        if (this.form.deviceUsage === 20) { //公共设备
          buildingColumn.display = false;
          unitColumn.display = false;
          roomColumn.display = false;
        } else {
          buildingColumn.display = true;
          unitColumn.display = true;
          roomColumn.display = true;
        }
      },
      "form.residentialId"() {
        if (this.form.residentialId != '' && this.form.residentialId != undefined) {
          getResidentialDetail(this.form.residentialId).then(res => {
            this.form.latitude = res.data.data.latitude;
            this.form.longitude = res.data.data.longitude;
          })
        }

      }
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.parkingmonitor_add, false),
          viewBtn: this.vaildData(this.permission.parkingmonitor_view, false),
          delBtn: this.vaildData(this.permission.parkingmonitor_delete, false),
          editBtn: this.vaildData(this.permission.parkingmonitor_update, false),

        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },

    methods: {
      openMap() {
        this.mapVisible = true;
        this.$nextTick(() => {
          // this.$refs.map.mounted();
        })
      },
      handleClick(tab, event) {
        console.log(tab + " " + event)
      },
      handleClickType(tab, event) {
        // this.$refs.crud.searchForm.deviceType = tab.name;
        this.query.deviceType = tab.name;
        this.onLoad(this.page, this.query);
      },
      viewHeartBeat(row) {
        this.deviceId = row.id;

        getHeartBeatByDeviceId({
          deviceId: this.deviceId
        }).then(res => {
          this.heartbeatVisible = true;
          this.heartbeatData = res.data.data;
          this.$nextTick(() => {
            this.$refs.heartbeat.init()
          })
        })

      },
      viewDetail(row) {
        if (row.latitudeLongitude != null && row.latitudeLongitude != "") {
          var latitudeLongitude = row.latitudeLongitude.split(",");
          this.location.latitude = latitudeLongitude[0];
          this.location.longitude = latitudeLongitude[1];
          this.location.name = row.deviceName;
        }
        this.detailForm = row;
        this.detailVisible = true;
      },
      rowSave(row, done, loading) {
        row.latitudeLongitude = row.latitude + "," + row.longitude;
        add(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          loading();
          window.console.log(error);
        });
      },
      rowUpdate(row, index, done, loading) {
        row.latitudeLongitude = row.latitude + "," + row.longitude;
        update(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          loading();
          console.log(error);
        });
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            return remove(this.ids);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
          });
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getDetail(this.form.id).then(res => {
            this.form = res.data.data;
          });
        }
        done();
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },

      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },

      edit(row) {
        this.editForm = row;
        this.editVisible = true;
      },
      submitSmartgas(row, done, loading) {
        update(this.editForm).then(() => {
          this.onLoad(this.page);
          this.editVisible = false;
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          loading();
          console.log(error);
        });
      },
      onLoad(page, params = {}) {
        this.loading = true;
        // params.prefix = "ctwing/smoke3";
        params.deviceUsage = 20; //公共区域
        deviceListCount(params).then(res => {


          this.smartDeviceStaticVo = res.data.data;
          this.smartDeviceStaticVo.forEach(staticDevice => {
            if (staticDevice.deviceType == params.deviceType) {
              this.countOption.data[0].count = staticDevice.deviceCount;
              this.countOption.data[1].count = staticDevice.normalCount;
              this.countOption.data[2].count = staticDevice.outlineCount;
              this.countOption.data[3].count = staticDevice.alarmCount;
              this.countOption.data[4].count = staticDevice.pauseCount;
              this.countOption.data[5].count = staticDevice.armedCount;
            }
          })

        })
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });

      }
    }
  };
</script>

<style scoped>
  .el-divider--vertical {
    /* height: 100%; */
  }

  >>>.el-divider--horizontal {
    margin: 30px 0 !important;
  }

  >>>.el-card__body {
    padding-top: 0px !important;
  }

  >>>.avue-crud__menu {
    /*display: none;*/
  }

  >>>section header .el-row {
    margin-top: 15px;
  }

  >>>.avue-data-tabs .item {
    height: auto;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
    font-size: small;
    margin-left: 10px;
  }
</style>