卡片模式部分修改

shuishen

2021-04-08 2694c22f3386ea3115660b6e2972761a6dbd6300

卡片模式部分修改

 public/map/widgets/supervisoryMap/SupervisoryMap.js

@@ -323,7 +323,7 @@
      var xlSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 32, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([200, 52, 59, 0.8]), 1), new dojo.Color([250, 65, 74, 0.8]));
      var lgSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 28, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([41, 163, 41, 0.8]), 1), new dojo.Color([51, 204, 51, 0.8]));
      var mdSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 24, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([82, 163, 204, 0.8]), 1), new dojo.Color([102, 204, 255, 0.8]));
      var smSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 22, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([230, 184, 92, 0.8]), 1), new dojo.Color([255, 204, 102, 0.8]));
      var smSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 52, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([230, 184, 92, 0.8]), 1), new dojo.Color([255, 204, 102, 0.8]));
      renderer.addBreak(0, 19, smSymbol);
      renderer.addBreak(20, 150, mdSymbol);
      renderer.addBreak(151, 1000, lgSymbol);

 src/views/supervisoryConsole/card.vue

@@ -1,49 +1,81 @@
<template>
  <el-row>
    <el-col
      class="card-container"
      :span="1"
      v-for="(item, index) in option"
      :key="index"
    >
      <a href="">
        <el-card
          :style="
            item.state == ''
              ? item.onlineStatus == 1
                ? 'background: #1DBB99e6'
                : 'background: #C9C9C9e6'
              : 'background: #F48F57e6'
          "
          @click="alert(1)"
  <div>
    <div class="card-search">
      <div class="input-search">
        <el-input
          placeholder="按设备号、名称、地址"
          v-model="inputSearchValue"
          class="input-with-select"
        >
          <div>{{ item.deviceName }}</div>
          <div>{{ item.street }}</div>

          <div class="cet">
            {{
              item.state == ""
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <div class="radio">
        <el-radio-group v-model="radio" @change="siteStatus">
          <el-radio label="仅显示设备在线">仅显示设备在线</el-radio>
          <el-radio label="仅显示设备掉线">仅显示设备掉线</el-radio>
          <el-radio label="仅显示设备故障">仅显示设备故障</el-radio>
        </el-radio-group>
      </div>
    </div>
    <el-row
      v-infinite-scroll="load"
      :infinite-scroll-disabled="disabled"
      style="margin-top: 10px"
    >
      <el-col
        class="card-container"
        :span="1"
        v-for="(item, index) in option"
        :key="index"
      >
       <!-- @click.stop="goToDetails(item.deviceNumber)" -->
        <a :href="'/#/dataL/index?deviceNumber=' + item.deviceNumber">
          <el-card
            :style="
              item.state == ''
                ? item.onlineStatus == 1
                  ? "设备在线"
                  : "设备掉线"
                : "设备故障"
            }}
          </div>
                  ? 'background: #1DBB99e6'
                  : 'background: #C9C9C9e6'
                : 'background: #F48F57e6'
            "
          >
            <div>{{ item.deviceName }}</div>
            <div>{{ item.street }}</div>

          <img src="/img/alarm.png" alt="" />
            <div class="cet">
              {{
                item.state == ""
                  ? item.onlineStatus == 1
                    ? "设备在线"
                    : "设备掉线"
                  : "设备故障"
              }}
            </div>

          <div class="bot">
            <span>
              {{ item.deviceNumber }}
            </span>
            <span>
              {{ item.stime }}
            </span>
          </div>
        </el-card>
      </a>
    </el-col>
  </el-row>
            <img src="/img/alarm.png" alt="" />

            <div class="bot">
              <span>
                {{ item.deviceNumber }}
              </span>
              <span>
                {{ item.stime }}
              </span>
            </div>
          </el-card>
        </a>
      </el-col>
    </el-row>
    <div class="card-load-btm">
      <div class="spinner" v-if="loading" style="margin: auto; width: 70px">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
      </div>
      <div v-if="noMore">我是有底线的！</div>
    </div>
  </div>
</template>

<script>
@@ -52,7 +84,19 @@
  data() {
    return {
      option: [],
      count: [],
      loading: false,
      radio: "仅显示设备在线",
      inputSearchValue: "",
    };
  },
  computed: {
    noMore() {
      return this.option.length >= this.count.length;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  created() {
    getList().then((res) => {
@@ -66,13 +110,127 @@
        if (item.state == "" && item.onlineStatus == 1) c.push(item);
      });

      this.option = a.concat(c.concat(b));
      var d = a.concat(c.concat(b));

      d.forEach((item) => {
        this.count.push(item);
      });
      this.option = [];
      for (var i = 0; i <= 24; i++) {
        if (this.count.length > 0) {
          this.option.push(this.count[0]);
          this.count.shift();
        }
      }
    });
  },

  methods: {
    load() {
      this.loading = true;

      setTimeout(() => {
        for (var i = 0; i <= 20; i++) {
          if (this.count.length > 0) {
            this.option.push(this.count[0]);
            this.count.shift();
          }
        }
        this.loading = false;
      }, 2000);
    },
    siteStatus(value, e) {
      console.log(this.radio, value);
    },
    goToDetails(data) {
      this.$router.push({ path: "/dataL ", query: data });
    },
  },
};
</script>

<style lang="scss">
@-webkit-keyframes sk-bouncedelay {
  0%,
  80%,
  to {
    -webkit-transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1);
  }
}

@keyframes sk-bouncedelay {
  0%,
  80%,
  to {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.card-search {
  padding: 0 5px;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #e4e4e4;
  .input-search {
    min-width: 360px;
    float: left;
    .el-input__inner,
    .el-input-group__append {
      height: 32px;
      border: none;
      background-color: #fff;
    }
    .el-input-group__append {
      padding-left: 20px;
      padding-right: 16px;
      button {
        padding: 9px 10px;
      }
    }
  }
  .radio {
    float: right;
  }
}
.card-load-btm {
  line-height: 40px;
  text-align: center;
  color: #9e9d9d;
  .spinner {
    margin: auto;
    width: 70px;
    text-align: center;
    div {
      display: inline-block;
      width: 15px;
      height: 15px;
      border-radius: 100%;
      background-color: #9e9e9e;
      -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
      animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }
    .bounce1 {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }
    .bounce2 {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }
    div + * {
      margin-left: 5px;
    }
  }
}
.card-container {
  padding: 0 10px;
  height: 172px !important;