From 273ece96b50dbbfab59008afed6504db7dfe3254 Mon Sep 17 00:00:00 2001
From: Lawrence <1934378145@qq.com>
Date: Thu, 17 Dec 2020 14:50:49 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=BB=BA=E4=B8=8A=E7=BA=A7=E7=BA=A7?=
 =?UTF-8?q?=E8=81=94=E5=B9=B3=E5=8F=B0=E6=97=B6=E8=87=AA=E5=8A=A8=E5=A1=AB?=
 =?UTF-8?q?=E5=85=A5=E6=9C=AC=E7=BA=A7=E5=B9=B3=E5=8F=B0=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web_src/src/components/platformEdit.vue | 662 ++++++++++++------------
 1 file changed, 335 insertions(+), 327 deletions(-)

diff --git a/web_src/src/components/platformEdit.vue b/web_src/src/components/platformEdit.vue
index 7dee4ca4..7b5a258c 100644
--- a/web_src/src/components/platformEdit.vue
+++ b/web_src/src/components/platformEdit.vue
@@ -1,410 +1,418 @@
 <template>
-<div id="addlatform" v-loading="isLoging">
-    <el-dialog title="添加平台" width="70%" top="2rem" :close-on-click-modal="false" :visible.sync="showDialog" :destroy-on-close="true" @close="close()">
-        <div id="shared" style="text-align: right; margin-top: 1rem;">
-
-            <el-row :gutter="24">
-                <el-col :span="11">
-                    <el-form ref="platform1" :rules="rules" :model="platform" label-width="160px" >
-                        <el-form-item label="名称" prop="name">
-                            <el-input v-model="platform.name"></el-input>
-                        </el-form-item>
-                        <el-form-item label="SIP服务国标编码" prop="serverGBId">
-                            <el-input v-model="platform.serverGBId" clearable></el-input>
-                        </el-form-item>
-                        <el-form-item label="SIP服务国标域" prop="serverGBDomain">
-                            <el-input v-model="platform.serverGBDomain" clearable></el-input>
-                        </el-form-item>
-                        <el-form-item label="SIP服务IP" prop="serverIP">
-                            <el-input v-model="platform.serverIP" clearable></el-input>
-                        </el-form-item>
-                        <el-form-item label="SIP服务端口" prop="serverPort">
-                            <el-input v-model="platform.serverPort" clearable></el-input>
-                        </el-form-item>
-                        <el-form-item label="设备国标编号" prop="deviceGBId">
-                            <el-input v-model="platform.deviceGBId" clearable></el-input>
-                        </el-form-item>
-                        <el-form-item label="本地IP" prop="deviceIp">
-                            <el-input v-model="platform.deviceIp" :disabled="true"></el-input>
-                        </el-form-item>
-                        <el-form-item label="本地端口" prop="devicePort">
-                            <el-input v-model="platform.devicePort" :disabled="true"></el-input>
-                        </el-form-item>
-
-                    </el-form>
-                </el-col>
-                <el-col :span="12">
-                    <el-form ref="platform2" :rules="rules" :model="platform" label-width="160px">
-                        <el-form-item label="SIP认证用户名" prop="username">
-                            <el-input v-model="platform.username"></el-input>
-                        </el-form-item>
-                        <el-form-item label="SIP认证密码" prop="password">
-                            <el-input v-model="platform.password" type="password"></el-input>
-                        </el-form-item>
-                        <el-form-item label="注册周期(秒)" prop="expires">
-                            <el-input v-model="platform.expires"></el-input>
-                        </el-form-item>
-                        <el-form-item label="心跳周期(秒)" prop="keepTimeout">
-                            <el-input v-model="platform.keepTimeout"></el-input>
-                        </el-form-item>
-                        <el-form-item label="信令传输" prop="transport">
-                            <el-select  v-model="platform.transport" style="width:100%" placeholder="请选择信令传输方式">
-                                <el-option label="UDP" value="UDP"></el-option>
-                                <el-option label="TCP" value="TCP"></el-option>
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item  label="字符集"  prop="characterSet">
-                            <el-select v-model="platform.characterSet" style="width:100%" placeholder="请选择字符集">
-                                <el-option label="GB2312" value="GB2312"></el-option>
-                                <el-option label="UTF-8" value="UTF-8"></el-option>
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item label="其他选项" >
-                            <el-checkbox label="启用" v-model="platform.enable" ></el-checkbox>
-                            <el-checkbox label="云台控制" v-model="platform.PTZEnable"></el-checkbox>
-                            <el-checkbox label="RTCP保活" v-model="platform.rtcp"></el-checkbox>
-                        </el-form-item>
-                        <el-form-item>
-                            <el-button type="primary" @click="onSubmit">{{onSubmit_text}}</el-button>
-                            <el-button @click="close">取消</el-button>
-                        </el-form-item>
-                    </el-form>
-                </el-col>
-            </el-row>
-        </div>
+  <div id="addlatform" v-loading="isLoging">
+    <el-dialog
+      title="添加平台"
+      width="70%"
+      top="2rem"
+      :close-on-click-modal="false"
+      :visible.sync="showDialog"
+      :destroy-on-close="true"
+      @close="close()"
+    >
+      <div id="shared" style="text-align: right; margin-top: 1rem">
+        <el-row :gutter="24">
+          <el-col :span="11">
+            <el-form ref="platform1" :rules="rules" :model="platform" label-width="160px">
+              <el-form-item label="名称" prop="name">
+                <el-input v-model="platform.name"></el-input>
+              </el-form-item>
+              <el-form-item label="SIP服务国标编码" prop="serverGBId">
+                <el-input v-model="platform.serverGBId" clearable></el-input>
+              </el-form-item>
+              <el-form-item label="SIP服务国标域" prop="serverGBDomain">
+                <el-input v-model="platform.serverGBDomain" clearable></el-input>
+              </el-form-item>
+              <el-form-item label="SIP服务IP" prop="serverIP">
+                <el-input v-model="platform.serverIP" clearable></el-input>
+              </el-form-item>
+              <el-form-item label="SIP服务端口" prop="serverPort">
+                <el-input v-model="platform.serverPort" clearable></el-input>
+              </el-form-item>
+              <el-form-item label="设备国标编号" prop="deviceGBId">
+                <el-input v-model="platform.deviceGBId" clearable></el-input>
+              </el-form-item>
+              <el-form-item label="本地IP" prop="deviceIp">
+                <el-input v-model="platform.deviceIp" :disabled="true"></el-input>
+              </el-form-item>
+              <el-form-item label="本地端口" prop="devicePort">
+                <el-input v-model="platform.devicePort" :disabled="true"></el-input>
+              </el-form-item>
+            </el-form>
+          </el-col>
+          <el-col :span="12">
+            <el-form ref="platform2" :rules="rules" :model="platform" label-width="160px">
+              <el-form-item label="SIP认证用户名" prop="username">
+                <el-input v-model="platform.username"></el-input>
+              </el-form-item>
+              <el-form-item label="SIP认证密码" prop="password">
+                <el-input v-model="platform.password" type="password"></el-input>
+              </el-form-item>
+              <el-form-item label="注册周期(秒)" prop="expires">
+                <el-input v-model="platform.expires"></el-input>
+              </el-form-item>
+              <el-form-item label="心跳周期(秒)" prop="keepTimeout">
+                <el-input v-model="platform.keepTimeout"></el-input>
+              </el-form-item>
+              <el-form-item label="信令传输" prop="transport">
+                <el-select
+                  v-model="platform.transport"
+                  style="width: 100%"
+                  placeholder="请选择信令传输方式"
+                >
+                  <el-option label="UDP" value="UDP"></el-option>
+                  <el-option label="TCP" value="TCP"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="字符集" prop="characterSet">
+                <el-select
+                  v-model="platform.characterSet"
+                  style="width: 100%"
+                  placeholder="请选择字符集"
+                >
+                  <el-option label="GB2312" value="GB2312"></el-option>
+                  <el-option label="UTF-8" value="UTF-8"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="其他选项">
+                <el-checkbox label="启用" v-model="platform.enable"></el-checkbox>
+                <el-checkbox label="云台控制" v-model="platform.PTZEnable"></el-checkbox>
+                <el-checkbox label="RTCP保活" v-model="platform.rtcp"></el-checkbox>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" @click="onSubmit">{{
+                  onSubmit_text
+                }}</el-button>
+                <el-button @click="close">取消</el-button>
+              </el-form-item>
+            </el-form>
+          </el-col>
+        </el-row>
+      </div>
     </el-dialog>
