试验管理

whychdw

2021-05-18 70bf38e79ff638d07b7a64979946ff1ebde50ab3

试验管理

 public/theme/normal.css

@@ -280,3 +280,24 @@
.table-cell .el-select {
    display: block;
}

.radio-button {
    background-color: #666666;
}
.radio-button:hover {
    color: #d5d5d5;
    background-color: #4c4c4c;
}
.radio-button.active {
    background-color: #F59A23;
}
.radio-button.active:hover {
    background-color: #d5861f;
}
.flex .el-select {
    display: block;
}
.flex .el-checkbox {
    line-height: 40px;
    vertical-align: middle;
}

 src/assets/images/404.png

 src/components/smallModule/RadioButton.vue

New file
@@ -0,0 +1,78 @@
<template>
  <div
      class="radio-button" :class="{'active': active}"
      @click="mouseClick">
    <span>{{ label }}</span>
  </div>
</template>

<script>
export default {
  name: "RadioButton",
  props: {
    label: {
      type: String,
      default: ""
    },
    name: {
      type: String,
      default: ""
    },
    value: {
      type: String,
      default: ""
    },
    url: {
      type: String,
      default: ""
    },
  },
  data() {
    return {

    }
  },
  methods: {
    mouseClick() {
      this.$emit('click', {
        name: this.name,
        url: this.url,
      });
    },
  },
  computed: {
    active() {
      // 未定义name
      if(this.name == "") {
        return false;
      }
      // 检测name和value相等
      if(this.name == this.value) {
        return true;
      }else {
        return false;
      }
    },
  },
  mounted() {

  },
  destroyed() {

  }
}
</script>

<style scoped>
.radio-button {
  display: inline-block;
  font-size: 12px;
  padding: 6px 8px;
  min-width: 110px;
  text-align: center;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
}

</style>

 src/components/smallModule/TestCard.vue

New file
@@ -0,0 +1,67 @@
<template>
  <div class="test-card">
    <div class="test-card-title"><slot name="title">{{title}}</slot></div>
    <div class="test-card-content">
      <slot></slot>
    </div>
    <div class="test-card-footer" v-if="!noFooter">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "TestCard",
  props: {
    title: {
      type: String,
      default: ""
    },
    noFooter: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {

  },
  computed: {

  },
  mounted() {

  }
}
</script>

<style scoped>
.test-card {
  background-color: #FFFFFF;
  box-sizing: border-box;
  border: 1px solid #e2e2e2;
}
.test-card-title {
  background-color: rgb(242, 242, 242);
  line-height: 50px;
  padding-left: 16px;
  font-size: 16px;
  font-weight: 700;
  color: #666666;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑, sans-serif;
  box-sizing: border-box;
  border-bottom: 1px solid #e2e2e2;
}
.test-card-content {
  box-sizing: border-box;
  padding: 8px;
}
.test-card-footer {
  padding-right: 16px;
  box-sizing: border-box;
  border-top: 1px solid #e2e2e2;
}
</style>

 src/components/smallModule/mwAvatar.vue

New file
@@ -0,0 +1,31 @@
<template>
  <div class="mw-avatar">
    <div class="mw-avatar-icon">
      <el-avatar icon="el-icon-user-solid"></el-avatar>
    </div>
    <div class="mw-avatar-text"><slot>{{username}}</slot></div>
  </div>
</template>

<script>
export default {
  name: "mwAvatar",
  props: {
    username: {
      type: String,
      default: ""
    }
  }
}
</script>

<style scoped>
.mw-avatar {
  display: inline-block;
  margin-right: 16px;
}
.mw-avatar-text {
  text-align: center;
  color: #999999;
}
</style>

 src/components/smallModule/mwTestStep.vue

New file
@@ -0,0 +1,82 @@
<template>
    <div class="mw-test-step">
        <div class="mw-test-step-title">试验点完成情况</div>
        <div class="mw-test-step-content">
            <step-list
                v-for="(item, index) in list" :key="'key'+index"
                :data="item"
                :end="(list.length-1) == index"></step-list>
        </div>
    </div>
</template>

