Merge remote-tracking branch 'origin/master'

龚焕茏

2024-03-25 448166fbb6a638cb93c142a4922175ea3b677ae0

Merge remote-tracking branch 'origin/master'

 src/views/screen/components/screen-map/index.vue

@@ -45,7 +45,7 @@
    viewControl: {
      beta: -30,
      alpha: 50,
      distance: 105,
      distance: 85,
      maxBeta: 180,
      panSensitivity: 0,
      zoomSensitivity: 1,
@@ -93,7 +93,7 @@
      viewControl: {
        beta: -30,
        alpha: 50,
        distance: 105,
        distance: 85,
        maxBeta: 180,
        panSensitivity: 0,
        zoomSensitivity: 1,
@@ -236,8 +236,8 @@

  .map-content {
    flex: 1;
    background: rgba(67, 102, 155, 0.3);
    border: 1px solid rgba(47, 91, 157, 0.8);
    // background: rgba(67, 102, 155, 0.3);
    // border: 1px solid rgba(47, 91, 157, 0.8);
  }

  .map-style {

 src/views/screen/components/screen-table/index.vue

New file
@@ -0,0 +1,156 @@
<template>
  <div class="table-container">
    <div class="table-content" ref="tabContent">
      <el-table :data="tableData" border :height="tableHeight" :max-height="tableHeight" class="rank-table">
        <el-table-column prop="name" label="地区" align="center" width="100">
        </el-table-column>
        <el-table-column prop="data1" label="人脸设备总数" align="center">
        </el-table-column>
        <el-table-column prop="data2" label="车辆设备总数" align="center">
        </el-table-column>
        <el-table-column prop="data3" label="视频设备总数" align="center">
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      tableHeight: 40,
      tableData: [
        {
          name: '富顺县',
          data1: 1123,
          data2: 1123,
          data3: 1123
        },
        {
          name: '荣县',
          data1: 1123,
          data2: 1123,
          data3: 1123
        },
        {
          name: '高新区',
          data1: 1123,
          data2: 1123,
          data3: 1123
        },
        {
          name: '自流井区',
          data1: 1123,
          data2: 1123,
          data3: 1123
        },
        {
          name: '贡井区',
          data1: 1123,
          data2: 1123,
          data3: 1123
        },
        {
          name: '大安区',
          data1: 1123,
          data2: 1123,
          data3: 1123
        },
        {
          name: '沿滩区',
          data1: 1123,
          data2: 1123,
          data3: 1123
        },
      ]
    }
  },
  methods: {
    computedHeight() {
      this.$nextTick(() => {
        setTimeout(() => {
          const content = this.$refs.tabContent;
          this.tableHeight = content.offsetHeight;
        })
      })
    }
  },
  mounted() {
    this.computedHeight();
  }
}
</script>

<style lang="scss" scoped>
.table-container {
  width: 100%;
  // flex: 1;
  height: 355px;
  position: relative;
  background: rgba(67, 102, 155, 0.3);
  border: 1px solid rgba(47, 91, 157, 0.8);

  .table-content {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
  }
}



.rank-table {
  background-color: transparent !important;
  color: #fff !important;

  //滚动条的背景色
  ::-webkit-scrollbar-track {
    background-color: transparent;
  }
}

::v-deep .el-table tr {
  background-color: transparent !important;
}

::v-deep .el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
  background-color: transparent !important;

}

::v-deep .el-table--group,
.el-table--border {
  border: 0;
}

::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-color: #56739e99 !important;
}

::v-deep .el-table--border .el-table__cell {
  border-color: #56739e99 !important;
}

::v-deep .el-table th.el-table__cell>.cell {
  color: #447ED6;
}

::v-deep .el-scrollbar__bar.is-vertical {
  display: none !important;
}

::v-deep .el-table::before,
.el-table--group::after,
.el-table--border::after {
  background-color: transparent !important;
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
  background-color: #447ed648;
}
</style>

 src/views/screen/components/screen-title/index.vue

@@ -5,7 +5,7 @@
        <img src="@/assets/images/screen/header_bg.png" class="width-img" alt="">
      </div>
      <div class="header-text">
        自贡市运维考核可视化
        大屏
      </div>
    </div>
  </div>
@@ -19,7 +19,7 @@

<style lang="scss" scoped>
.header-container {
  width: 1000px;
  width: 600px;
  position: absolute;
  top: 0;
  left: 50%;
@@ -33,9 +33,9 @@
.header-text {
  position: absolute;
  left: 49%;
  top: 15px;
  top: 5px;
  transform: translateX(-50%);
  color: #fff;
  font-size: 30px;
  font-size: 24px;
}
</style>

 src/views/screen/components/screen-wrapper/index.vue

@@ -12,7 +12,8 @@
      </div>
      <div class="center-container center-wrapper">
        <screen-map></screen-map>
        <screen-detection></screen-detection>
        <screen-table></screen-table>
        <!-- <screen-detection></screen-detection> -->

      </div>
      <div class="right-container wrapper">
@@ -25,21 +26,21 @@
<script>
import SelectItem from '../select-item/index';
import ScreenFace from '../screen-face/index';
import ScreenDetection from '../screen-detection/index';
import ScreenExamine from '../screen-examine/index';
import ScreenVideo from '../screen-video/index';
import ScreenCar from '../screen-car/index';
import ScreenMap from '../screen-map/index';
import ScreenTable from '../screen-table/index';
export default {
  name: 'ScreenWrapper',
  components: {
    SelectItem,
    ScreenFace,
    ScreenDetection,
    ScreenExamine,
    ScreenVideo,
    ScreenCar,
    ScreenMap
    ScreenMap,
    ScreenTable
  },
  methods: {
    returnPath() {

 src/views/screen/components/select-item/index.vue

@@ -7,6 +7,13 @@
      </el-select>
    </div>

    <div class="local-select">
      <div class="select-label">地区</div>
      <el-select v-model="localValue" popper-class="type-select" class="select-style" @change="setConfig">
        <el-option v-for="item in testData2" :key="item.name" :label="item.name" :value="item.value" />
      </el-select>
    </div>

    <div class="date-select">
      <div class="select-label">日期</div>
      <el-date-picker v-model="dateValue" type="daterange" range-separator="至" start-placeholder="开始日期"
@@ -21,6 +28,7 @@
  data() {
    return {
      typeValue: 1,
      localValue: 1,
      dateValue: new Date(),
      testData1: [
        {
@@ -35,6 +43,36 @@
          name: '公安部数据',
          value: 3
        }
      ],
      testData2: [
      {
          name: '富顺县',
          value: 1,
        },
        {
          name: '荣县',
          value: 2,
        },
        {
          name: '高新区',
          value: 3,
        },
        {
          name: '自流井区',
          value: 4,
        },
        {
          name: '贡井区',
          value: 5,
        },
        {
          name: '大安区',
          value: 6,
        },
        {
          name: '沿滩区',
          value: 7,
        },
      ]
    }
  },
@@ -61,11 +99,25 @@
    flex-shrink: 0;
  }

  .local-label {
    font-size: 20px;
    margin-right: 10px;
    color: #2375f0;
    flex-shrink: 0;
  }

  .type-select {
    display: flex;
    align-items: center;
    margin-right: 20px;
    width: 240px;
    width: 200px;
  }

  .local-select {
    display: flex;
    align-items: center;
    margin-right: 20px;
    width: 200px;
  }

  .date-select {