index.vue

<template>
  <div class="radar-container">
    <el-card class="box-card">
      <div class="lcl-title">影像查询</div>
      <div class="mt20">
        <el-select
          v-model="radarSelectValue"
          placeholder="请选择"
          class="mr10"
          @change="radarChange"
        >
          <el-option
            v-for="item in radarSelectOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <!-- <el-button type="primary" icon="el-icon-search" size="medium"
          >搜索</el-button
        > -->
        <el-button icon="el-icon-refresh-left" size="medium" @click="resetPic"
          >重置</el-button
        >
      </div>
    </el-card>
    <el-card class="mt10">
      <div class="box-card-bottom">
        <div class="radar-pic">
          <img :src="radarPic" />
        </div>
        <div class="radar-chart-table">
          <!-- <div id="radar-chart"></div> -->
          <div class="chart-container">
            <ChartsForLine :ChartsForLineParant="RadarChartData" />
          </div>
          <div id="radar-table">
            <el-table
              :data="RadarTableData"
              height="230"
              border
              stripe
              style="width: 100%"
              :header-cell-style="{
                textAlign: 'center',
                height: '20px',
              }"
              :row-style="{ height: '20px' }"
            >
              <el-table-column align="center" prop="x" label="x">
              </el-table-column>
              <el-table-column align="center" prop="y" label="y">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
import ChartsForLine from "@/components/lclEcharts/ChartsForLine";
import {
  listPost,
  getPost,
  delPost,
  addPost,
  updatePost,
} from "@/api/system/post";

export default {
  components: {
    ChartsForLine,
  },
  name: "Post",
  dicts: ["sys_normal_disable"],
  data() {
    return {
      // 遮罩层
      loading: true,
      radarSelectOptions: [
        {
          value: "1",
          label: "2023年03月10日 15：00",
          radarPic: require("../../assets/images/radar/007.jpg"),
        },
        {
          value: "2",
          label: "2023年03月08日 14：15",
          radarPic: require("../../assets/images/radar/006.jpg"),
        },
        {
          value: "3",
          label: "2023年03月06日 13：30",
          radarPic: require("../../assets/images/radar/005.jpg"),
        },
        {
          value: "4",
          label: "2023年03月04日 12：45",
          radarPic: require("../../assets/images/radar/004.jpg"),
        },
        {
          value: "5",
          label: "2023年03月02日 12：00",
          radarPic: require("../../assets/images/radar/003.jpg"),
        },
        {
          value: "6",
          label: "2023年03月02日 11：45",
          radarPic: require("../../assets/images/radar/002.jpg"),
        },
        {
          value: "7",
          label: "2023年03月01日 11：15",
          radarPic: require("../../assets/images/radar/001.jpg"),
        },
      ],
      radarSelectValue: "1",
      radarPic: require("../../assets/images/radar/007.jpg"),
      RadarChartData: {
        chartId: "radar-chart",
        color: ["#f7af0b", "#05f57a", "#f40852"],
        chartData: [
          {
            name: "1月",
            value1: 13512,
            value2: 0,
            value3: 0,
          },
        ],
        chartType: "line", //bar
        axisLabel: "#B9DAF1",
        itemColor: "rgba(42,148,226,1)",
        lineColor: "rgba(42,148,226,0.1)",
        areaColor: ["rgba(42,148,226,1)", "rgba(42,148,226,0.1)"],
      },
      RadarTableData: [
        {
          x: "34.5",
          y: "688.6",
          id: "1",
        },
        {
          x: "-1.5",
          y: "719.6",
          id: "2",
        },
        {
          x: "102.5",
          y: "683.6",
          id: "3",
        },
        {
          x: "180.2",
          y: "839.5",
          id: "4",
        },
        {
          x: "246.2",
          y: "879.4",
          id: "5",
        },
      ],
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.RadarChart();
    });
  },
  methods: {
    radarChange(e) {
      //雷达切换
      let nowPic = this.radarSelectOptions.filter((item) => item.value === e);
      return (this.radarPic = nowPic[0].radarPic);
    },
    resetPic() {
      this.radarPic = require("../../assets/images/radar/001.jpg");
      this.radarSelectValue = "1";
    },
    RadarChart() {
      //图表数据
      let that = this;
      this.RadarChartData = {
        chartId: "radar-chart",
        color: ["#f7af0b", "#05f57a", "#f40852"],
        bgc: "#f8f8f8",

        xAxisData: ["12:00", "13:00", "14:00", "15:00"],
        yData: [
          [-3, 2, -3, 6],
          [3, 0, 1, 3],
          [1, 2, -1, 0],
          [3, 1, -2, 1],
          [4, 3, -1, -1],
        ],

        chartType: "line", //bar
        axisLabel: "#0562AF",
        itemColor: "rgba(42,148,226,1)",
        legendItem: ["雷达1", "雷达2", "雷达3", "雷达4", "雷达5"],
        alarm: {
          onelevelalarm: 1,
          twolevelalarm: 1,
          threelevelalarm: 1,
          fourlevelalarm: 1,
          unit: "mm",
        },
        unit: "mm",
        grid: {
          left: "5%",
          right: "5%",
          bottom: "15%",
          top: "10%",
          z: 22,
        },
        showlegend: false,
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.radar-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  height: 100%;
  // border-radius: 10px;
  // background-color: teal;
  .box-card {
    width: 100%;
    flex: 0.13;
    .lcl-title {
      font-size: 22px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
      line-height: 30px;
      position: relative;
      padding-left: 10px;
      &:before {
        content: "";
        position: absolute;
        left: 0px;
        top: 4px;
        width: 6px;
        height: 22px;
        background: #0d85f4;
      }
    }
  }
  .box-card-bottom {
    flex: 0.745;
    display: flex;
    flex-direction: column;
    .radar-pic {
      overflow: hidden;
      img {
        border-radius: 4px;
        display: flex;
        flex: 1;
        display: block;
        max-height: 100%;
        max-width: 100%;
        margin: 0 auto;
        object-fit: scale-down;
      }
    }
    .radar-chart-table {
      width: 100%;
      height: 230px;
      margin-top: 10px;
      .chart-container {
        width: 79%;
        height: 100%;
        border: 1px solid #c7d8ee;
        box-sizing: border-box;
        float: left;
        margin-right: 1%;
      }
      #radar-table {
        width: 20%;
        height: 100%;
        // border: 1px solid #c7d8ee;
        box-sizing: border-box;
        float: left;
        ::v-deep .el-table--border,
        ::v-deep .el-table--group {
          border: 1px solid #c7d8ee !important;
        }
        // 设置滚动条的宽度
        ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
          width: 6px;
        }
        // 设置滚动条的背景色和圆角
        ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
          background-color: #c7d8ee;
          border-radius: 8px;
        }
        /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
        ::v-deep ::-webkit-scrollbar {
          width: 6px;
          /*滚动条宽度*/
          height: 12px;
          /*滚动条高度*/
          background-color: white;
        }

        /*定义滑块 内阴影+圆角*/
        ::v-deep ::-webkit-scrollbar-thumb {
          box-shadow: inset 0 0 0px white;
          -webkit-box-shadow: inset 0 0 0px white;
          background-color: rgb(193, 193, 193);
          /*滚动条的背景颜色*/
          border-radius: 20px;
        }

        //解决表格固定列时的压样式问题
        .el-table__fixed {
          height: 100px;
          width: 12px;
        }
      }
    }
  }
}
</style>