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">
      <!-- <img :src="(cardData.pictures ? cardData.pictures[0] : null) || require(`./test.png`)"> -->
      <!-- <img :src="require(`./test.png`)"> -->
      <ElImage
        style="width: 212px; height: 159px"
        :src="cardData.pictures ? cardData.pictures[0] : null"
        :preview-src-list="cardData.pictures || []"
      >
        <div slot="error">
          <i class="el-icon-picture-outline icon"></i>
        </div>
      </ElImage>
    </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: '50%' }"
          @click.native="$emit('firstBtnClick', cardData.id)"
          >{{ getFirstBtnText(cardData.state) }}</Button
        >
        <Button
          v-if="cardData.state == 4"
          :style="{ background: lastBtnColor, width: '50%' }"
          @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: "时间",
        },
      ],
    },
  },
  data() {
    return {
      picUrl: "./test.png",
    };
  },
  emit: ["firstBtnClick", "lastBtnClick"],
  components: {
    Button,
    BorderRadiusImage,
  },
  created() {
    this.statusMap = statusMap;
  },
  methods: {
    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;
  }
}
</style>