jihe-hs/ruoyi-ui/src/views/JiHeExpressway/components/RoadStateCard/index.vue

<template>
  <BorderRadiusImage class="RoadStateCard" borderRadius="2px"
    borderColor="linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0))" borderWidth="2px">
    <div class="left" v-if="isShowLeft">
      <ElImage style="width: 212px; height: 159px" v-if="cardData.pictures && cardData.pictures.length>0" class="imgPicture" 
         :src="cardData.pictures[0]"
        :preview-src-list="cardData.pictures || []">
        <div slot="error">
          <i class="el-icon-picture-outline icon"></i>
        </div>
      </ElImage>
      <div style="width: 212px; height: 159px;" v-else class="imgPicture" 
        :preview-src-list="cardData.pictures || []">
        <img :src=getDeviceSource(cardData) style="width: auto; height: 80px">
      </div>
    </div>
    <div class="right">
      <div class="info">
        <p class="linText" v-for="(item, index) in keyMap" :key="index">
          <span>{{ item.label }}: </span>
          <span>{{ cardData[item.key] }}</span>
        </p>
      </div>
      <div class="controls">
        <Button :style="{ background: firstBtnColor, width: isShowLeft ? '50%' : '30%' }"
          @click.native="$emit('firstBtnClick', cardData.id)">{{ getFirstBtnText(cardData.state) }}</Button>
        <Button v-if="cardData.state == 4" :style="{ background: lastBtnColor, width: isShowLeft ? '50%' : '25%' }"
          @click.native="$emit('lastBtnClick', cardData.id)">{{ getLastBtnText(cardData.state) }}</Button>
      </div>
    </div>

    <img v-if="cardData.state" class="status" :src="require(`./images/${statusMap[cardData.state]}.svg`)" />
  </BorderRadiusImage>
</template>

<script>
import Button from "@screen/components/Buttons/Button.vue";
import BorderRadiusImage from "@screen/components/BorderRadiusImage.vue";
import { statusMap } from "./data.js";

export default {
  name: "RoadStateCard",
  props: {
    cardData: {
      type: Object,
      default: () => ({
        time: "2023.12.22 13:00:00",
        source: "视频智能识别",
        location: "k100+000",
        direction: "济南方向",
      }),
    },
    firstBtnText: {
      type: String,
      default: "详情",
    },
    lastBtnText: {
      type: String,
      default: "调度记录",
    },
    firstBtnColor: {
      type: String,
      default: "#00B3CC",
    },
    lastBtnColor: {
      type: String,
      default: "#CB7A00",
    },
    keyMap: {
      type: Array,
      default: () => [
        {
          key: "stringEventType",
          label: "事件",
        },
        {
          key: "stringEventSource",
          label: "来源",
        },
        {
          key: "stakeMark",
          label: "位置",
        },
        {
          key: "stringDirection",
          label: "方向",
        },
        {
          key: "startTime",
          label: "时间",
        },
      ],
    },
    isShowLeft: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      picUrl: "./test.png",
    };
  },
  emit: ["firstBtnClick", "lastBtnClick"],
  components: {
    Button,
    BorderRadiusImage,
  },
  created() {
    this.statusMap = statusMap;
  },
  methods: {
    getDeviceSource(data){
      const {warningSource, pictures} = data;
      if(warningSource === 2){
        return require(`@screen/images/device/毫米波雷达B.png`)
      } else if(warningSource ===3){
        return require(`@screen/images/device/锥桶B.png`)
      } else if(warningSource ===4){
        return require(`@screen/images/device/护栏碰撞预警系统B.png`)
      } else if(warningSource ===5 && (!pictures || pictures.length === 0)){
        return require(`@screen/images/device/扫码报警B.png`)
      } else if(warningSource ===7){
        return require(`@screen/images/device/气象监测器B.png`)
      } else {
        return require(`@screen/images/device/view.png`)
      }
    },
    getFirstBtnText(state) {
      let text = "详情";
      if (state == 5) text = "去确认";
      if (state == 4) text = "详情";
      if (state == 3) text = "处置记录";
      return text;
    },
    getLastBtnText(state) {
      let text = "去处置";
      return text;
    },
  },
};
</script>

<style lang="scss" scoped>
.RoadStateCard {
  color: #fff;
  display: flex;
  background: #133242;
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  // border: 1px solid;
  // border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
  padding: 18px 12px;
  gap: 12px;
  height: 100%;
  overflow: hidden;
  position: relative;

  .left {
    img {
      width: 212px;
      height: 159px;
    }

    .icon {
      display: inline-block;
      width: 212px;
      height: 159px;
      line-height: 157px;
      text-align: center;
      border: 1px solid #fff;
    }
  }

  .right {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px;
    height: 159px;
    width: 201px;

    .info {
      flex: 1;
      display: flex;
      flex-direction: column;

      >p {
        font-size: 12px;
        color: #f4f4f4;
        line-height: 24px;

        &:nth-child(-n + 2) {
          color: #37e7ff;
          font-size: 16px;
          font-weight: bold;
        }

        &:nth-child(2) {
          margin-bottom: 3px;
        }
      }

      .linText {
        /*不换行*/
        white-space: nowrap;
        /*超出的显示省略号*/
        text-overflow: ellipsis;
        /*超出部分隐藏*/
        overflow: hidden;
        /*长单词不换行-兼容ie*/
        // word-wrap: normal;
      }
    }

    .controls {
      display: flex;
      gap: 9px;

      >div {
        // flex: 1;
      }
    }
  }

  .status {
    position: absolute;
    right: 0;
    top: 0;
  }
}
.imgPicture{
  background: linear-gradient(to top, #104864 0%, #133242 100%);
  border: 1px solid #20627e;
 display: flex;
  justify-content: center;
  align-items: center;
}
</style>