<script>
import StepList from "@/components/smallModule/stepList";
export default {
    name: "mwTestStep",
    components: {
        StepList
    },
    props: {
        list: {
            type: Array,
            default() {
                return [
                    {
                        name: '试验一',
                        status: 2,
                        start: '试验开始时间  10:30',
                        end: '完成时间  10:30'
                    },
                    {
                        name: '试验二',
                        status: 2,
                        start: '试验开始时间  10:30',
                        end: '完成时间  10:30'
                    },
                    {
                        name: '试验三',
                        status: 2,
                        start: '试验开始时间  10:30',
                        end: '完成时间  10:30'
                    },
                    {
                        name: '试验四',
                        status: 1,
                        start: '试验开始时间  10:30',
                        end: ''
                    },
                    {
                        name: '试验五',
                        status: 0,
                        start: '计划开始时间  10:30',
                        end: ''
                    },
                    {
                        name: '试验六',
                        status: 0,
                        start: '计划开始时间  10:30',
                        end: ''
                    },
                ]
            }
        }
    },
    data() {
        return {}
    },
}
</script>

<style scoped>
.mw-test-step {
    padding: 16px 16px;
    background-color: rgba(44, 51, 119, 1);
}
.mw-test-step-title {
    font-size: 14px;
    font-weight: 700;
    color: rgb(245, 154, 35);
    margin-bottom: 16px;
}
</style>

 src/components/smallModule/stepList.vue

New file
@@ -0,0 +1,104 @@
<template>
    <div class="step-list">
        <div class="step-item">
            {{ data.name }}
        </div>
        <div class="step-item">
            <div class="step-status-circle" :class="status.class"></div>
            <div class="step-status-line" v-if="!end"></div>
        </div>
        <div class="step-item">
            {{ status.text }}
        </div>
        <div class="step-item">
            {{ data.start }}
        </div>
        <div class="step-item">
            {{ data.end }}
        </div>
    </div>
</template>

<script>
export default {
    name: "stepList",
    props: {
        end: {
            type: Boolean,
            default: false,
        },
        data: {
            type: Object,
            default() {
                return {
                    name: '',
                    status: 0,
                    start: '',
                    end: ''
                }
            }
        },
    },
    data() {
        return {}
    },
    computed: {
        status() {
            let data = this.data;
            let result = {
                class: 'not-start',
                text: '未开始'
            };
            switch(data.status) {
                case 1:
                    result.class = 'in-process';
                    result.text = '进行中';
                    break;
                case 2:
                    result.class = 'complete';
                    result.text = '已完成';
                    break;
            }
            return result;
        }
    }
}
</script>

