index.vue

<template>
  <div class="data-watch">
    <el-card class="box-card">
      <div class="watch-left">
        <img :src="`${appPicApi}${picUrl}`" alt="" />
        <div class="watch-topRight">
          <div class="ex-pic">
            <img src="../../../assets/images/dixiashuiwei/02.png" alt="" />
            <span>监测示意图</span>
          </div>
        </div>
      </div>
      <div class="watch-right">
        <div class="lcl-title">地下水位监测数据</div>
        <div id="radar-table">
          <el-table
            :data="NbwyTableData"
            height="230"
            border
            stripe
            style="width: 100%"
            :header-cell-style="{
              textAlign: 'center',
              height: '20px',
            }"
            :row-style="{ height: '20px' }"
          >
            <el-table-column align="center" prop="monNumber" label="监测编号">
            </el-table-column>
            <el-table-column align="center" prop="pointName" label="监测点位">
            </el-table-column>
            <el-table-column
              align="center"
              prop="monValue"
              label="监测值（mm）"
            >
            </el-table-column>

            <el-table-column
              align="center"
              prop="monAlarmLevel"
              label="预警状态"
            >
            </el-table-column>
            <el-table-column align="center" prop="monStatus" label="工作状态">
              <template slot-scope="scope">
                <span v-if="scope.row.monStatus == 0">正常</span>
                <span v-if="scope.row.monStatus == 1">停止</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="clb"></div>
        <div class="lcl-title">地下水位监测曲线</div>
        <div
          class="chart-container"
          v-for="item in AllChartData"
          :key="item.id"
        >
          <div class="chartNbwy">
            <ChartsForLine :ChartsForLineParant="item" />
          </div>
          <div class="chartNbwyName">{{ item.name }}</div>
        </div>
        <div class="clb"></div>
      </div>
      <div class="clb"></div>
    </el-card>
  </div>
</template>
<script>
// import { defineComponent } from "@vue/composition-api";
import ChartsForLine from "@/components/lclEcharts/ChartsForLine";
import { waterreal, waterimage, imageList } from "@/api/lclApi/lclapi";
export default {
  data() {
    return {
      NbwyTableData: [
        {
          createTime: "2023-03-11 19:06:20",
          updateTime: "2023-03-11 08:38:13",
          monStatus: 0,
          pointName: 0,
          id: 14,
          monNumber: "2#沉降仪",
          monValueA: "0.2",
          monValueB: "0.21",
          monAlarmStatus: 0,
          monDept: "10m/20m",
        },
      ],
      AllChartData: [
        {
          name: "+205马道 地下水位监测点",
          chartId: "radar-chart",
          color: ["#f7af0b", "#05f57a", "#f40852"],
          value: [
            {
              name: "1-1测斜仪",
              value: [
                {
                  createTime: "2023-03-11 14:05:51",
                  updateTime: "2023-03-11 08:37:51",
                  monStatus: 0,
                  pointName: "+205马道 地下水位监测点",
                  id: 8,
                  monNumber: "1-1测斜仪",
                  monName: "1-1测斜仪",
                  monValueA: "0.1",
                  monValueB: "0.11",
                  monAlarmStatus: 0,
                  monDept: "10m",
                  disValue: "0.149",
                },
              ],
            },
          ],
        },
      ],
      allYDataForEchart: [],
      allXDataForEchart: [],
      appPicApi: "",
      picUrl: "",
    };
  },
  components: {
    ChartsForLine,
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.getRealList();
      this.getchart();
      this.appPicApi = this.$store.getters.appPicApi;
      imageList({ monType: 7 }).then((res) => {
        this.picUrl = res.rows[0].image;
      });
    });
  },
  methods: {
    getRealList() {
      waterreal().then((res) => {
        if (res && res.code === 200 && res.rows) {
          this.NbwyTableData = res.rows;
        }
      });
    },
    getchart() {
      waterimage()
        .then((res) => {
          if (res && res.code === 200 && res.rows) {
            this.AllChartData = res.rows;
          }
        })
        .then(() => {
          var yFData = this.AllChartData.map((v) => v.value);
          var allYdata = [];
          var sonData = [];
          for (let i = 0; i < yFData.length; i++) {
            var yDataitem = [];
            for (let j = 0; j < yFData[i].length; j++) {
              yDataitem.push(yFData[i][j].value);
            }
            sonData.push(yDataitem);
          }
          for (let i = 0; i < sonData.length; i++) {
            var hhh = [];
            for (let j = 0; j < sonData[i].length; j++) {
              hhh.push(sonData[i][j].map((v) => v.disValue));
            }
            allYdata.push(hhh);
          }

          this.allYDataForEchart = allYdata;
        })
        .then(() => {
          let that = this;
          this.AllChartData = this.AllChartData.map((v, k) => {
            console.log(v.value[0]);
            return {
              name: v.name,
              chartId: `nbwy-${k + 1}`,
              color: ["#f7af0b", "#05f57a", "#f40852"],
              chartType: "line",
              axisLabel: "#0562AF",
              itemColor: "rgba(42,148,226,1)",
              unit: "mm",
              bgc: "#fff",
              grid: {
                left: "10%",
                right: "5%",
                bottom: "10%",
                top: "15%",
                z: 22,
              },
              showlegend: true,
              legendItem: v.value.map((item) => item.name),
              // xAxisData: that.allXDataForEchart,
              xAxisData: v.value[0].value.map((item, kk) => item.createTime),
              yData: that.allYDataForEchart[k],
            };
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.clb {
  clear: both;
}
.data-watch {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  height: 100%;
  // border-radius: 10px;
  // background-color: teal;
  .box-card {
    width: 100%;
    .watch-left {
      width: 45%;
      float: left;
      position: relative;
      > img {
        border-radius: 4px;

        display: block;
        max-height: 100%;
        max-width: 100%;
        margin: 0 auto;
        object-fit: scale-down;
      }
      .watch-topRight {
        width: 20%;
        height: 20%;
        position: absolute;
        right: 10px;
        top: 10px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        .ex-pic {
          position: relative;
          width: 100%;
          height: 100%;
          > img {
            width: 100%;
            height: 100%;
            object-fit: scale-down;
          }
          > span {
            position: absolute;
            left: 10px;
            top: 0px;
            font-size: 20px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #333333;
          }
        }
      }
    }
    .watch-right {
      width: 55%;
      padding: 10px;
      float: left;
      .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;
        }
      }
      #radar-table {
        width: 100%;
        height: 100%;
        // border: 1px solid #c7d8ee;
        box-sizing: border-box;
        ::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;
        }
      }
      .chart-container {
        width: 49%;
        height: 240px;
        float: left;
        border: 1px solid #0562af;
        box-sizing: border-box;
        margin: 1% 0 5px 1%;
        overflow: hidden;
        .chartNbwy {
          width: 100%;
          height: 200px;
        }
        .chartNbwyName {
          font-size: 20px;
          text-align: center;
          line-height: 40px;
        }
      }
    }
  }
}
</style>