Commit 2735a7a98b8d0779b166c6e18970109499b1cb87
1 parent
5623b5ee
全局样式适配三个隐藏页面
Showing
3 changed files
with
109 additions
and
132 deletions
web_src/src/components/setting/Media.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div id="SettingForMedia"> | ||
| 3 | - <el-container> | ||
| 4 | - <el-header> | ||
| 5 | - <uiHeader></uiHeader> | ||
| 6 | - </el-header> | ||
| 7 | - <el-main> | ||
| 8 | - <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;"> | ||
| 9 | - <span style="font-size: 1rem; font-weight: bold;">媒体服务</span> | ||
| 10 | - </div> | ||
| 11 | - <div style="width: 60%; margin:0 auto; background-color: #FFFFFF; position: relative; padding: 5rem 6.5rem; text-align: left;font-size: 14px; max-width: 400px"> | ||
| 12 | - <el-form ref="form" :rules="rules" :model="form" label-width="140px"> | ||
| 13 | - <el-form-item label="IP" prop="IP"> | ||
| 14 | - <el-input v-model="form.IP" clearable></el-input> | ||
| 15 | - </el-form-item> | ||
| 16 | - <el-form-item label="公网IP" prop="wanIp"> | ||
| 17 | - <el-input v-model="form.wanIp" clearable></el-input> | ||
| 18 | - </el-form-item> | ||
| 19 | - <el-form-item label="HOOK IP" prop="hookIp"> | ||
| 20 | - <el-input v-model="form.hookIp" clearable></el-input> | ||
| 21 | - </el-form-item> | ||
| 22 | - <el-form-item label="HTTP端口" > | ||
| 23 | - <el-input v-model.number="form.httpPort" clearable></el-input> | ||
| 24 | - </el-form-item> | ||
| 25 | - <el-form-item label="HTTP SSL端口" > | ||
| 26 | - <el-input v-model.number="form.httpSSlPort" clearable></el-input> | ||
| 27 | - </el-form-item> | ||
| 28 | - <el-form-item label="RTMP端口" > | ||
| 29 | - <el-input v-model.number="form.rtmpPort" clearable></el-input> | ||
| 30 | - </el-form-item> | ||
| 31 | - <el-form-item label="RTMP SSL端口" > | ||
| 32 | - <el-input v-model.number="form.rtmpSSlPort" clearable></el-input> | ||
| 33 | - </el-form-item> | ||
| 34 | - <el-form-item label="RTSP端口" > | ||
| 35 | - <el-input v-model.number="form.rtspPort" clearable></el-input> | ||
| 36 | - </el-form-item> | ||
| 37 | - <el-form-item label="RTSP SSL端口" > | ||
| 38 | - <el-input v-model.number="form.rtspSSLPort" clearable></el-input> | ||
| 39 | - </el-form-item> | ||
| 40 | - <el-form-item label="RTP端口" > | ||
| 41 | - <el-input v-model.number="form.rtpProxyPort" clearable></el-input> | ||
| 42 | - </el-form-item> | ||
| 43 | - <el-form-item label="自动点播" > | ||
| 44 | - <el-switch v-model="form.autoApplyPlay"></el-switch> | ||
| 45 | - </el-form-item> | ||
| 46 | - <el-form-item label="接口密钥" prop="secret"> | ||
| 47 | - <el-input v-model="form.secret" clearable></el-input> | ||
| 48 | - </el-form-item> | ||
| 49 | - <el-form-item label="无人观看触发时长" > | ||
| 50 | - <el-input v-model.number="form.streamNoneReaderDelayMS" clearable></el-input> | ||
| 51 | - </el-form-item> | ||
| 52 | - <el-form-item label="自动配置" > | ||
| 53 | - <el-switch v-model="form.autoConfig"></el-switch> | ||
| 54 | - </el-form-item> | ||
| 55 | - <el-form-item label="使用多端口" > | ||
| 56 | - <el-switch v-model="form.rtp.enable"></el-switch> | ||
| 57 | - </el-form-item> | ||
| 58 | - <el-form-item label="端口范围" > | ||
| 59 | - <el-input v-model.number="form.rtp.portRange" clearable></el-input> | ||
| 60 | - </el-form-item> | ||
| 61 | - <el-form-item label="DOCKER智能识别"> | ||
| 62 | - <el-input type="textarea" v-model="dockerStr"></el-input> | ||
| 63 | - </el-form-item> | 2 | + <div id="SettingForMedia" style="width: 100%"> |
| 3 | + <div class="page-header"> | ||
| 4 | + <div class="page-title">媒体服务</div> | ||
| 5 | + </div> | ||
| 6 | + <div | ||
| 7 | + style="width: 60%; margin:0 auto; background-color: #FFFFFF; position: relative; padding: 5rem 6.5rem; text-align: left;font-size: 14px; max-width: 400px"> | ||
| 8 | + <el-form ref="form" :rules="rules" :model="form" label-width="140px"> | ||
| 9 | + <el-form-item label="IP" prop="IP"> | ||
| 10 | + <el-input v-model="form.IP" clearable></el-input> | ||
| 11 | + </el-form-item> | ||
| 12 | + <el-form-item label="公网IP" prop="wanIp"> | ||
| 13 | + <el-input v-model="form.wanIp" clearable></el-input> | ||
| 14 | + </el-form-item> | ||
| 15 | + <el-form-item label="HOOK IP" prop="hookIp"> | ||
| 16 | + <el-input v-model="form.hookIp" clearable></el-input> | ||
| 17 | + </el-form-item> | ||
| 18 | + <el-form-item label="HTTP端口"> | ||
| 19 | + <el-input v-model.number="form.httpPort" clearable></el-input> | ||
| 20 | + </el-form-item> | ||
| 21 | + <el-form-item label="HTTP SSL端口"> | ||
| 22 | + <el-input v-model.number="form.httpSSlPort" clearable></el-input> | ||
| 23 | + </el-form-item> | ||
| 24 | + <el-form-item label="RTMP端口"> | ||
| 25 | + <el-input v-model.number="form.rtmpPort" clearable></el-input> | ||
| 26 | + </el-form-item> | ||
| 27 | + <el-form-item label="RTMP SSL端口"> | ||
| 28 | + <el-input v-model.number="form.rtmpSSlPort" clearable></el-input> | ||
| 29 | + </el-form-item> | ||
| 30 | + <el-form-item label="RTSP端口"> | ||
| 31 | + <el-input v-model.number="form.rtspPort" clearable></el-input> | ||
| 32 | + </el-form-item> | ||
| 33 | + <el-form-item label="RTSP SSL端口"> | ||
| 34 | + <el-input v-model.number="form.rtspSSLPort" clearable></el-input> | ||
| 35 | + </el-form-item> | ||
| 36 | + <el-form-item label="RTP端口"> | ||
| 37 | + <el-input v-model.number="form.rtpProxyPort" clearable></el-input> | ||
| 38 | + </el-form-item> | ||
| 39 | + <el-form-item label="自动点播"> | ||
| 40 | + <el-switch v-model="form.autoApplyPlay"></el-switch> | ||
| 41 | + </el-form-item> | ||
| 42 | + <el-form-item label="接口密钥" prop="secret"> | ||
| 43 | + <el-input v-model="form.secret" clearable></el-input> | ||
| 44 | + </el-form-item> | ||
| 45 | + <el-form-item label="无人观看触发时长"> | ||
| 46 | + <el-input v-model.number="form.streamNoneReaderDelayMS" clearable></el-input> | ||
| 47 | + </el-form-item> | ||
| 48 | + <el-form-item label="自动配置"> | ||
| 49 | + <el-switch v-model="form.autoConfig"></el-switch> | ||
| 50 | + </el-form-item> | ||
| 51 | + <el-form-item label="使用多端口"> | ||
| 52 | + <el-switch v-model="form.rtp.enable"></el-switch> | ||
| 53 | + </el-form-item> | ||
| 54 | + <el-form-item label="端口范围"> | ||
| 55 | + <el-input v-model.number="form.rtp.portRange" clearable></el-input> | ||
| 56 | + </el-form-item> | ||
| 57 | + <el-form-item label="DOCKER智能识别"> | ||
| 58 | + <el-input type="textarea" v-model="dockerStr"></el-input> | ||
| 59 | + </el-form-item> | ||
| 64 | 60 | ||
| 65 | - <el-form-item> | ||
| 66 | - <div style="float: right;"> | ||
| 67 | - <el-button type="primary" @click="onSubmit">保存</el-button> | ||
| 68 | -<!-- <el-button @click="close">取消</el-button>--> | ||
| 69 | - </div> | 61 | + <el-form-item> |
| 62 | + <div style="float: right;"> | ||
| 63 | + <el-button type="primary" @click="onSubmit">保存</el-button> | ||
| 64 | + <!-- <el-button @click="close">取消</el-button>--> | ||
| 65 | + </div> | ||
| 70 | 66 | ||
| 71 | - </el-form-item> | ||
| 72 | - </el-form> | ||
| 73 | - </div> | ||
| 74 | - | ||
| 75 | - | ||
| 76 | - </el-main> | ||
| 77 | - </el-container> | 67 | + </el-form-item> |
| 68 | + </el-form> | ||
| 69 | + </div> | ||
| 78 | </div> | 70 | </div> |
| 79 | </template> | 71 | </template> |
| 80 | 72 | ||
| 81 | <script> | 73 | <script> |
| 82 | import uiHeader from '../../layout/UiHeader.vue' | 74 | import uiHeader from '../../layout/UiHeader.vue' |
| 75 | + | ||
| 83 | export default { | 76 | export default { |
| 84 | name: "SettingForMedia", | 77 | name: "SettingForMedia", |
| 85 | components: { | 78 | components: { |
| @@ -107,9 +100,9 @@ export default { | @@ -107,9 +100,9 @@ export default { | ||
| 107 | }, | 100 | }, |
| 108 | 101 | ||
| 109 | rules: { | 102 | rules: { |
| 110 | - IP: [{ required: true, message: "请输入名称", trigger: "blur" }], | ||
| 111 | - wanIp: [{ required: false, message: "请输入应用名", trigger: "blur" }], | ||
| 112 | - hookIp: [{ required: false, message: "请输入流ID", trigger: "blur" }], | 103 | + IP: [{required: true, message: "请输入名称", trigger: "blur"}], |
| 104 | + wanIp: [{required: false, message: "请输入应用名", trigger: "blur"}], | ||
| 105 | + hookIp: [{required: false, message: "请输入流ID", trigger: "blur"}], | ||
| 113 | }, | 106 | }, |
| 114 | } | 107 | } |
| 115 | } | 108 | } |
web_src/src/components/setting/Sip.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div id="SettingForSip"> | ||
| 3 | - <el-container> | ||
| 4 | - <el-header> | ||
| 5 | - <uiHeader></uiHeader> | ||
| 6 | - </el-header> | ||
| 7 | - <el-main> | ||
| 8 | - <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;"> | ||
| 9 | - <span style="font-size: 1rem; font-weight: bold;">国标服务</span> | ||
| 10 | - </div> | ||
| 11 | - <div style="width: 60%; margin:0 auto; background-color: #FFFFFF; position: relative; padding: 5rem 6.5rem; text-align: left;font-size: 14px; max-width: 400px"> | ||
| 12 | - <el-form ref="form" :rules="rules" :model="form" label-width="140px"> | ||
| 13 | - <el-form-item label="ip" prop="ip"> | ||
| 14 | - <el-input v-model="form.ip" clearable></el-input> | ||
| 15 | - </el-form-item> | ||
| 16 | - <el-form-item label="端口" prop="port"> | ||
| 17 | - <el-input v-model.number="form.port" clearable></el-input> | ||
| 18 | - </el-form-item> | ||
| 19 | - <el-form-item label="域" prop="domain"> | ||
| 20 | - <el-input v-model="form.domain" clearable></el-input> | ||
| 21 | - </el-form-item> | ||
| 22 | - <el-form-item label="id" prop="id"> | ||
| 23 | - <el-input v-model="form.id" clearable></el-input> | ||
| 24 | - </el-form-item> | ||
| 25 | - <el-form-item label="密码" prop="password"> | ||
| 26 | - <el-input v-model="form.password" clearable></el-input> | ||
| 27 | - </el-form-item> | 2 | + <div id="SettingForSip" style="width: 100%"> |
| 3 | + <div class="page-header"> | ||
| 4 | + <div class="page-title">国标服务</div> | ||
| 5 | + </div> | ||
| 6 | + <div | ||
| 7 | + style="width: 60%; margin:0 auto; background-color: #FFFFFF; position: relative; padding: 5rem 6.5rem; text-align: left;font-size: 14px; max-width: 400px"> | ||
| 8 | + <el-form ref="form" :rules="rules" :model="form" label-width="140px"> | ||
| 9 | + <el-form-item label="ip" prop="ip"> | ||
| 10 | + <el-input v-model="form.ip" clearable></el-input> | ||
| 11 | + </el-form-item> | ||
| 12 | + <el-form-item label="端口" prop="port"> | ||
| 13 | + <el-input v-model.number="form.port" clearable></el-input> | ||
| 14 | + </el-form-item> | ||
| 15 | + <el-form-item label="域" prop="domain"> | ||
| 16 | + <el-input v-model="form.domain" clearable></el-input> | ||
| 17 | + </el-form-item> | ||
| 18 | + <el-form-item label="id" prop="id"> | ||
| 19 | + <el-input v-model="form.id" clearable></el-input> | ||
| 20 | + </el-form-item> | ||
| 21 | + <el-form-item label="密码" prop="password"> | ||
| 22 | + <el-input v-model="form.password" clearable></el-input> | ||
| 23 | + </el-form-item> | ||
| 28 | 24 | ||
| 29 | 25 | ||
| 30 | - <el-form-item> | ||
| 31 | - <div style="float: right;"> | ||
| 32 | - <el-button type="primary" @click="onSubmit">保存</el-button> | ||
| 33 | -<!-- <el-button @click="close">取消</el-button>--> | ||
| 34 | - </div> | 26 | + <el-form-item> |
| 27 | + <div style="float: right;"> | ||
| 28 | + <el-button type="primary" @click="onSubmit">保存</el-button> | ||
| 29 | + <!-- <el-button @click="close">取消</el-button>--> | ||
| 30 | + </div> | ||
| 35 | 31 | ||
| 36 | - </el-form-item> | ||
| 37 | - </el-form> | ||
| 38 | - </div> | ||
| 39 | - | ||
| 40 | - | ||
| 41 | - </el-main> | ||
| 42 | - </el-container> | 32 | + </el-form-item> |
| 33 | + </el-form> | ||
| 34 | + </div> | ||
| 43 | </div> | 35 | </div> |
| 44 | </template> | 36 | </template> |
| 45 | 37 | ||
| 46 | <script> | 38 | <script> |
| 47 | import uiHeader from '../../layout/UiHeader.vue' | 39 | import uiHeader from '../../layout/UiHeader.vue' |
| 40 | + | ||
| 48 | export default { | 41 | export default { |
| 49 | name: "SettingForSip", | 42 | name: "SettingForSip", |
| 50 | components: { | 43 | components: { |
| @@ -61,11 +54,11 @@ export default { | @@ -61,11 +54,11 @@ export default { | ||
| 61 | }, | 54 | }, |
| 62 | 55 | ||
| 63 | rules: { | 56 | rules: { |
| 64 | - ip: [{ required: true, message: "请输入名称", trigger: "blur" }], | ||
| 65 | - port: [{ required: true, message: "请输入应用名", trigger: "blur" }], | ||
| 66 | - domain: [{ required: true, message: "请输入流ID", trigger: "blur" }], | ||
| 67 | - id: [{ required: true, message: "请输入国标编码", trigger: "blur" }], | ||
| 68 | - password: [{ required: true, message: "请输入国标编码", trigger: "blur" }], | 57 | + ip: [{required: true, message: "请输入名称", trigger: "blur"}], |
| 58 | + port: [{required: true, message: "请输入应用名", trigger: "blur"}], | ||
| 59 | + domain: [{required: true, message: "请输入流ID", trigger: "blur"}], | ||
| 60 | + id: [{required: true, message: "请输入国标编码", trigger: "blur"}], | ||
| 61 | + password: [{required: true, message: "请输入国标编码", trigger: "blur"}], | ||
| 69 | }, | 62 | }, |
| 70 | } | 63 | } |
| 71 | } | 64 | } |
web_src/src/components/setting/Web.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div id="SettingForWeb"> | ||
| 3 | - <el-container> | ||
| 4 | - <el-header> | ||
| 5 | - <uiHeader></uiHeader> | ||
| 6 | - </el-header> | ||
| 7 | - <el-main> | ||
| 8 | - <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;"> | ||
| 9 | - <span style="font-size: 1rem; font-weight: bold;">WEB服务</span> | 2 | + <div id="SettingForWeb" style="width: 100%"> |
| 3 | + <div class="page-header"> | ||
| 4 | + <div class="page-title">WEB服务</div> | ||
| 10 | </div> | 5 | </div> |
| 11 | <div style="width: 60%; margin:0 auto; background-color: #FFFFFF; position: relative; padding: 5rem 6.5rem; text-align: left;font-size: 14px; max-width: 400px"> | 6 | <div style="width: 60%; margin:0 auto; background-color: #FFFFFF; position: relative; padding: 5rem 6.5rem; text-align: left;font-size: 14px; max-width: 400px"> |
| 12 | <el-form ref="form" :rules="rules" :model="form" label-width="140px"> | 7 | <el-form ref="form" :rules="rules" :model="form" label-width="140px"> |
| @@ -41,10 +36,6 @@ | @@ -41,10 +36,6 @@ | ||
| 41 | </el-form-item> | 36 | </el-form-item> |
| 42 | </el-form> | 37 | </el-form> |
| 43 | </div> | 38 | </div> |
| 44 | - | ||
| 45 | - | ||
| 46 | - </el-main> | ||
| 47 | - </el-container> | ||
| 48 | </div> | 39 | </div> |
| 49 | </template> | 40 | </template> |
| 50 | 41 |