<style scoped>
.step-list {
    display: flex;
    flex-direction: row;
    font-size: 13px;
}
.step-item {
    padding-right: 36px;
}
.step-status-circle {
    background-color: #FFFFFF;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    border-radius: 50%;
    border-width: 3px;
    border-style: solid;
}
.step-status-circle.complete {
    border-color: #666EE8;
}
.step-status-circle.in-process {
    border-color: #82e866;
}
.step-status-circle.not-start {
    border-color: #686868;
}
.step-status-line {
    position: relative;
    width: 2px;
    background-color: #999999;
    background-image: linear-gradient(to right,#999999, #FFFFFF, #999999);
    height: 30px;
    margin-left: 50%;
    left: -1px;
}
</style>

 src/pages/404/index.vue

New file
@@ -0,0 +1,28 @@
<template>
    <div class="not-found">
        <div class="not-found-content">
            <div class="content-container">
                <img src="../../assets/images/404.png">
            </div>
        </div>
        
    </div>
</template>

<style scoped>
.not-found  {
    display: flex;
    height: 100%;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
}
.content-container {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
    margin: 0 auto;
}
</style>


 src/pages/test/testManager/index.vue

New file
@@ -0,0 +1,49 @@
<template>
  <div class="contentBox">
    <div class="content-wrapper">
      <div class="content-wrapper-title">
        当前试验
      </div>
      <div class="content-wrapper-container">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import RadioButton from "@/components/smallModule/RadioButton";

export default {
  name: "testManager",
  components: {RadioButton},
  data() {
    return {
      active: 'testing',
    }
  },
  methods: {
    radioChange(info) {
      this.active = info.name;
    }
  },
  mounted() {
    this.$router.push('/index/testManager/testing');
  },
  destroyed() {

  }
}
</script>

<style scoped>
.contentBox {
  display: flex;
  justify-content: center;
}

.content-wrapper-title {
  margin-bottom: 16px;
  text-align: center;
}
</style>

 src/pages/test/testManager/testing.vue

New file
@@ -0,0 +1,122 @@
<template>
    <div class="flex-wrapper">
        <test-card :title="info.name">
            <div class="form-wrapper">
                <div class="form-item inline">
                    <label class="form-item-label">试验项目名称：</label>
                    <span class="form-item-value">2021年5月XX项目试验</span>
                </div>
                <div class="form-item inline">
                    <label class="form-item-label">试验创建人：</label>
                    <span class="form-item-value">李博士</span>
                </div>
                <div class="form-item">
                    <label class="form-item-label">试验创建时间：</label>
                    <span class="form-item-value">2021/5/7 11:08:53</span>
                </div>
                <div class="form-item">
                    <label class="form-item-label">预计完成时间：</label>
                    <span class="form-item-value">2021/5/7 15:00:00</span>
                </div>
                <div class="form-item flex">
                    <label class="form-item-label">试验类型：</label>
                    <div class="form-item-value">
                        <el-select size="small"></el-select>
                    </div>
                </div>
                <div class="form-item flex">
                    <label class="form-item-label">受试设备：</label>
                    <div class="form-item-value">
                        <el-checkbox readonly="readonly">设备一</el-checkbox>
                        <el-checkbox readonly="readonly">设备二</el-checkbox>
                        <el-checkbox readonly="readonly">设备三</el-checkbox>
                    </div>
                </div>
                <div class="form-item flex">
                    <label class="form-item-label">参试人员：</label>
                    <div class="form-item-value">
                        <mw-avatar>李小红</mw-avatar>
                        <mw-avatar>张小刚</mw-avatar>
                    </div>
                </div>
            </div>
            <div class="form-footer" slot="footer">
                <el-button type="primary" size="mini">进入试验</el-button>
            </div>
        </test-card>
        <test-card no-footer>
            <div slot="title" class="page-panel-title">
                <span class="title-pillar"></span>
                试验进度
            </div>
            <mw-test-step></mw-test-step>
        </test-card>
    </div>
</template>

<script>
import TestCard from "@/components/smallModule/TestCard";
import MwAvatar from "@/components/smallModule/mwAvatar";
import MwTestStep from "@/components/smallModule/mwTestStep";

export default {
    name: "testManagerTesting",
    components: {
        MwTestStep,
        MwAvatar,
        TestCard
    },
    data() {
        return {
            info: {
                name: '空载试验',
            },
        }
    },
    methods: {},
    computed: {},
    mounted() {

    },
    destroyed() {

    }
}
</script>

<style scoped>
.flex-wrapper {
    display: flex;
    flex-direction: row;
}

.form-wrapper {
    color: #999999;
    font-size: 14px;
}

.form-item {
    margin-bottom: 8px;
}

.form-item.inline {
    display: inline-block;
    margin-right: 32px;
}

.form-item.flex {
    display: flex;
    flex-direction: row;
}

.form-item.flex .form-item-value {
    flex: 1;
}

.form-item .form-item-label {
    display: inline-block;
    width: 108px;
    line-height: 40px;
    text-align: right;
}
</style>

 src/pages/warn/warnRule.vue

@@ -74,7 +74,8 @@
          </template>
        </el-table-column>
        <el-table-column
            prop="test"
            prop="tools"
            fixed="right"
            label="编辑"
            min-width="180px"
            align="center"
@@ -144,9 +145,14 @@
      let rules = warnRules();
      this.warnLevels = rules.levels;
      let item = getItemByValue(this.deviceFlag, rules.list);
      if(item == -1) {
        this.$router.push('/index/xx')
      }else {
      this.title = item.title;
      this.devTypes = item.types;
      this.searchWarnRule();
      }

    },
    // 查询告警
    searchWarnRule() {

 src/router/routes.js

@@ -117,6 +117,32 @@
            name: 'dcSwitchboard',
            meta: {},
            component: (resolve) => require(['@/pages/dcSwitchboard/dcSwitchboard.vue'], resolve),
        },
        {
            path: 'testManager',
            name: 'testManager',
            meta: {
                name: '试验管理',
            },
            component: (resolve) => require(['@/pages/test/testManager/index.vue'], resolve),
            children: [
                {
                    path: 'testing',
                    name: 'testing',
                    meta: {
                        name: '试验中',
                    },
                    component: (resolve) => require(['@/pages/test/testManager/testing.vue'], resolve),
                }
            ],
        },
        {
            path: '*',
            name: '404',
            meta: {
                name: '404',
            },
            component: (resolve) => require(['@/pages/404/index.vue'], resolve),
          }
    ]
}];