-</div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'platformEdit',
-    props: {},
-    computed: {
-
+  name: "platformEdit",
+  props: {},
+  computed: {},
+  created() {},
+  data() {
+    var deviceGBIdRules = async (rule, value, callback) => {
+      console.log(value);
+      if (value === "") {
+        callback(new Error("请输入设备国标编号"));
+      } else {
+        var exit = await this.deviceGBIdExit(value);
+        console.log(exit);
+        console.log(exit == "true");
+        console.log(exit === "true");
+        if (exit) {
+          callback(new Error("设备国标编号已存在"));
+        } else {
+          callback();
+        }
+      }
+    };
+    return {
+      listChangeCallback: null,
+      showDialog: false,
+      isLoging: false,
+      onSubmit_text: "立即创建",
+      // platform: {
+      //     enable: false,
+      //     PTZEnable: true,
+      //     rtcp: false,
+      //     name: null,
+      //     serverGBId: null,
+      //     serverGBDomain: null,
+      //     serverIP: null,
+      //     serverPort: null,
+      //     deviceGBId: null,
+      //     deviceIp: null,
+      //     devicePort: null,
+      //     username: null,
+      //     password: null,
+      //     expires: 300,
+      //     keepTimeout: 60,
+      //     transport: "UDP",
+      //     characterSet: "GB2312",
+      // },
+      platform: {
+        enable: true,
+        PTZEnable: true,
+        rtcp: false,
+        name: "测试001",
+        serverGBId: "34020000002000000001",
+        serverGBDomain: "3402000000",
+        serverIP: "192.168.1.141",
+        serverPort: "5060",
+        deviceGBId: "34020000001320001101",
+        deviceIp: "192.168.1.20",
+        devicePort: "5060",
+        username: "34020000001320001101",
+        password: "12345678",
+        expires: 300,
+        keepTimeout: 60,
+        transport: "UDP",
+        characterSet: "GB2312",
+      },
+      rules: {
+        name: [{ required: true, message: "请输入平台名称", trigger: "blur" }],
+        serverGBId: [
+          { required: true, message: "请输入SIP服务国标编码", trigger: "blur" },
+        ],
+        serverGBDomain: [
+          { required: true, message: "请输入SIP服务国标域", trigger: "blur" },
+        ],
+        serverIP: [{ required: true, message: "请输入SIP服务IP", trigger: "blur" }],
+        serverPort: [{ required: true, message: "请输入SIP服务端口", trigger: "blur" }],
+        deviceGBId: [{ validator: deviceGBIdRules, trigger: "blur" }],
+        username: [{ required: false, message: "请输入SIP认证用户名", trigger: "blur" }],
+        password: [{ required: false, message: "请输入SIP认证密码", trigger: "blur" }],
+        expires: [{ required: true, message: "请输入注册周期", trigger: "blur" }],
+        keepTimeout: [{ required: true, message: "请输入心跳周期", trigger: "blur" }],
+        transport: [{ required: true, message: "请选择信令传输", trigger: "blur" }],
+        characterSet: [{ required: true, message: "请选择编码字符集", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    openDialog: function (platform, callback) {
+      var that = this;
+      this.$axios
+        .get(`/api/platforms/serverconfig`)
+        .then(function (res) {
+          console.log(res);
+          that.platform.deviceGBId = res.data.username;
+          that.platform.deviceIp = res.data.deviceIp;
+          that.platform.devicePort = res.data.devicePort;
+          that.platform.username = res.data.username;
+          that.platform.password = res.data.password;
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+      this.showDialog = true;
+      this.listChangeCallback = callback;
+      if (platform != null) {
+        this.platform = platform;
+        this.onSubmit_text = "保存";
+      } else {
+      }
     },
-    created() {},
-    data() {
-        var deviceGBIdRules = async (rule, value, callback) => {
-          console.log(value)
-          if (value === '') {
-            callback(new Error('请输入设备国标编号'));
-          } else {
-            var exit = await this.deviceGBIdExit(value);
-            console.log(exit)
-            console.log(exit == "true")
-            console.log(exit === "true")
-            if (exit) {
-              callback(new Error('设备国标编号已存在'));
-            }else {
-              callback();
+    onSubmit: function () {
+      console.log("onSubmit");
+      var that = this;
+      that.$axios
+        .post(`/api/platforms/save`, that.platform)
+        .then(function (res) {
+          console.log(res);
+          console.log(res.data == "success");
+          if (res.data == "success") {
+            that.$message({
+              showClose: true,
+              message: "保存成功",
+              type: "success",
+            });
+            that.showDialog = false;
+            if (that.listChangeCallback != null) {
+              that.listChangeCallback();
             }
           }
-        };
-        return {
-            listChangeCallback: null,
-            showDialog: false,
-            isLoging: false,
-            onSubmit_text:"立即创建",
-            // platform: {
-            //     enable: false,
-            //     PTZEnable: true,
-            //     rtcp: false,
-            //     name: null,
-            //     serverGBId: null,
-            //     serverGBDomain: null,
-            //     serverIP: null,
-            //     serverPort: null,
-            //     deviceGBId: null,
-            //     deviceIp: null,
-            //     devicePort: null,
-            //     username: null,
-            //     password: null,
-            //     expires: 300,
-            //     keepTimeout: 60,
-            //     transport: "UDP",
-            //     characterSet: "GB2312",
-            // },
-            platform: {
-                enable: true,
-                PTZEnable: true,
-                rtcp: false,
-                name: "测试001",
-                serverGBId: "34020000002000000001",
-                serverGBDomain: "3402000000",
-                serverIP: "192.168.1.141",
-                serverPort: "5060",
-                deviceGBId: "34020000001320001101",
-                deviceIp: "192.168.1.20",
-                devicePort: "5060",
-                username: "34020000001320001101",
-                password: "12345678",
-                expires: 300,
-                keepTimeout: 60,
-                transport: "UDP",
-                characterSet: "GB2312",
-            },
-            rules: {
-                name: [
-                    { required: true, message:"请输入平台名称", trigger: 'blur' }
-                ],
-                serverGBId: [
-                    { required: true, message:"请输入SIP服务国标编码",  trigger: 'blur' }
-                ],
-                serverGBDomain: [
-                    { required: true, message:"请输入SIP服务国标域",   trigger: 'blur' }
-                ],
-                serverIP: [
-                    { required: true, message:"请输入SIP服务IP",   trigger: 'blur' }
-                ],
-                serverPort: [
-                    { required: true, message:"请输入SIP服务端口",   trigger: 'blur' }
-                ],
-                deviceGBId: [
-                    {validator: deviceGBIdRules,  trigger: 'blur' }
-                ],
-                username: [
-                    { required: false, message:"请输入SIP认证用户名",   trigger: 'blur' }
-                ],
-                password: [
-                    { required: false, message:"请输入SIP认证密码",   trigger: 'blur' }
-                ],
-                expires: [
-                    { required: true, message:"请输入注册周期",   trigger: 'blur' }
-                ],
-                keepTimeout: [
-                    { required: true, message:"请输入心跳周期",   trigger: 'blur' }
-                ],
-                transport: [
-                    { required: true, message:"请选择信令传输",   trigger: 'blur' }
-                ],
-                characterSet: [
-                    { required: true, message:"请选择编码字符集",   trigger: 'blur' }
-                ]
-                }
-        };
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
     },
-    methods: {
-        openDialog: function (platform, callback) {
-            this.showDialog = true;
-            this.listChangeCallback = callback;
-            if (platform != null) {
-                this.platform = platform;
-                this.onSubmit_text = "保存"
-            }
-
-        },
-        onSubmit: function () {
-            console.log('onSubmit');
-            var that = this;
-            that.$axios.post(`/api/platforms/save`, that.platform)
-                .then(function (res) {
-                    console.log(res)
-                    console.log(res.data == "success")
-                    if (res.data == "success") {
-                        that.$message({
-                            showClose: true,
-                            message: '保存成功',
-                            type: 'success'
-                        });
-                        that.showDialog = false;
-                        if (that.listChangeCallback != null) {
-                            that.listChangeCallback()
-                        }
-                    }
-                })
-                .catch(function (error) {
-                    console.log(error);
-                });
-        },
-        close: function () {
-            console.log('关闭添加视频平台');
-            this.showDialog = false;
-            this.$refs.platform1.resetFields();
-            this.$refs.platform2.resetFields();
-        },
-        deviceGBIdExit: async function (deviceGbId) {
-          var result = false;
-          var that = this
-          await that.$axios.post(`/api/platforms/exit/${deviceGbId}`)
-            .then(function (res) {
-              result = res.data;
-            })
-            .catch(function (error) {
-              console.log(error);
-            });
-            return result;
-
-        }
-
-    }
+    close: function () {
+      console.log("关闭添加视频平台");
+      this.showDialog = false;
+      this.$refs.platform1.resetFields();
+      this.$refs.platform2.resetFields();
+    },
+    deviceGBIdExit: async function (deviceGbId) {
+      var result = false;
+      var that = this;
+      await that.$axios
+        .post(`/api/platforms/exit/${deviceGbId}`)
+        .then(function (res) {
+          result = res.data;
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+      return result;
+    },
+  },
 };
 </script>
 
 <style>
 .control-wrapper {
-    position: relative;
-    width: 6.25rem;
-    height: 6.25rem;
-    max-width: 6.25rem;
-    max-height: 6.25rem;
-    border-radius: 100%;
-    margin-top: 2.5rem;
-    margin-left: 0.5rem;
-    float: left;
+  position: relative;
+  width: 6.25rem;
+  height: 6.25rem;
+  max-width: 6.25rem;
+  max-height: 6.25rem;
+  border-radius: 100%;
+  margin-top: 2.5rem;
+  margin-left: 0.5rem;
+  float: left;
 }
 
 .control-panel {
-    position: relative;
-    top: 0;
-    left: 5rem;
-    height: 11rem;
-    max-height: 11rem;
+  position: relative;
+  top: 0;
+  left: 5rem;
+  height: 11rem;
+  max-height: 11rem;
 }
 
 .control-btn {
-    display: flex;
-    justify-content: center;
-    position: absolute;
-    width: 44%;
-    height: 44%;
-    border-radius: 5px;
-    border: 1px solid #78aee4;
-    box-sizing: border-box;
-    transition: all 0.3s linear;
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  width: 44%;
+  height: 44%;
+  border-radius: 5px;
+  border: 1px solid #78aee4;
+  box-sizing: border-box;
+  transition: all 0.3s linear;
 }
 
 .control-btn i {
-    font-size: 20px;
-    color: #78aee4;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  font-size: 20px;
+  color: #78aee4;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .control-round {
-    position: absolute;
-    top: 21%;
-    left: 21%;
-    width: 58%;
-    height: 58%;
-    background: #fff;
-    border-radius: 100%;
+  position: absolute;
+  top: 21%;
+  left: 21%;
+  width: 58%;
+  height: 58%;
+  background: #fff;
+  border-radius: 100%;
 }
 
 .control-round-inner {
-    position: absolute;
-    left: 13%;
-    top: 13%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 70%;
-    height: 70%;
-    font-size: 40px;
-    color: #78aee4;
-    border: 1px solid #78aee4;
-    border-radius: 100%;
-    transition: all 0.3s linear;
+  position: absolute;
+  left: 13%;
+  top: 13%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 70%;
+  height: 70%;
+  font-size: 40px;
+  color: #78aee4;
+  border: 1px solid #78aee4;
+  border-radius: 100%;
+  transition: all 0.3s linear;
 }
 
 .control-inner-btn {
-    position: absolute;
-    width: 60%;
-    height: 60%;
-    background: #fafafa;
+  position: absolute;
+  width: 60%;
+  height: 60%;
+  background: #fafafa;
 }
 
 .control-top {
-    top: -8%;
-    left: 27%;
-    transform: rotate(-45deg);
-    border-radius: 5px 100% 5px 0;
+  top: -8%;
+  left: 27%;
+  transform: rotate(-45deg);
+  border-radius: 5px 100% 5px 0;
 }
 
 .control-top i {
-    transform: rotate(45deg);
-    border-radius: 5px 100% 5px 0;
+  transform: rotate(45deg);
+  border-radius: 5px 100% 5px 0;
 }
 
 .control-top .control-inner {
-    left: -1px;
-    bottom: 0;
-    border-top: 1px solid #78aee4;
-    border-right: 1px solid #78aee4;
-    border-radius: 0 100% 0 0;
+  left: -1px;
+  bottom: 0;
+  border-top: 1px solid #78aee4;
+  border-right: 1px solid #78aee4;
+  border-radius: 0 100% 0 0;
 }
 
 .control-top .fa {
-    transform: rotate(45deg) translateY(-7px);
+  transform: rotate(45deg) translateY(-7px);
 }
 
 .control-left {
-    top: 27%;
-    left: -8%;
-    transform: rotate(45deg);
-    border-radius: 5px 0 5px 100%;
+  top: 27%;
+  left: -8%;
+  transform: rotate(45deg);
+  border-radius: 5px 0 5px 100%;
 }
 
 .control-left i {
-    transform: rotate(-45deg);
+  transform: rotate(-45deg);
 }
 
 .control-left .control-inner {
-    right: -1px;
-    top: -1px;
-    border-bottom: 1px solid #78aee4;
-    border-left: 1px solid #78aee4;
-    border-radius: 0 0 0 100%;
+  right: -1px;
+  top: -1px;
+  border-bottom: 1px solid #78aee4;
+  border-left: 1px solid #78aee4;
+  border-radius: 0 0 0 100%;
 }
 
 .control-left .fa {
-    transform: rotate(-45deg) translateX(-7px);
+  transform: rotate(-45deg) translateX(-7px);
 }
 
 .control-right {
-    top: 27%;
-    right: -8%;
-    transform: rotate(45deg);
-    border-radius: 5px 100% 5px 0;
+  top: 27%;
+  right: -8%;
+  transform: rotate(45deg);
+  border-radius: 5px 100% 5px 0;
 }
 
 .control-right i {
-    transform: rotate(-45deg);
+  transform: rotate(-45deg);
 }
 
 .control-right .control-inner {
-    left: -1px;
-    bottom: -1px;
-    border-top: 1px solid #78aee4;
-    border-right: 1px solid #78aee4;
-    border-radius: 0 100% 0 0;
+  left: -1px;
+  bottom: -1px;
+  border-top: 1px solid #78aee4;
+  border-right: 1px solid #78aee4;
+  border-radius: 0 100% 0 0;
 }
 
 .control-right .fa {
-    transform: rotate(-45deg) translateX(7px);
+  transform: rotate(-45deg) translateX(7px);
 }
 
 .control-bottom {
-    left: 27%;
-    bottom: -8%;
-    transform: rotate(45deg);
-    border-radius: 0 5px 100% 5px;
+  left: 27%;
+  bottom: -8%;
+  transform: rotate(45deg);
+  border-radius: 0 5px 100% 5px;
 }
 
 .control-bottom i {
-    transform: rotate(-45deg);
+  transform: rotate(-45deg);
 }
 
 .control-bottom .control-inner {
-    top: -1px;
-    left: -1px;
-    border-bottom: 1px solid #78aee4;
-    border-right: 1px solid #78aee4;
-    border-radius: 0 0 100% 0;
+  top: -1px;
+  left: -1px;
+  border-bottom: 1px solid #78aee4;
+  border-right: 1px solid #78aee4;
+  border-radius: 0 0 100% 0;
 }
 
 .control-bottom .fa {
-    transform: rotate(-45deg) translateY(7px);
+  transform: rotate(-45deg) translateY(7px);
 }
 </style>