添加数据报表模块

mark

2022-11-11 0b49de88ce30aafdd346c85637b0d97841979589

添加数据报表模块

 src/api/area.ts

@@ -1,84 +1,106 @@
import request from "@/scripts/httpRequest";
import qs from "qs";
import request from "@/scripts/httpRequest"
import qs from "qs"

export const getLocalCameraTree = (data: any) => {
  return request({
    url: "/saas/api-s/area/localmenu",
    method: "post",
    data: data
  });
};
  })
}

export const getGB28181CameraTree = (query: any) => {
  return request({
    url: "/saas/api-s/gb28181/tree",
    method: "post",
    data: query
  });
};
  })
}

export const getClusterTree = (query: any) => {
  return request({
    url: "/data/api-v/camera/nodeCamera",
    method: "get",
    params: query
  });
};
  })
}

export const addAreaTreeData = (query: any) => {
  return request({
    url: "/saas/api-s/area/add",
    method: "post",
    data: query
  });
};
  })
}

export const delAreaTreeData = (query: any) => {
  return request({
    url: "/saas/api-s/area/del",
    method: "post",
    data: query
  });
};
  })
}

export const updateAreaTreeData = (query: any) => {
  return request({
    url: "/saas/api-s/area/update",
    method: "post",
    data: query
  });
};
  })
}

export const getCameraBaseImage = (data: any) => {
  return request({
    url: "/saas/api-s/gb28181/camera/capture",
    method: "post",
    data
  });
};
  })
}

export const getGb28181Pool = (data) => {
  return request({
    url: "/saas/api-s/gb28181/treeSelected",
    method: "post",
    data
  });
};
  })
}

export const refreshGB28181Tree = (data) => {
  return request({
    url: "/saas/api-s/gb28181/treeRefresh",
    method: "post",
    data
  });
};
  })
}

export const updateCameraArea = (query: any) => {
  return request({
    url: "/data/api-v/camera/updateCameraArea",
    method: "post",
    data: qs.stringify(query)
  });
};
  })
}

// 数据报表
export const reportFormGetFormType = () => {
  return request({
    url: "/saas/api-s/reportForm/getFormTypeList",
    method: "get"
  })
}

export const reportFormGetExport = (data) => {
  return request({
    url: "/saas/api-s/reportForm/getExportList",
    method: "post",
    data
  })
}

export const reportFormExportForm = (data) => {
  return request({
    url: "/saas/api-s/reportForm/exportForm",
    method: "post",
    data
  })
}

 src/router/index.js

