hanbaoshan
2021-02-26 620f1f8e31cd69a752e48277570fd30f7b57d1d8
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<template>
  <div class="config-manage">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="存储设置" name="1">
        <div class="memory-setting">
          <div class="flex-box">
            <div>
              <label>原始视频保存到存储服务器</label>
              <el-switch
                v-model="memoryServe"
                active-color="#409eff"
                inactive-color="#dcdfe6"
                :active-value="true"
                :inactive-value="false"
                size="small"
              ></el-switch>
            </div>
            <div>
              <label>存储时间</label>
              <el-select v-model="memoryTime" size="small">
                <el-option value="week">一周</el-option>
                <el-option value="month">一个月</el-option>
              </el-select>
            </div>
          </div>
          <div class="flex-box">
            <div>
              <label>视频转储完成后格式化硬盘</label>
              <el-switch
                v-model="format"
                active-color="#409eff"
                inactive-color="#dcdfe6"
                :active-value="true"
                :inactive-value="false"
                size="small"
              ></el-switch>
            </div>
          </div>
          <div class="flex-box">
            <div>
              <label>视频文件超出时间自动删除</label>
              <el-switch
                v-model="autoRemove"
                active-color="#409eff"
                inactive-color="#dcdfe6"
                :active-value="true"
                :inactive-value="false"
                size="small"
              ></el-switch>
            </div>
            <div>
              <label>删除时间</label>
              <el-select v-model="removeTime" size="small">
                <el-option value="week">一周</el-option>
                <el-option value="month">一个月</el-option>
              </el-select>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="分析设置" name="2">
        <div class="analyze-setting">
          <div class="flex-box">
            <div>
              <label>视频分析周期:</label>
              <el-input-number
                v-model="analyzePeriod"
                controls-position="right"
                :min="1"
                :max="10"
                size="small"
              ></el-input-number>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="转储设置" name="3"></el-collapse-item>
    </el-collapse>
    <div class="btns text-right">
      <el-button type="primary" size="small">保存</el-button>
    </div>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      activeNames: ['1', '2'],
      memoryServe: false,
      memoryTime: '',
      format: false,
      autoRemove: true,
      removeTime: '',
      analyzePeriod: '',
    }
  },
  methods: {
    handleChange () {
 
    }
  }
}
</script>
 
<style lang="scss">
.config-manage {
  padding: 20px;
  .el-collapse-item__header {
    font-weight: bold;
    font-size: 15px;
  }
  .flex-box {
    margin-bottom: 10px;
    & > div {
      display: flex;
      align-items: center;
      margin-right: 10px;
      & + div {
        margin-left: 40px;
      }
      label {
        padding-right: 10px;
        color: #666;
      }
    }
  }
  .memory-setting {
    padding-left: 60px;
  }
  .analyze-setting {
    padding-left: 60px;
  }
  .btns {
    text-align: right;
    padding-top: 20px;
  }
}
</style>