songshankun
2023-11-22 f6739d7542be48f7f8139c3d5fc7b2326e5cfc8d
src/views/set.vue
@@ -1,8 +1,14 @@
<template>
  <div class="form-box">
    <div class="form-box-t">
      <el-button type="primary" @click="HomeClick()" class="background_blue">
        <i class="el-icon-d-arrow-left" />
        返回列表</el-button
      >
    </div>
    <div class="form-content-box">
      <div class="form-box-l">
        <div class="form-box-l-item">
        <!-- <div class="form-box-l-item">
          <el-button
            type="primary"
            @click="buttonClick(1)"
@@ -11,8 +17,8 @@
          >
            网络配置</el-button
          >
        </div>
        <div class="form-box-l-item">
        </div> -->
        <!-- <div class="form-box-l-item">
          <el-button
            type="primary"
            @click="buttonClick(2)"
@@ -21,8 +27,8 @@
          >
            加入集群</el-button
          >
        </div>
        <div class="form-box-l-item">
        </div> -->
        <!-- <div class="form-box-l-item">
          <el-button
            type="primary"
            @click="buttonClick(3)"
@@ -31,31 +37,76 @@
          >
            PLC配置</el-button
          >
        </div>
        </div> -->
      </div>
      <div class="form-box-r">
        <el-form
          ref="form"
          :class="active == 3 ? 'height_100' : ''"
          :rules="rules"
          :model="form"
          label-width="120px"
          label-position="left"
        >
          <div v-if="active == 1">
          <div v-if="active == 1 && !isSetNet">
            <div class="form-box-r-title">请配置网络</div>
            <div
              class="form-box-r-item"
              v-for="(item, index) in networkCardList"
              :key="index"
            >
              <el-input
                :value="'网卡:' + item.networkCard"
                disabled
                style="
                  width: calc(100% - 200px);
                  float: left;
                  margin-bottom: 20px;
                  margin-right: 10px;
                "
                placeholder="网卡:"
              ></el-input>
              <el-switch
                style="
                  float: left;
                  margin-bottom: 20px;
                  margin-right: 10px;
                  line-height: 40px;
                  display: inline-block;
                "
                :disabled="item.ip ? false : true"
                @change="switchChange(item, index, item.status)"
                v-model="item.status"
              >
              </el-switch>
              <i
                class="el-icon-setting margin_left_10px cursor_pointer"
                style="
                  font-size: 22px;
                  color: #fff;
                  margin-bottom: 20px;
                  line-height: 40px;
                  display: inline-block;
                "
                @click="setNet(item)"
              ></i>
            </div>
          </div>
          <div v-if="active == 1 && isSetNet">
            <el-form-item label="配置方式" prop="isRequired">
              <el-radio-group v-model="form.isRequired">
                <el-radio :label="true">自动匹配</el-radio>
                <el-radio :label="false">手动配置</el-radio>
                <!-- <el-radio :label="true">自动匹配</el-radio> -->
                <el-radio label="false">手动配置</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="!form.isRequired"
              label="本机IP:"
              prop="id"
              prop="ip"
              class="form-item"
            >
              <el-input
                v-model="form.id"
                v-model="form.ip"
                clearable
                placeholder="请输入"
              ></el-input>
@@ -63,11 +114,11 @@
            <el-form-item
              label="子网掩码:"
              v-if="!form.isRequired"
              prop="projectName"
              prop="mask"
              class="form-item"
            >
              <el-input
                v-model="form.projectName"
                v-model="form.mask"
                clearable
                placeholder="请输入"
              ></el-input>
@@ -76,11 +127,11 @@
            <el-form-item
              v-if="!form.isRequired"
              label="网关:"
              prop="type"
              prop="gateway"
              class="form-item"
            >
              <el-input
                v-model="form.type"
                v-model="form.gateway"
                clearable
                placeholder="请输入"
              ></el-input>
@@ -88,11 +139,11 @@
            <el-form-item
              v-if="!form.isRequired"
              label="DNS:"
              prop="director"
              prop="dns"
              class="form-item"
            >
              <el-input
                v-model="form.director"
                v-model="form.dns"
                clearable
                placeholder="请输入"
              ></el-input>
