上传项目

Xxxu

2020-07-07 4f953ffc89fc95f83b152e914c5e65938b440f17

 src/views/modules/led/led-controller.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,120 @@
<template>
  <div class="led-controller">
    <div class="title-text">播放内容设置</div>
    <el-row>
      <el-col :span="6">
        <div>
          <div><button class="btn img-btn" :class="{'click': isactive == 0}" @click="click(0)">图片上传</button></div>
          <div><button class="btn vid-btn" :class="{'click': isactive == 1}" @click="click(1)">视频上传</button></div>
          <div><button class="btn sub-btn" :class="{'click': isactive == 2}" @click="click(2)">字幕上传</button></div>
          <div><button class="btn sub-btn" :class="{'click': isactive == 3}" @click="click(3)">天气上传</button></div>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="led-controller-controller">
          <image-upload v-if="isactive == 0"></image-upload>
          <video-upload v-if="isactive == 1"></video-upload>
          <subtext-upload v-if="isactive == 2"></subtext-upload>
          <weather-upload v-if="isactive == 3"></weather-upload>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ImageUpload from './led-controller/image-upload'
import VideoUpload from './led-controller/video-upload'
import SubtextUpload from './led-controller/subtext-upload'
import WeatherUpload from './led-controller/weather-upload'
export default {
  data () {
    return {
      isactive: 0
    }
  },
  computed: {
    lightemitStateId () {
      return this.$store.state.led.lightemitId
    }
  },
  watch: {
    lightemitStateId (curVal, oldVal) {
    }
  },
  components: {
    ImageUpload,
    VideoUpload,
    SubtextUpload,
    WeatherUpload
  },
  methods: {
    click (val) {
      this.isactive = val
    },
    // æŽ¨é€å¤©æ°”数据
    pushLED () {
      var ids = [this.lightemitStateId]
      this.$http({
        url: this.$http.adornUrl(`/pole/polelightemit/pushLED`),
        method: 'post',
        data: this.$http.adornData({
          lightemitIds: ids
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.led-controller {
  margin-top: 10px;
  // background-image: url(~@/assets/img/led/controller.png);
  // background-size: 100% 100%;
  height: 451px;
  button:focus {
    outline:none;
  };
  .btn {
    border-style: none;
    width: 156px;
    height: 56px;
    margin: 15px;
    background: url(~@/assets/img/led/btn.png);
    background-repeat:no-repeat;
    background-size: 100%;
    color: #fff;
    font-size: 1.4em;
    font-weight: 550;
  };
  &-controller {
    border: 1px #d9d9d9 solid;
    display:block;
    margin: 20px;
    height: 345px;
  }
  /deep/ .el-upload-dragger {
    background-color: transparent;
    border: 1px dashed #d9d9d9;
  }
}
.click {
  background: url(~@/assets/img/led/btn-click.png) !important;
  background-repeat:no-repeat !important;
}
</style>