添加数据报表模块

mark

2022-11-11 0b49de88ce30aafdd346c85637b0d97841979589

 src/views/hashrate/HashManage/components/HashCard.vue

@@ -16,9 +16,7 @@
    </div>
    <div class="detail">
      <div class="detailItem">
        <div class="label">
          <span class="iconfont">&#xe62f;</span>打开分析开关
        </div>
        <div class="label"><span class="iconfont">&#xe62f;</span>打开分析开关</div>
        <div class="data">
          <span class="number">{{ hashrate.valid }}</span
          >路
@@ -38,16 +36,56 @@
          >路
        </div>
      </div>
      <div class="detailItem">
        <div class="label" title="因未知原因未处理">
          <span class="iconfont">&#xe631;</span>因未知原因未处理
        </div>
      <div class="detailItem" @click="dialogVisible = true">
        <div class="label" title="因未知原因未处理"><span class="iconfont">&#xe631;</span>因未知原因未处理</div>
        <div class="data">
          <span class="number">{{ hashrate.noDeal }}</span
          >路
        </div>
      </div>
    </div>
    <el-dialog
      title="异常数据查询"
      destroy-on-close
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <!-- <div style="width: 600px">
        v-if="dialogVisible"
      </div> -->
      <el-row :gutter="50">
        <el-col :span="15">
          <el-form label-width="140px">
            <el-form-item label="摄像机名称/通道号">
              <el-input placeholder="请输出摄像机名称/通道号" v-model="id"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="9"><el-button type="primary">查询</el-button></el-col>
      </el-row>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"> </el-table-column>
        <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
      <div>
        <el-pagination
          @current-change="refrash"
          @size-change="handleSizeChange"
          :current-page="page"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 15, 20, 25]"
          :total="total"
          background
        ></el-pagination>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

@@ -55,12 +93,60 @@
export default {
  props: {
    type: {},
    hashrate: {},
    hashrate: {}
  },
  data() {
    return {};
    return {
      page: 1,
      size: 10, //分页相关
      total: 0, //总数,

      id: "",
      dialogVisible: false,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
  },
};
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    }
  },
  methods: {
    refrash(page) {
      this.page = page
      this.lookUp()
    },
    handleSizeChange(size) {
      this.size = size
      this.lookUp()
    },

    handleClose(done) {
      // this.dialogVisible = false
      // this.$confirm("确认关闭？")
      //   .then((_) => {
      done()
      // })
      // .catch((_) => {})
    }
  }
}
</script>

<style lang="scss" scoped>
@@ -152,4 +238,13 @@
    }
  }
}
.el-pagination ::v-deep {
  margin-top: 30px;

  text-align: center;
  height: 24px;
  .el-pagination__sizes {
    margin-right: 0;
  }
}
</style>