试验项目管理及历史数据查询静态数据提交

whyczyk

2021-05-14 80e866d9b71a41eff4641d5a1da4acd75d5a0ee2

试验项目管理及历史数据查询静态数据提交

 package-lock.json

@@ -1695,16 +1695,6 @@
          "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
          "dev": true
        },
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1606792266928&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "cacache": {
          "version": "13.0.1",
          "resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz?cache=0&sync_timestamp=1594429684526&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
@@ -1731,53 +1721,6 @@
            "unique-filename": "^1.1.1"
          }
        },
        "chalk": {
          "version": "4.1.1",
          "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.1.tgz?cache=0&sync_timestamp=1618995384030&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.1.tgz",
          "integrity": "sha1-yAs/qyi/Y3HmhjMl7uZ+YYt35q0=",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz",
          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.0",
          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
@@ -1792,16 +1735,6 @@
          "requires": {
            "figgy-pudding": "^3.5.1",
            "minipass": "^3.1.1"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1608035266405&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        },
        "terser-webpack-plugin": {
@@ -1819,18 +1752,6 @@
            "source-map": "^0.6.1",
            "terser": "^4.6.12",
            "webpack-sources": "^1.4.3"
          }
        },
        "vue-loader-v16": {
          "version": "npm:vue-loader@16.2.0",
          "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.2.0.tgz?cache=0&sync_timestamp=1616797064978&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.2.0.tgz",
          "integrity": "sha1-BGpTMI3Ufljv4g3ewe3sAnzjtG4=",
          "dev": true,
          "optional": true,
          "requires": {
            "chalk": "^4.1.0",
            "hash-sum": "^2.0.0",
            "loader-utils": "^2.0.0"
          }
        }
      }