@@ -184,26 +235,28 @@
              >
            </el-form-item>
          </div>
          <div v-if="active == 3">
          <div style="height: 100%" v-if="active == 3">
            <div class="form-box-r-title" >PLC地址配置</div>
            <div
              style="
                overflow: auto;
                width: 100%;
                height: 100%;
                max-height: 450px;
                width: 80%;
                min-height: 200px;
                padding-right: 10px;
                margin:60px auto 0;
              "
            >
              <el-form-item
                label="PLC品牌"
                prop="brand"
                class="form-item2 float_left"
                class="form-item float_left"
              >
                <!-- style="width: calc(100% - 30px)" -->
                <el-select
                  placeholder="请选择PLC品牌"
                  v-model="form.brand"
                  clearable
                  style="width: calc(100% - 30px);"
                  style="width: 100%"
                >
                  <el-option
                    v-for="ele in plcBrandList"
@@ -212,33 +265,146 @@
                    :value="ele.name"
                  ></el-option>
                </el-select>
                <i
                <!-- <i
                  class="el-icon-setting margin_left_10px cursor_pointer"
                  style="font-size: 20px; color: gray"
                  style="font-size: 20px; color: #fff"
                  @click="handleShow"
                ></i>
                ></i> -->
              </el-form-item>
              <el-form-item label="接口方式" prop="method" class="form-item2">
                <el-input v-model="form.method" placeholder="请输入"></el-input>
              <el-form-item label="接口方式" prop="method" class="form-item">
                <!-- <el-input v-model="form.method" placeholder="请输入"></el-input> -->
                <el-select
                  v-model="form.method"
                  placeholder="请选择"
                  filterable
                  clearable
                  style="width: 100%"
                >
                  <el-option label="modbusTCP" value="modbusTCP"></el-option>
                  <el-option label="串口" value="serial"></el-option>
                  <el-option label="modbusRTU" value="modbusRTU"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="PCL地址"
                prop="address"
                class="form-item2 float_right margin_left_10px"
              >
                <el-input
                  v-model="form.address"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
              <el-form-item label="端口名称" prop="portName" class="form-item2">
              <template v-if="form.method === 'modbusTCP'">
                <el-form-item
                  label="PLC地址"
                  prop="address"
                  class="form-item float_right"
                >
                  <el-input
                    v-model="form.address"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="端口号"
                  prop="port"
                  class="form-item float_right"
                >
                  <el-input
                    v-model.number="form.port"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </template>
              <template v-if="form.method === 'serial'">
                <el-form-item
                  label="波特率"
                  prop="baudRate"
                  class="form-item float_right"
                >
                  <el-input
                    type="number"
                    min="1"
                    v-model="form.baudRate"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="串口名称"
                  prop="serialName"
                  class="form-item float_right"
                >
                  <el-input
                    v-model="form.serialName"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </template>
              <template v-if="form.method === 'modbusRTU'">
                <el-form-item
                  label="数据位"
                  prop="dataBit"
                  class="form-item float_right"
                >
                  <el-input
                    type="number"
                    min="1"
                    v-model="form.dataBit"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="停止位"
                  prop="stopBit"
                  class="form-item float_right"
                >
                  <el-input
                    type="number"
                    min="1"
                    v-model="form.stopBit"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
                <el-form-item label="校验方式" prop="parity" class="form-item">
                  <el-select
                    v-model="form.parity"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option label="奇校验" :value="1"></el-option>
                    <el-option label="偶校验" :value="2"></el-option>
                    <el-option label="无校验" :value="3"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="波特率"
                  prop="baudRate"
                  class="form-item float_right"
                >
                  <el-input
                    v-model="form.baudRate"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="串口名称"
                  prop="serialName"
                  class="form-item float_right"
                >
                  <el-input
                    v-model="form.serialName"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </template>
              <!-- <el-form-item label="端口名称" prop="portName" class="form-item2">
                <el-select
                  v-model="form.portName"
                  placeholder="全部"
                  filterable
                  style="width: 100%"
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in portNameList"
@@ -247,133 +413,119 @@
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="端口号"
                prop="port"
                class="form-item2 float_right margin_left_10px"
              >
                <el-input
                  v-model.number="form.port"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
              </el-form-item> -->
            </div>
            <!-- <el-button
              style="margin-bottom: 10px; float: right"
              @click="addPreProduction"
              type="primary"
              icon="el-icon-plus"
              >添加</el-button
            >
            <el-table
              ref="multipleTable"
              :header-cell-style="{
                background: '#f1f3f8',
                color: '#000009',
              }"
              :data="pclList"
              tooltip-effect="dark"
              height="calc(100% - 230px)"
              style="width: 100%; padding: 0"
            >
              <el-table-column
                type="index"
                label="序号"
                width="80"
              ></el-table-column>
              <el-table-column
                prop="startAddress"
                label="数量起始地址"
                width="180"
              >
                <template slot-scope="scope">
                  <el-input
                    v-if="scope.row.edit"
                    v-model.number="scope.row.startAddress"
                    placeholder="请输入"
                  ></el-input>
                  <span v-else>{{ scope.row.startAddress }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="length" label="数据长度" width="120">
                <template slot-scope="scope">
                  <el-input
                    v-if="scope.row.edit"
                    v-model.number="scope.row.length"
                    placeholder="请输入"
                  ></el-input>
                  <span v-else>{{ scope.row.length }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="数据类型" width="120">
                <template slot-scope="scope">
                  <el-select
                    v-if="scope.row.edit"
                    v-model="scope.row.type"
                    placeholder="请选择"
                    filterable
                  >
                    <el-option
                      v-for="item in plcNumTypeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                  <span v-else>{{ scope.row.type }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="fieldName" label="对应系统字段">
                <template slot-scope="scope">
                  <el-select
                    v-if="scope.row.edit"
                    v-model="scope.row.fieldName"
                    placeholder="请选择"
                    filterable
                  >
                    <el-option label="完成量" :value="1"></el-option>
                    <el-option label="总量" :value="2"></el-option>
                  </el-select>
                  <span v-else>{{ scope.row.fieldName==1?'完成量':'总量' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                  <span class="setColor" v-if="scope.row.edit">
                    <el-button
                      @click="saveClick(scope.row, scope)"
                      type="text"
                      size="small"
                      >保存</el-button
                    >
                    <el-button type="text" size="small" @click="cancel(scope)"
                      >取消</el-button
                    >
                  </span>
                  <span v-else>
                    <el-button @click="dellist(scope)" type="text" size="small"
                      >删除</el-button
                    >
                  </span>
                </template>
              </el-table-column>
            </el-table> -->
          </div>
        </el-form>
        <div class="project-info-footer">
          <el-button @click="shutdown" style="margin-right: 50px"
          <!-- <el-button @click="shutdown" style="margin-right: 50px"
            >取消</el-button
          >
          > -->
          <el-button type="primary" @click="onSubmit(form)">保存</el-button>
        </div>
        <div class="form-bottom-box" v-if="active==3">
                <el-button
                  style="margin-bottom: 10px; float: right"
                  @click="addPreProduction"
                  type="primary"
                  icon="el-icon-plus"
                  >添加</el-button
                >
                <el-table
                  ref="multipleTable"
                  :header-cell-style="{
                    background: '#f1f3f8',
                    color: '#000009',
                  }"
                  :data="pclList"
                  tooltip-effect="dark"
                  height="calc(100% - 50px)"
                  style="width: 100%; padding: 0"
                >
                  <el-table-column type="index"  label="序号" width="80"></el-table-column>
                  <el-table-column
                    prop="startAddress"
                    label="数量起始地址"
                    width="180"
                  >
                    <template slot-scope="scope">
                      <el-input
                        v-if="scope.row.edit"
                        v-model.number="scope.row.startAddress"
                        placeholder="请输入"
                      ></el-input>
                      <span v-else>{{ scope.row.startAddress }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="length" label="数据长度" width="120">
                    <template slot-scope="scope">
                      <el-input
                        v-if="scope.row.edit"
                        v-model.number="scope.row.length"
                        placeholder="请输入"
                      ></el-input>
                      <span v-else>{{ scope.row.length }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="type" label="数据类型" width="120">
                    <template slot-scope="scope">
                      <!--  :popper-append-to-body="false" -->
                      <el-select
                        v-if="scope.row.edit"
                        v-model="scope.row.type"
                        placeholder="请选择"
                        filterable
                      >
                        <el-option
                          v-for="item in plcNumTypeList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                      <span v-else>{{ scope.row.type }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="fieldName"
                    label="对应系统字段"
                  >
                    <template slot-scope="scope">
                      <el-input
                        v-if="scope.row.edit"
                        v-model="scope.row.fieldName"
                        placeholder="请输入"
                      ></el-input>
                      <span v-else>{{ scope.row.fieldName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                      <span class="setColor" v-if="scope.row.edit">
                        <el-button
                          @click="saveClick(scope.row, scope)"
                          type="text"
                          size="small"
                          >保存</el-button
                        >
                        <el-button
                          type="text"
                          size="small"
                          @click="cancel(scope)"
                          >取消</el-button
                        >
                      </span>
                      <span v-else>
                        <el-button
                          @click="dellist(scope)"
                          type="text"
                          size="small"
                          >删除</el-button
                        >
                      </span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
      </div>
    </div>
    <BomDialog
@@ -387,12 +539,24 @@
</template>
<script>
// import {
//   getProductLineDictList,
//   listProdDic,
//   saveMiniDict,
// } from "@/api/basic/dictionary"; // 产线
import {
  getProductLineDictList,
  listProdDic,
  NetworkCard,
  setworkCard,
  getMiniDictList,
  saveMiniDict,
} from "@/api/basic/dictionary"; // 产线
  addMiniDict,
  deleteMiniDict,
  updateMiniDict,
  sendProcessParams,
  getPlc,
  setPlc,
} from "@/api/home/index";
import BomDialog from "@/components/bomDialog";
export default {
  components: {
@@ -401,30 +565,54 @@
  props: {},
  data() {
    return {
      active: 1,
      active: 3,
      form: {
        isRequired: true,
        budget: null,
        director: "",
        explain: "",
        isRequired: false,
        dns: "",
        gateway: "",
        id: "",
        introduction: "",
        projectName: "",
        ip: "",
        mask: "",
        networkCard: "",
        status: 2,
        type: "",
        brand: "",
        method: "modbusTCP",
        portName: "",
        port: "",
        address: "",
        // 波特率默认9600
        baudRate: 0,
        serialName:'',
        dataBit: 0,
        stopBit: 0,
        // 校验方式 1奇校验2偶校验3无校验
        parity: 3,
      },
      rules: {
        // 项目名称
        projectName: [
        ip: [
          {
            required: true,
            message: "请填写",
            trigger: "change",
          },
        ],
      },
        brand: [{ required: false, message: "请选择", trigger: "change" }],
        method: [{ required: false, message: "请选择", trigger: "change" }],
        port: [
          {
            required: false,
            validator: this.validatorNum,
          },
        ],
        portName: [{ required: false, message: "请选择", trigger: "change" }],
      },
      // 网卡
      isSetNet: false,
      networkCardList: [],
      pclList: [],
      addPreObj: {
        edit: true,
@@ -457,14 +645,106 @@
      ],
    };
  },
  mounted() {},
  mounted() {
    this.buttonClick(this.active)
  },
  watch: {},
  methods: {
    validatorNum(rule, value, callback) {
      if (value) {
        if (value == undefined || value == null) {
          callback(new Error("请输入有效数字"));
        } else {
          var reg = /^\+?[0-9]\d*$/;
          if (!reg.test(value)) {
            callback(new Error("请填写整数"));
          } else {
            callback();
          }
        }
      } else {
        callback();
      }
    },
    getnetworkCardList() {
      NetworkCard().then((res) => {
        if (res.code == 200) {
          this.networkCardList = res.data;
          for (let i in this.networkCardList) {
            this.networkCardList[i].status =
              this.networkCardList[i].status == 1 ? true : false;
          }
        }
      });
    },
    // 设置网络
    setNet(item) {
      this.$confirm(
        item.ip
          ? "是否现在配置网络信息?"
          : "您还未配置网络信息,是否现在配置?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.isSetNet = true;
          this.form = JSON.parse(JSON.stringify(item));
        })
        .catch(() => {});
    },
    switchChange(item, index, status) {
      let arr = [];
      for (let i in this.networkCardList) {
        if (this.networkCardList[i].status) {
          arr.push(i);
        }
      }
      if (arr.length > 1) {
        this.$message({
          message: "只能开启一个网卡!",
          type: "warning",
        });
        this.networkCardList[index].status = !status;
        return true;
      }
      this.form = JSON.parse(JSON.stringify(item));
      this.saveOne();
    },
    HomeClick() {
      this.$router.push({
        path: "/",
      });
    },
    buttonClick(val) {
      this.active = val;
      if(this.active==3){
      if (this.active == 1) {
        (this.isSetNet = false), this.getnetworkCardList();
      } else if (this.active == 3) {
        this.handleGetBomKindDictList();
        this.getPlcInfo();
      }
    },
    getPlcInfo() {
      getPlc().then((res) => {
        if (res.code == 200) {
          this.form = JSON.parse(JSON.stringify(res.data));
          this.form = {
            ...this.form,
            dataBit: this.form?.dataBit || 0,
            stopBit: this.form?.stopBit || 0,
            parity: this.form?.parity || 3,
            baudRate: this.form?.baudRate || 0,
          }
          console.log('f',this.form)
          this.pclList = res.data.details
            ? JSON.parse(JSON.stringify(res.data.details))
            : [];
        }
      });
    },
    // PLC配置设置
    handleShow() {
@@ -473,8 +753,90 @@
    },
    //  PLC配置
    handleGetBomKindDictList(val) {
      getMiniDictList({ type: 1 }).then((res) => {
        this.plcBrandList = res.data;
      getMiniDictList().then((res) => {
        this.plcBrandList = res.data.data;
        this.plcBrandList = [
          {
            id: 1,
            name: "三菱",
          },
          {
            id: 2,
            name: "欧姆龙",
          },
          {
            id: 3,
            name: "西门子",
          },
          {
            id: 4,
            name: "台达",
          },
          {
            id: 5,
            name: "和利时",
          },
          {
            id: 6,
            name: "信捷",
          },
          {
            id: 7,
            name: "南大傲拓",
          },
          {
            id: 8,
            name: "汇川",
          },
          {
            id: 9,
            name: "永宏",
          },
          {
            id: 10,
            name: "罗克韦尔",
          },
          {
            id: 11,
            name: "施耐德",
          },
          {
            id: 12,
            name: "丰炜",
          },
          {
            id: 13,
            name: "黄石科威",
          },
          {
            id: 14,
            name: "霍尼韦尔",
          },
          {
            id: 15,
            name: "艾默生",
          },
          {
            id: 16,
            name: "英威腾",
          },
          {
            id: 17,
            name: "基恩士",
          },
          {
            id: 18,
            name: "中控",
          },
          {
            id: 19,
            name: "倍福",
          },
          {
            id: 20,
            name: "贝加莱",
          },
        ];
        if (val) {
          for (let i in this.plcBrandList) {
            if (this.plcBrandList[i].isDefault) {
@@ -490,7 +852,8 @@
      });
    },
    handleConfirmSave(data) {
      saveMiniDict({ list: data, type: 1 }).then((res) => {
      // { list: data, type: 1 }
      addMiniDict().then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "操作成功!",
@@ -603,9 +966,60 @@
    dellist(scope) {
      this.pclList.splice(scope.$index, 1);
    },
    saveOne() {
      let params = JSON.parse(JSON.stringify(this.form));
      params.status = params.status == 1 ? 1 : 2;
      setworkCard(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("网络配置成功!");
          this.getnetworkCardList();
        }
      });
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.active == 1) {
            this.saveOne();
          } else if (this.active == 3) {
            this.saveThree();
          }
        }
      });
    },
    saveThree() {
      let params = JSON.parse(JSON.stringify(this.form));
      params = {
        ...params,
        details : this.pclList,
        dataBit: +params.dataBit,
        stopBit: +params.stopBit,
        parity: +params.parity,
        baudRate: +params.baudRate
      }
      if (params.method === 'modbusRTU'){
        if (!params.dataBit){
          this.$message.error("数据位不能为 0")
          return
        }
        if (!params.stopBit){
          this.$message.error("停止位不能为 0")
          return
        }
        if (!params.baudRate){
          this.$message.error("波特率不能为 0")
          return
        }
      }
      setPlc(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("PLC配置成功!");
          this.getPlcInfo();
        }
      });
    },
@@ -635,16 +1049,22 @@
.margin_left_10px {
  margin-left: 10px;
}
.form-bottom-box{
  height:calc(100% - 280px);
  min-height:200px;
  margin-top:100px;
.form-bottom-box {
  height: calc(100% - 280px);
  min-height: 200px;
  margin-top: 100px;
}
.form-box {
  background: rgb(2, 10, 38);
  background: #12234a;
  width: 100%;
  height: 100%;
  overflow-y:hidden;
  overflow-y: hidden;
  .form-box-t {
    margin: 30px 0 0 40px;
  }
  .height_100 {
    height: calc(100% - 120px);
  }
  .el-form {
    width: 100%;
    color: #fff;
@@ -654,11 +1074,11 @@
    ::v-deep .el-radio {
      color: #fff !important;
    }
    .form-item2{
      width:calc(50% - 20px);
      float:left;
      &:nth-of-type(odd){
        margin-right:20px;
    .form-item2 {
      width: calc(50% - 20px);
      float: left;
      &:nth-of-type(odd) {
        margin-right: 20px;
      }
    }
  }
@@ -666,7 +1086,7 @@
    padding: 110px 40px 30px;
    color: #fff;
    width: calc(100% - 80px);
    height: calc(100% - 140px);
    height: calc(100% - 140px - 70px);
  }
  .form-box-l {
    width: 200px;
@@ -683,6 +1103,14 @@
    width: calc(75% - 280px);
    margin-left: 80px;
    float: left;
    .form-box-r-title {
      width: 100%;
      text-align: center;
      color: #fff;
      font-weight: 700;
      font-size: 25px;
      margin-bottom: 40px;
    }
  }
}
::v-deep .el-tabs__content {
@@ -694,7 +1122,7 @@
  // position:absolute;
  // left:10px;
  // bottom:20px;
  margin-top: 40px;
  margin-top: 0px;
  float: right;
}