最终章

黄何裕

2024-08-08 cbe714cf3c16c2c6d39ac62ff9d30ed99771bdfd

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

@@ -13,7 +13,7 @@
          :max-height="tableHeight"
          class="rank-table"
        >
          <el-table-column prop="name" label="地区" align="center" width="100">
          <el-table-column prop="area" label="地区" align="center" width="100">
          </el-table-column>

          <el-table-column label="人脸设备" align="center">
@@ -22,14 +22,25 @@
                <div slot="content">
                  <div class="tip-item">
                    <div class="tip-label">设备正常数:</div>
                    <div class="tip-info tip-success">12</div>
                    <div class="tip-info tip-success">
                      {{ scope.row.faceNormalNum }}
                    </div>
                  </div>
                  <div class="tip-item">
                    <div class="tip-label">设备异常数:</div>
                    <div class="tip-info tip-danger">4</div>
                    <div class="tip-info tip-danger">
                      {{ scope.row.faceErrorNum }}
                    </div>
                  </div>
                </div>
                <div class="tip-num">75%</div>
                <div class="tip-num">
                  {{
                    scope.row.faceRate?(
                      (scope.row.faceNormalNum / scope.row.faceRate) *
                      100
                    ).toFixed(0)+'%':'--'
                  }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
@@ -40,14 +51,25 @@
                <div slot="content">
                  <div class="tip-item">
                    <div class="tip-label">设备正常数:</div>
                    <div class="tip-info tip-success">12</div>
                    <div class="tip-info tip-success">
                      {{ scope.row.carNormalNum }}
                    </div>
                  </div>
                  <div class="tip-item">
                    <div class="tip-label">设备异常数:</div>
                    <div class="tip-info tip-danger">4</div>
                    <div class="tip-info tip-danger">
                      {{ scope.row.carNormalNum }}
                    </div>
                  </div>
                </div>
                <div class="tip-num">75%</div>
                <div class="tip-num">
                  {{
                      scope.row.carRate?(
                      (scope.row.carNormalNum / scope.row.carRate) *
                      100
                    ).toFixed(0)+'%':'--'
                  }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
@@ -58,14 +80,25 @@
                <div slot="content">
                  <div class="tip-item">
                    <div class="tip-label">设备正常数:</div>
                    <div class="tip-info tip-success">12</div>
                    <div class="tip-info tip-success">
                      {{ scope.row.videoNormalNum }}
                    </div>
                  </div>
                  <div class="tip-item">
                    <div class="tip-label">设备异常数:</div>
                    <div class="tip-info tip-danger">4</div>
                    <div class="tip-info tip-danger">
                      {{ scope.row.videoNormalNum }}
                    </div>
                  </div>
                </div>
                <div class="tip-num">75%</div>
                <div class="tip-num">
                  {{
                    scope.row.videoRate?(
                      (scope.row.videoNormalNum / scope.row.videoRate) *
                      100
                    ).toFixed(0)+'%':'--'
                  }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
@@ -80,57 +113,62 @@

export default {
  name: "ScreenTable",

  props: {
    tableData: {
      type: Array,
      default: null,
    },
  },
  components: {
    WrapperTitle,
  },
  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,
        },
      ],
      // 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: {