@@ -10612,6 +10533,87 @@
        }
      }
    },
    "vue-loader-v16": {
      "version": "npm:vue-loader@16.2.0",
      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
      "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
      "dev": true,
      "optional": true,
      "requires": {
        "chalk": "^4.1.0",
        "hash-sum": "^2.0.0",
        "loader-utils": "^2.0.0"
      },
      "dependencies": {
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "chalk": {
          "version": "4.1.1",
          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.0",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        }
      }
    },
    "vue-router": {
      "version": "3.4.9",
      "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.4.9.tgz?cache=0&sync_timestamp=1607347284428&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.4.9.tgz",

 src/pages/dataManage/historyData.vue

New file
@@ -0,0 +1,173 @@
<template>
  <div class="container">
    <flex-layout>
      <page-panel class="page-list-banner" title="数据筛选" :border="true" slot="header">
        <div class="table-layout">
          <div class="table-row">
            <div class="table-cell text-right">试验类型</div>
            <div class="table-cell">
              <el-select size="small" v-model="type">
                <el-option label="全部" :value="null"></el-option>
                <el-option v-for="(item, index) in types" :key="'job_' + index" :label="item.value" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="table-cell text-right">时间范围</div>
            <div class="table-cell">
              <el-date-picker v-model="startTime" size="small" class="time_box" type="date" placeholder="选择日期"
                value-format="yyyy-MM-dd"></el-date-picker>
              -
              <el-date-picker v-model="endTime" size="small" class="time_box" type="date" placeholder="选择日期"
                value-format="yyyy-MM-dd"></el-date-picker>
            </div>
          </div>
        </div>
        <div class="banner-btn-grp">
          <div class="el-pagination-btns">
            <el-button type="primary" @click="getList" round size="mini" icon="el-icon-search">查询
            </el-button>
          </div>
          <div class="el-pagination-btns">
            <el-button type="warning" @click="resetParams" round size="mini" icon="el-icon-refresh-right">重置</el-button>
          </div>
        </div>
      </page-panel>
      <page-panel title="数据列表" class="flex-page-content">
        <template slot="btnGrp">
          <el-button type="primary" @click="resetParams" size="mini" icon="el-icon-download">导入</el-button>
          <el-button type="primary" @click="resetParams" size="mini" icon="el-icon-plus">添加</el-button>
        </template>
        <el-table stripe size="mini" header-row-class-name="header-primary" height="100%" :data="table.datas"
          v-loading="table.loading" element-loading-background="rgba(0, 0, 0, 0.8)">
          <el-table-column :prop="item.prop" :label="item.label" :width="item.width" :resizable="false" align="center"
            v-for="(item,index) in table.headers" :key="index">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
              <el-button type="danger" size="mini" @click="remove(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </page-panel>
      <div class="flex-page-footer" slot="footer">
        <el-pagination size="mini" :current-page="page.pageCurr" :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.pageAll"
          @current-change="currentChange" @size-change="sizeChange"></el-pagination>
      </div>
    </flex-layout>
  </div>
</template>

<script>
  import pagePanel from '@/components/pagePanel';
  import {
    operationLogPage
  } from './js/api';

  export default {
    data() {
      return {
        content: null,
        types: [{
          value: '新增'
        }, {
          value: '删除'
        }, {
          value: '修改'
        }, ],
        type: null,
        startTime: null,
        endTime: null,
        table: {
          headers: [{
            prop: "createTime",
            label: "历史数据时间",
            width: 180
          }, {
            prop: "type",
            label: "实验名称",
            width: 140
          }, {
            prop: "userName",
            label: "试验类型",
            width: 140
          }, {
            prop: "terminalIp",
            label: "试验时长",
            width: 120
          }, {
            prop: "content",
            label: "试验负责人",
          }],
          datas: [],
          loading: false
        },
        page: {
          pageCurr: 1,
          pageSize: 10,
          pageAll: 0
        }
      };
    },
    components: {
      pagePanel
    },
    methods: {
      // 查询用户列表
      getList() {
        let params = {
          pageNum: this.page.pageCurr,
          pageSize: this.page.pageSize
        };
        let data = {
          content: this.content,
          type: this.type,
          startTime: this.startTime,
          endTime: this.endTime,
        };

        operationLogPage(params, data).then((res) => {
          console.log(res);
          res = res.data.data;
          this.page.pageAll = res.total;
          this.table.datas = res.list;
        }).catch((err) => {
          console.log(err)
        });
      },
      // 重置搜索条件
      resetParams() {

      },
      edit() {

      },
      currentChange(value) {
        this.page.pageCurr = value;
        this.getList();
      },
      sizeChange(value) {
        this.page.pageCurr = 1;
        this.page.pageSize = value;
        this.getList();
      }
    },
    mounted() {
      this.getList();
    },
    beforeDestroy() {

    }
  };
</script>

<style scoped>
  .container {
    height: 100%;
  }

  .page-list-banner {
    margin-bottom: 10px;
  }
</style>

 src/pages/dataManage/js/api.js

New file
@@ -0,0 +1,13 @@
import axios from "@/assets/js/axios";

/**
 * 操作日志-查询分页
 */
export const operationLogPage = (page, data) => {
  return axios({
    method: "POST",
    url: "/operationLog/page",
    params: page,
    data: data
  });
}

 src/pages/test/js/api.js

New file
@@ -0,0 +1,13 @@
import axios from "@/assets/js/axios";

/**
 * 操作日志-查询分页
 */
export const operationLogPage = (page, data) => {
  return axios({
    method: "POST",
    url: "/operationLog/page",
    params: page,
    data: data
  });
}

 src/pages/test/projectMag.vue

New file
@@ -0,0 +1,213 @@
<template>
  <div class="container">
    <flex-layout>
      <page-panel class="page-list-banner" :border="false" slot="header">
        <div class="dataListCon">
          <div class="listItem">
            <div class="name">项目总数</div>
            <div class="data">80</div>
          </div>
          <div class="listItem">
            <div class="name">进行中</div>
            <div class="data">20</div>
          </div>
          <div class="listItem">
            <div class="name">已延期</div>
            <div class="data">20</div>
          </div>
          <div class="listItem">
            <div class="name">已完成</div>
            <div class="data">20</div>
          </div>
          <div class="listItem">
            <div class="name">已取消</div>
            <div class="data">20</div>
          </div>
        </div>
      </page-panel>
      <page-panel class="flex-page-content">
        <div class="searchCon" slot="title">
          <div class="table-layout">
            <div class="table-row">
              <!-- 查询条件 -->
              <div class="table-cell text-right">输入查询</div>
              <div class="table-cell">
                <el-input type="text" v-model.trim="content" size="small" placeholder="内容信息"></el-input>
              </div>
              <div class="table-cell text-right">操作类型</div>
              <div class="table-cell">
                <el-select size="small" v-model="type">
                  <el-option label="全部" :value="null"></el-option>
                  <el-option v-for="(item, index) in types" :key="'job_' + index" :label="item.value"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="el-pagination-btns" style="margin-right:80px;margin-left:20px">
            <el-button type="primary" @click="getList" round size="mini" icon="el-icon-search">查询
            </el-button>
          </div>
        </div>
        <template slot="btnGrp">
          <el-button type="primary" @click="resetParams" size="mini" icon="el-icon-plus">添加</el-button>
        </template>
        <el-table stripe size="mini" header-row-class-name="header-primary" height="100%" :data="table.datas"
          v-loading="table.loading" element-loading-background="rgba(0, 0, 0, 0.8)">
          <!-- <el-table-column type="index" width="50" label="序号"></el-table-column> -->
          <el-table-column :prop="item.prop" :label="item.label" :width="item.width" :resizable="false" align="center"
            v-for="(item,index) in table.headers" :key="index">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
              <el-button type="danger" size="mini" @click="remove(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </page-panel>
      <div class="flex-page-footer" slot="footer">
        <el-pagination size="mini" :current-page="page.pageCurr" :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.pageAll"
          @current-change="currentChange" @size-change="sizeChange"></el-pagination>
      </div>
    </flex-layout>
  </div>
</template>

<script>
  import pagePanel from '@/components/pagePanel';
  import {
    operationLogPage
  } from './js/api';

  export default {
    data() {
      return {
        content: null,
        types: [{
          value: '新增'
        }, {
          value: '删除'
        }, {
          value: '修改'
        }, ],
        type: null,
        table: {
          headers: [{
            prop: "createTime",
            label: "项目名称",
            width: 180
          }, {
            prop: "type",
            label: "项目状态",
            width: 140
          }, {
            prop: "userName",
            label: "创建时间",
            width: 140
          }, {
            prop: "terminalIp",
            label: "参与人员",
          }],
          datas: [],
          loading: false
        },
        page: {
          pageCurr: 1,
          pageSize: 10,
          pageAll: 0
        }
      };
    },
    components: {
      pagePanel
    },
    methods: {
      // 查询用户列表
      getList() {
        let params = {
          pageNum: this.page.pageCurr,
          pageSize: this.page.pageSize
        };
        let data = {
          content: this.content,
          type: this.type,
        };

        operationLogPage(params, data).then((res) => {
          console.log(res);
          res = res.data.data;
          this.page.pageAll = res.total;
          this.table.datas = res.list;
        }).catch((err) => {
          console.log(err)
        });
      },
      // 重置搜索条件
      resetParams() {

      },
      edit() {

      },
      currentChange(value) {
        this.page.pageCurr = value;
        this.getList();
      },
      sizeChange(value) {
        this.page.pageCurr = 1;
        this.page.pageSize = value;
        this.getList();
      }
    },
    mounted() {
      this.getList();
    },
    beforeDestroy() {

    }
  };
</script>

<style scoped>
  .container {
    height: 100%;
  }

  .page-list-banner {
    margin-bottom: 10px;
  }

  .searchCon {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .dataListCon {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .dataListCon .listItem {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-bottom: 10px;
  }

  .dataListCon .listItem .name {
    margin-bottom: 6px;
  }

  .dataListCon .listItem .data {
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
  }
</style>