@@ -139,6 +139,14 @@
    }
  },
  {
    path: "/dataReport",
    name: "dataReport",
    component: () => import(/* webpackChunkName: "about" */ "../views/dataReport"),
    meta: {
      title: "数据报表"
    }
  },
  {
    // 实时监控
    path: "/video",
    name: "video",

 src/scripts/httpRequest.ts

@@ -12,6 +12,7 @@
/* //POST传参序列化(添加请求拦截器) */
Axios.interceptors.request.use(
  (config) => {
    console.log(config, "config")
    if ((config.method === "post" && sessionStorage.getItem("clusterId")) || sessionStorage.getItem("devId")) {
      if (!config.data) {
        config.data = {}

 src/views/dataReport/components/alarmPush.vue

New file
@@ -0,0 +1,401 @@
<template>
  <div class="sub-account">
    <div class="table-area">
      <el-table
        id="multipleTable"
        ref="multipleTable"
        :data="dataList"
        :fit="true"
        :default-sort="{ prop: 'createTime', order: 'descending' }"
      >
        <el-table-column prop="alarmDate" label="报警日期" show-overflow-tooltip></el-table-column>
        <el-table-column prop="channelName" label="通道名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="alarmType" label="报警类型" show-overflow-tooltip></el-table-column>
        <el-table-column prop="alarmAction" label="报警动作" show-overflow-tooltip></el-table-column>
        <el-table-column prop="channelCode" label="通道编码" show-overflow-tooltip></el-table-column>
        <el-table-column prop="alarmImage" label="图片地址" show-overflow-tooltip></el-table-column>
        <el-table-column prop="state" label="上报结果" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-if="scope.row.state == 0" class="status green">失败</div>
            <div v-else class="status">成功</div>
          </template>
        </el-table-column>
        <el-table-column prop="resultMsg" label="上报返回信息" show-overflow-tooltip></el-table-column>

        <!-- <el-table-column label="操作" align="center" width="100px">
          <template slot-scope="scope">
            <span class="iconfont option" @click="editUser(scope.row)">编辑</span>
            <span class="iconfont option" style="color:red" @click="delUser(scope.row)">删除</span>
          </template>
        </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>
    </div>
  </div>
</template>

<script>
import { camerasReportLog } from "@/api/report"

export default {
  data() {
    return {
      dataList: [],
      page: 1,
      size: 10, //分页相关
      total: 0 //总数,
    }
  },
  async created() {
    this.lookUp()
    //     GET    /api-a/v1/cameras/reportLog
    // 分页查询上报日志
    // alarmDate   string // 报警日期
    // channelName string // 设备的真实报警通道名称
    // alarmType   string // 报警类型
    // alarmAction string // 报警动作
    // channelCode string // 设备的真实报警通道编码
    // alarmImage  string // 报警/销警图片url  A链接
    // state       int    // 上报结果, 0 失败 1 成功
    // resultMsg   string // 上报返回信息
  },
  mounted() {},
  methods: {
    handleSizeChange(size) {
      this.size = size
      this.lookUp()
    },
    //分页功能
    refrash(page) {
      this.page = page
      this.lookUp()
    },

    async lookUp() {
      let res = await camerasReportLog({ pageIndex: this.page, pageSize: this.size })
      this.dataList = res.data
      this.total = res.total
    }
  }
}
</script>

<style scoped lang="scss">
.sub-account {
  padding: 20px;
  .head-name {
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #3d3d3d;
    border-left: 4px solid #0065ff;
    padding-left: 10px;
  }
  .add-title {
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    line-height: 22px;
    color: #3d3d3d;
    margin-bottom: 30px;
    .iconfont {
      margin-right: 10px;
    }
  }
  .add-ruleForm::v-deep {
    .el-input__inner {
      color: #3d3d3d;
      border-radius: 4px;
      border-color: #c0c5cc;
      height: 32px;
      line-height: 32px;
      border-color: #c0c5cc;
    }
    .user-tree {
      .el-form-item__label:before {
        content: "*";
        color: #f52323;
        margin-right: 4px;
      }
      .el-form-item__content {
        display: flex;
        .tree-box {
          .t {
            height: 32px;
            background: #f0f5fa;
            border-radius: 3px 3px 0px 0px;
            line-height: 32px;
            text-align: center;
            border-bottom: 1px solid #c0c5cc;
          }
          width: 336px;
          height: 480px;
          border: 1px solid #c0c5cc;
          margin-right: 20px;
          box-sizing: border-box;
        }
      }
    }
  }
  .searchBtn {
    width: 50px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    text-align: center;
    color: #fff;
    background: #0065ff;
    margin-right: 20px;
  }
  .right {
    display: flex;
  }
  .resetBtn {
    width: 50px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    text-align: center;
    color: #0065ff;
    box-sizing: border-box;
    border: 1px solid #0065ff;
  }
  .search {
    display: flex;
    font-size: 14px;
    border-bottom: 1px solid #e9ebee;
    margin-top: 30px;
    padding-bottom: 20px;
    .left,
    .right,
    .id,
    .time,
    .cluster {
      display: flex;
      align-items: center;
      .el-select {
        width: auto;
      }
    }

    .id .el-input ::v-deep {
      width: 200px;
    }

    .cluster::v-deep .el-input {
      width: 300px;

      margin-left: 10px;
      margin-right: 20px;
      .el-input__icon {
        line-height: 32px;
      }
      input {
        border-radius: 0;

        &::-webkit-input-placeholder {
          color: #999;
        }

        &:focus {
          border-color: #0065ff;
        }
      }
    }

    .el-input ::v-deep {
      width: 200px;
      margin-left: 10px;
      margin-right: 20px;
      height: 32px;
      line-height: 32px;
      input {
        border-radius: 0;
        height: 32px;
        line-height: 32px;
        &::-webkit-input-placeholder {
          color: #999;
        }

        &:focus {
          border-color: #0065ff;
        }
      }
    }

    .el-date-editor {
      width: 318px;
      height: 40px;
      margin-left: 10px;
      margin-right: 20px;
      border-radius: 0;

      &::-webkit-input-placeholder {
        color: #999;
      }

      &.is-active {
        border-color: #0065ff;
      }
    }
  }

  .btns {
    display: flex;
    margin: 20px 0;
    text-align: center;
    .add {
      margin-right: 20px;
      width: 126px;
      height: 32px;
      background: #0065ff;
      color: #fff;
      span {
        margin-right: 5px;
        line-height: 32px;
        font-size: 14px;
      }
    }

    .export {
      width: 126px;
      height: 32px;
      border: 1px solid #0065ff;
      color: #0065ff;
      box-sizing: border-box;
      span {
        margin-right: 5px;
        line-height: 32px;
        font-size: 14px;
      }
    }
  }

  .el-table ::v-deep {
    background-color: rgb(233, 235, 238);
    padding: 1px;

    &::after {
      display: none;
    }

    td.index .cell {
      padding-left: 16px;
      padding-right: 4px;
    }

    .has-gutter tr th {
      background: #f0f3f5;
      font-size: 16px;
      color: #3d3d3d;
      font-weight: 700;
    }

    td .cell {
      color: #3d3d3d;
    }

    tr:hover > td.el-table__cell {
      background-color: #fff;
    }

    .el-table__row--striped .el-table__cell {
      background-color: #f0f5fa !important;
    }
    tr:hover > td.el-table__cell {
      background-color: #fff;
    }

    .el-table__row--striped .el-table__cell {
      background-color: #f0f5fa !important;
    }

    .status {
      color: #ff4b33;

      &.green {
        color: #36b24a;
      }
    }

    .option {
      margin-right: 10px;
      font-size: 14px;
      color: rgb(0, 101, 255);
      cursor: pointer;
    }
  }

  .el-pagination ::v-deep {
    margin-top: 30px;
    text-align: center;
    height: 24px;
    .el-pagination__sizes {
      margin-right: 0;
    }

    button {
      margin: 0;
      background-color: #fff;
      border: 1px solid #c0c5cc;
      border-radius: 2px;
    }

    .number {
      background-color: #fff;

      &:not(.disabled):hover {
        color: #0065ff;
      }

      &:not(.disabled).active {
        background-color: #0065ff;
        color: #fff;
      }
    }

    .el-input .el-input__inner {
      padding-left: 0;

      &:hover,
      &:focus {
        border-color: #0065ff;
      }
    }
  }

  .el-select ::v-deep {
    .el-select__tags-text {
      color: #3d3d3d;
    }
  }
}
</style>

<style>
.el-date-table td.start-date span,
.el-date-table td.end-date span {
  background-color: #0065ff;
}

.el-button--text span {
  color: #0065ff;
}

.el-button.is-plain:hover,
.el-button.is-plain:focus {
  color: #0065ff;
  border-color: #0065ff;
}
</style>

 src/views/dataReport/components/dataReport.vue

New file
@@ -0,0 +1,114 @@
<template>
  <div style="padding: 20px;">
    <el-tabs v-model="activeName">
      <el-tab-pane name="reportDownload">
        <span slot="label"><i class="el-icon-s-home"></i> 自定义报表</span>
        <reportDownload :activeName.sync="activeName" @aaa="aaa" :tableData.sync="tableData"></reportDownload>
      </el-tab-pane>
      <el-tab-pane name="point">
        <span slot="label"><i class="el-icon-s-platform"></i> 报表下载</span>
        <div>
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="formName" label="报表名称" width="180"> </el-table-column>
            <el-table-column prop="formType" label="报表类型" width="180"> </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="280"> </el-table-column>
            <!-- <el-table-column prop="createTime" label="创建时间"> </el-table-column> -->
            <el-table-column label="操作">
              <template slot-scope="scope">
                <a :href="scope.row.url">{{ scope.row.url }}</a>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <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>
      </el-tab-pane>
      <!-- <el-tab-pane name="alarmPush">
        <span slot="label"><i class="el-icon-phone"></i> 报警上报日志</span>
        <alarmPush></alarmPush>
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
import reportDownload from "./reportDownload.vue"
// import point from "./point.vue"
// import alarmPush from "./alarmPush.vue"
import { addAreaTreeData, reportFormGetExport } from "@/api/area"

export default {
  components: {
    reportDownload
    // point,
    // alarmPush
  },
  data() {
    return {
      page: 1,
      size: 10, //分页相关
      total: 0, //总数,

      activeName: "reportDownload",
      tableData: [],
      titles: []
    }
  },
  created() {},
  mounted() {},
  methods: {
    refrash(page) {
      this.page = page
      this.lookUp()
    },
    handleSizeChange(size) {
      this.size = size
      this.lookUp()
    },

    async aaa() {
      // console.log(row, "|row")
      let query = {
        FormType: "",
        KeyWords: "",
        StartTime: "",
        EndTime: "",
        Page: 10,
        Size: 1
      }
      let res = await reportFormGetExport(query)
      this.tableData = res.data.list
      this.total = res.data.total

      console.log(res, "r22222222222es")
    }
    // handleClick(row) {
    //   console.log(row, "row")
    // }
  }
}
</script>

<style scoped lang="scss">
.el-pagination ::v-deep {
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
  height: 24px;
  .el-pagination__sizes {
    margin-right: 0;
  }
}
</style>

<style></style>

 src/views/dataReport/components/reportDownload.vue

New file
@@ -0,0 +1,595 @@
<template>
  <div class="sub-account">
    <!-- <div class="add-title" @click="isShowAdd = false">
      <span class="iconfont">&#xe614;</span>
      <span>子账户管理</span>
    </div> -->
    <div class="head-name" style="margin-bottom:20px">自定义数据报表</div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      :label-position="'left'"
      ref="ruleForm"
      label-width="120px"
      class="add-ruleForm"
    >
      <el-form-item label="报表名称" prop="FileName">
        <el-input
          maxlength="15"
          show-word-limit
          v-model="ruleForm.FileName"
          placeholder="请输入报表名称"
          style="width: 350px"
        ></el-input>
      </el-form-item>
      <el-form-item label="报表类型" prop="FormType">
        <el-select @change="changeFormType" style="width: 350px" v-model="ruleForm.FormType" placeholder="请选择">
          <el-option v-for="item in formTypeOptions" :key="item.formType" :label="item.formName" :value="item.formType">
          </el-option>
        </el-select>
        <!-- <el-input v-model="ruleForm.formType" placeholder="请输入报表类型" style="width: 350px"></el-input> -->
      </el-form-item>
      <el-form-item label="报表字段选择" prop="titles">
        <el-select style="width: 350px" v-model="ruleForm.titles" multiple placeholder="">
          <el-option v-for="(item, index) in titlesOptions" :key="index" :label="item" :value="item"> </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!-- <div class="right">
      <div class="button searchBtn" @click="saveUser">保存</div>
      <div class="button resetBtn" @click="resetUser">重置</div>
      <div class="button resetBtn" style="margin-left:20px" @click="goback">返回</div>
    </div> -->
    <div style="margin-left: 100px;">
      <el-button @click="changeActive()" type="primary">生成报表</el-button>
    </div>
  </div>
</template>

<script>
import { reportFormGetFormType, reportFormExportForm } from "@/api/area"
import { getClusterDevList } from "@/api/clusterManage"

export default {
  props: {
    activeName: String,
    tableData: Array
  },
  data() {
    return {
      cluster_id: "",
      titlesOptions: [],
      formTypeOptions: [],
      options: [],
      value1: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
      ruleForm: {
        //y
        FileName: "",
        FormType: "",
        titles: []
      },
      rules: {
        FileName: [{ required: true, message: "请输入报表名称", trigger: "blur" }],
        FormType: [{ required: true, message: "请选择报表类型", trigger: "change" }],
        titles: [{ type: "array", required: true, message: "请至少选择一个报表字段选择", trigger: "change" }]
        // devCode: [{ required: true, message: "请输入设备编码", trigger: "blur" }],
        // companyCode: [{ required: true, message: "请输入企业编码", trigger: "blur" }]
      }
    }
  },
  async created() {
    const res = await getClusterDevList()
    console.log(res, "res")
    // sessionStorage.setItem("clusterId", res.data.clusterList[0].cluster_id)
    this.cluster_id = res.data.clusterList[0].cluster_id
    // let query = { pageIndex: this.page, pageSize: this.size, keyword: this.inputText }
    // this.query = query

    this.report()
    // this.dataList = res.data
    // this.total = res.total
  },
  mounted() {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!")
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    changeFormType(val) {
      console.log(val, "val")
      let obj = this.formTypeOptions.find((item) => item.formType === val)
      console.log(obj, "obj")
      this.titlesOptions = obj.titles
      this.ruleForm.titles = obj.titles
    },
    async report() {
      let res = await reportFormGetFormType()
      // console.log(res, "resres")
      this.formTypeOptions = res.data.list
      // this.ruleForm.formName = res.data.list[0].formName
      // this.ruleForm.formType = res.data.list[0].formType
      // this.options = res.data.list[0].titles
      // this.ruleForm.titles = res.data.list[0].titles

      // console.log(this.options, "this.options")
    },
    async changeActive() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          // console.log(this.ruleForm.titles, "ruleForm.titles")
          let query = {
            ClusterId: this.cluster_id,
            // DevId: row.id,
            // ParentId: row.id,
            FileName: this.ruleForm.FileName,
            FormType: this.ruleForm.FormType,
            Titles: this.ruleForm.titles
          }
          reportFormExportForm(query).then((res) => {
            console.log(res, "res")
            this.$emit("update:tableData", res.data.list)
            this.$emit("aaa")
            this.$emit("update:activeName", "point")
          })
          // let res = await reportFormExportForm(query)

          // console.log(this.activeName, "activeName")
          // this.$emit("update:titles", this.ruleForm.titles)
          // console.log(this.activeName, "activeName")
        } else {
          console.log("error submit!!")
          return false
        }
      })
    }
    // async fetchDevicesList(val) {
    //   this.tbLoading = true
    //   if (val === 1) {
    //     let query = { pageIndex: this.page, pageSize: this.size, keyword: this.inputText }
    //     this.query = query
    //     let res = await getDevicesList(query)
    //     this.dataList = res.data
    //     this.total = res.total
    //   } else {
    //     let res = await getDevicesList(this.query)
    //     this.dataList = res.data
    //     this.total = res.total
    //   }
    //   setTimeout(() => {
    //     this.tbLoading = false
    //   }, 200)
    // },
    // delUser(row) {
    //   console.log(row, "row")
    //   this.$confirm("确认要删除设备吗, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning"
    //   }).then(async () => {
    //     let rsp = await devicesDelete({ id: row.id })
    //     if (rsp && rsp.success) {
    //       this.$message({
    //         type: "success",
    //         message: "删除成功!"
    //       })
    //     }
    //     this.fetchDevicesList()
    //   })
    // },
    // //分页功能
    // handleSizeChange(size) {
    //   this.size = size
    //   this.fetchDevicesList(1)
    // },
    // //分页功能
    // refrash(page) {
    //   this.page = page
    //   this.fetchDevicesList(1)
    // },
    // addDevice() {
    //   this.isShowAdd = true
    //   this.tip = 1
    //   this.resetUser()
    // }, //y
    // resetUser() {
    //   //devName , devId , devIp, devCode, companyCode
    //   this.ruleForm = {
    //     devName: "",
    //     devId: "",
    //     devIp: "",
    //     devCode: "",
    //     companyCode: ""
    //   }
    // },
    // saveUser() {
    //   this.$refs["ruleForm"].validate((valid) => {
    //     if (valid) {
    //       if (this.tip === 1) {
    //         let params = {
    //           devName: this.ruleForm.devName,
    //           devId: this.ruleForm.devId,
    //           devIp: this.ruleForm.devIp,
    //           devCode: this.ruleForm.devCode,
    //           companyCode: this.ruleForm.companyCode
    //         }
    //         // console.log(params, "params")
    //         devicesCreate(params).then((res) => {
    //           // console.log(res, "res")
    //           if (res && res.success) {
    //             // Notification({
    //             //   title: "成功",
    //             //   showClose: true,
    //             //   message: res.data,
    //             //   type: "success"
    //             // })
    //             this.$message({
    //               type: "success",
    //               message: res.data
    //             })
    //             this.goback()
    //             this.fetchDevicesList()
    //           }
    //         })
    //       } else if (this.tip === 2) {
    //         let params = {
    //           devName: this.ruleForm.devName,
    //           devId: this.ruleForm.devId,
    //           devIp: this.ruleForm.devIp,
    //           devCode: this.ruleForm.devCode,
    //           companyCode: this.ruleForm.companyCode,
    //           id: this.ruleForm.id,
    //           createdAt: this.ruleForm.createdAt,
    //           state: this.ruleForm.state,
    //           updatedAt: this.ruleForm.updatedAt
    //         }
    //         devicesUpdate(params).then((res) => {
    //           console.log(res, "res")
    //           if (res && res.success) {
    //             this.$message({
    //               type: "success",
    //               message: res.msg
    //             })
    //             this.goback()
    //             this.fetchDevicesList()
    //           }
    //         })
    //       }
    //     } else {
    //       return false
    //     }
    //   })
    // },
    // goback() {
    //   this.isShowAdd = false
    // },
    // editUser(row) {
    //   this.tip = 2
    //   this.isShowAdd = true
    //   this.ruleForm.devName = row.devName
    //   this.ruleForm.devId = row.devId
    //   this.ruleForm.devIp = row.devIp
    //   this.ruleForm.devCode = row.devCode
    //   this.ruleForm.companyCode = row.companyCode
    //   this.ruleForm.id = row.id
    //   this.ruleForm.createdAt = row.createdAt
    //   this.ruleForm.state = row.state
    //   this.ruleForm.updatedAt = row.updatedAt
    // }
  }
}
</script>

<style scoped lang="scss">
.sub-account {
  padding: 20px;
  .head-name {
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #3d3d3d;
    border-left: 4px solid #0065ff;
    padding-left: 10px;
  }
  .add-title {
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    line-height: 22px;
    color: #3d3d3d;
    margin-bottom: 30px;
    .iconfont {
      margin-right: 10px;
    }
  }
  .add-ruleForm::v-deep {
    .el-input__inner {
      color: #3d3d3d;
      border-radius: 4px;
      border-color: #c0c5cc;
      height: 32px;
      line-height: 32px;
      border-color: #c0c5cc;
    }
    .user-tree {
      .el-form-item__label:before {
        content: "*";
        color: #f52323;
        margin-right: 4px;
      }
      .el-form-item__content {
        display: flex;
        .tree-box {
          .t {
            height: 32px;
            background: #f0f5fa;
            border-radius: 3px 3px 0px 0px;
            line-height: 32px;
            text-align: center;
            border-bottom: 1px solid #c0c5cc;
          }
          width: 336px;
          height: 480px;
          border: 1px solid #c0c5cc;
          margin-right: 20px;
          box-sizing: border-box;
        }
      }
    }
  }
  .searchBtn {
    width: 50px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    text-align: center;
    color: #fff;
    background: #0065ff;
    margin-right: 20px;
  }
  .right {
    display: flex;
  }
  .resetBtn {
    width: 50px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    text-align: center;
    color: #0065ff;
    box-sizing: border-box;
    border: 1px solid #0065ff;
  }
  .search {
    display: flex;
    font-size: 14px;
    border-bottom: 1px solid #e9ebee;
    margin-top: 30px;
    padding-bottom: 20px;
    .left,
    .right,
    .id,
    .time,
    .cluster {
      display: flex;
      align-items: center;
      .el-select {
        width: auto;
      }
    }

    .id .el-input ::v-deep {
      width: 200px;
    }

    .cluster::v-deep .el-input {
      width: 300px;

      margin-left: 10px;
      margin-right: 20px;
      .el-input__icon {
        line-height: 32px;
      }
      input {
        border-radius: 0;

        &::-webkit-input-placeholder {
          color: #999;
        }

        &:focus {
          border-color: #0065ff;
        }
      }
    }

    .el-input ::v-deep {
      width: 200px;
      margin-left: 10px;
      margin-right: 20px;
      height: 32px;
      line-height: 32px;
      input {
        border-radius: 0;
        height: 32px;
        line-height: 32px;
        &::-webkit-input-placeholder {
          color: #999;
        }

        &:focus {
          border-color: #0065ff;
        }
      }
    }

    .el-date-editor {
      width: 318px;
      height: 40px;
      margin-left: 10px;
      margin-right: 20px;
      border-radius: 0;

      &::-webkit-input-placeholder {
        color: #999;
      }

      &.is-active {
        border-color: #0065ff;
      }
    }
  }

  .btns {
    display: flex;
    margin: 20px 0;
    text-align: center;
    .add {
      margin-right: 20px;
      width: 126px;
      height: 32px;
      background: #0065ff;
      color: #fff;
      span {
        margin-right: 5px;
        line-height: 32px;
        font-size: 14px;
      }
    }

    .export {
      width: 126px;
      height: 32px;
      border: 1px solid #0065ff;
      color: #0065ff;
      box-sizing: border-box;
      span {
        margin-right: 5px;
        line-height: 32px;
        font-size: 14px;
      }
    }
  }

  .el-table ::v-deep {
    background-color: rgb(233, 235, 238);
    padding: 1px;

    &::after {
      display: none;
    }

    td.index .cell {
      padding-left: 16px;
      padding-right: 4px;
    }

    .has-gutter tr th {
      background: #f0f3f5;
      font-size: 16px;
      color: #3d3d3d;
      font-weight: 700;
    }

    td .cell {
      color: #3d3d3d;
    }

    tr:hover > td.el-table__cell {
      background-color: #fff;
    }

    .el-table__row--striped .el-table__cell {
      background-color: #f0f5fa !important;
    }
    tr:hover > td.el-table__cell {
      background-color: #fff;
    }

    .el-table__row--striped .el-table__cell {
      background-color: #f0f5fa !important;
    }

    .status {
      color: #ff4b33;

      &.green {
        color: #36b24a;
      }
    }

    .option {
      margin-right: 10px;
      font-size: 14px;
      color: rgb(0, 101, 255);
      cursor: pointer;
    }
  }

  .el-pagination ::v-deep {
    margin-top: 30px;
    text-align: center;
    height: 24px;
    .el-pagination__sizes {
      margin-right: 0;
    }

    button {
      margin: 0;
      background-color: #fff;
      border: 1px solid #c0c5cc;
      border-radius: 2px;
    }

    .number {
      background-color: #fff;

      &:not(.disabled):hover {
        color: #0065ff;
      }

      &:not(.disabled).active {
        background-color: #0065ff;
        color: #fff;
      }
    }

    .el-input .el-input__inner {
      padding-left: 0;

      &:hover,
      &:focus {
        border-color: #0065ff;
      }
    }
  }

  .el-select ::v-deep {
    .el-select__tags-text {
      color: #3d3d3d;
    }
  }
}
</style>

<style>
.el-date-table td.start-date span,
.el-date-table td.end-date span {
  background-color: #0065ff;
}

.el-button--text span {
  color: #0065ff;
}

.el-button.is-plain:hover,
.el-button.is-plain:focus {
  color: #0065ff;
  border-color: #0065ff;
}
</style>

 src/views/dataReport/index.vue

New file
@@ -0,0 +1,71 @@
<template>
  <div class="data-report">
    <!-- 页头 -->
    <IndexHeader :opacity="false"></IndexHeader>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <!-- <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/manageCenter' }">管理中心</el-breadcrumb-item>
        <el-breadcrumb-item>推送管理</el-breadcrumb-item>
      </el-breadcrumb> -->
    </div>

    <!-- 主要内容 -->
    <div class="content">
      <dataReport></dataReport>
    </div>

    <!-- 页尾 -->
    <!-- <Footer :isBlack="true"></Footer> -->
  </div>
</template>

<script>
import IndexHeader from "@/components/IndexHeader"
// import DevList from "@/views/report/components/DevList"
import dataReport from "./components/dataReport.vue"
// import SettingBox from "@ /views/report/components/SettingBox"
import Footer from "@/components/Footer"

export default {
  components: {
    IndexHeader,
    dataReport
    // SettingBox,
    // Footer
  }
}
</script>

<style lang="scss" scoped>
.data-report {
  background-color: rgb(243, 245, 248);
  position: relative;
  min-height: 50vh;

  .breadcrumb {
    height: 10px;
  }
  .el-breadcrumb {
    margin-top: 48px;
    margin-bottom: 24px;

    ::v-deep span {
      color: #666;
    }
  }
  .content {
    min-height: 856px;
    box-sizing: border-box;
    background-color: #fff;
    width: 1036px;
    margin: 0 auto;
  }
  .Footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
</style>

 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 @@
    }
  }
}
</style>
.el-pagination ::v-deep {
  margin-top: 30px;

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

 src/views/manageCenter/index.vue

@@ -330,6 +330,14 @@
        },

        {
          name: "数据报表",
          icon: "/images/manageCenter/push.png",
          openPath: "/dataReport",
          path: "/dataReport",
          permission: ""
        },

        {
          name: "实时监控",
          icon: "/images/manageCenter/video.png",
          openPath: "/video",