小牛集卡web 客户端
chenwei
2021-06-04 7f5659967e4b5864d1c56a6072ebfe3abe4702dc
src/components/agopage/comment/BoxType.vue
@@ -25,12 +25,12 @@
                >
                </el-date-picker>
              </div>
              <div class="weight">
              <!-- <div class="weight">
                <el-input
                  v-model="item.tempOrder.Weight"
                  @change="weightChange($event, item)"
                ></el-input>
              </div>
              </div> -->
              <div class="type">
                <el-checkbox
                  v-model="item.tempOrder.IsUrgent"
@@ -44,8 +44,12 @@
                >
              </div>
              <div class="box" @click="perfectInfo(item,index)">
                <span v-if="item.tempOrder.TempOrderContainer.length!=0">箱号:{{item.tempOrder.TempOrderContainer[0].ContainerNo}}</span>
              <div class="box" @click="perfectInfo(item, index)">
                <span v-if="item.tempOrder.TempOrderContainer.length != 0"
                  >箱号:{{
                    item.tempOrder.TempOrderContainer[0].ContainerNo
                  }}</span
                >
                <span v-else>请点击此处完善信息</span>
                <i class="el-icon-s-unfold"></i>
              </div>
@@ -61,13 +65,17 @@
                </div>
              </div> -->
              <div class="number" v-if="item.tempOrder.TempOrderContainer.length==0">
              <div
                class="number"
                v-if="item.tempOrder.TempOrderContainer.length == 0"
              >
                <el-input-number
                  v-model="item.tempOrder.ContainerNub"
                  @change="handleChange($event, item)"
                  :min="1"
                  :max="10"
                  label="数量" :disabled="item.isNumDisable"
                  label="数量"
                  :disabled="item.isNumDisable"
                ></el-input-number>
              </div>
              <div class="number" v-else>
@@ -76,228 +84,267 @@
                  @change="handleChange($event, item)"
                  :min="1"
                  :max="10"
                  label="数量" :disabled="true"
                  label="数量"
                  :disabled="true"
                ></el-input-number>
              </div>
              <div class="box-count" style="width: 33px; text-align: center">
                {{ item.tempOrder.ContainerNub }}
              </div>
              <div
                style="text-align: center; color: #d9001b; width: 50px"
                v-if="item.tempOrder.ToTalMoney != null"
              >
                ¥{{ item.tempOrder.ToTalMoney }}
              </div>
              <div class="money">
                <div
                  style="min-width: 42px"
                  v-if="item.tempOrder.ToTalMoney != null"
                >
                  {{ item.tempOrder.ToTalMoney }}
                </div>
                <div style="min-width: 42px" v-else>需询价</div>
                <!-- style="min-width: 42px" -->
                <!-- <div style="min-width: 42px" v-else>需询价</div> -->
                <div>
                  <el-button
                    title="删除"
                    icon="el-icon-delete"
                    plain
                    size="small"
                    @click="delOrder(item.tempOrder.TempOrderID,index)"
                    >删除</el-button
                    size="mini"
                    @click="delOrder(item.tempOrder.TempOrderID, index)"
                  ></el-button>
                  <el-button
                    size="mini"
                    icon="el-icon-document-copy"
                    title="复制"
                  >
                  </el-button>
                </div>
                <div style="width: 72px">
                  <button
                    @click="enquiry(item.tempOrder.TempOrderID, item)"
                    v-if="item.tempOrder.IsInquiryAllowed == 1"
                  >
                <div v-if="item.tempOrder.IsInquiryAllowed == 1">
                  <button @click="enquiry(item.tempOrder.TempOrderID, item)">
                    <i class="el-icon-phone-outline"></i> 询 价
                  </button>
                </div>
                <div
                  style="width: 72px"
                  v-if="item.tempOrder.IsInquiryAllowed == 0"
                ></div>
              </div>
            </div>
            <!-- 双托箱型 -->
          </div>
          <div class="box-diff">
            <div class="one" v-if="item.tempOrder.Container.CntrType == 1">
              <el-checkbox v-model="item.tempOrder.IsCarPooling"
                @change="isCarPool($event,item)">同意拼车省钱</el-checkbox
              >
            </div>
            <div>
              <!-- 没值的判断 -->
              <div v-if="item.orderinqiry == null">
                <div v-if="item.tempOrder.Container.CntrType == 2">
                  <div
                    v-if="
                      item.tempOrder.Container.CntrName.substring(2) == 'FR'
                    "
                    class="two"
                  >
                    <div class="input-info">
                      <span>货物:</span>
                      <el-input
                        v-model="item.orderData.OdiqGoods"
                        clearable
                      ></el-input>
                    </div>
                    <div class="bulk">
                      <div>
                        <span>长:</span>
                        <el-input
                          v-model="item.orderData.OdiqLong"
                          clearable
                        ></el-input>
                      </div>
                      <div>
                        <span>宽:</span>
                        <el-input
                          v-model="item.orderData.OdiqWidth"
                          clearable
                        ></el-input>
                      </div>
                      <div>
                        <span>高:</span>
                        <el-input
                          v-model="item.orderData.OdiqHeight"
                          clearable
                        ></el-input>
                      </div>
                    </div>
                    <div class="input-remark">
                      <span>备注:</span>
                      <el-input
                        v-model="item.orderData.OdiqRemarks"
                        clearable
                      ></el-input>
                    </div>
                  </div>
                  <!-- RF -->
                  <div
                    v-if="
                      item.tempOrder.Container.CntrName.substring(2) == 'RF'
                    "
                    class="two"
                  >
                    <div class="input-info">
                      <span><i class="iconfont icon-wendu1"></i>温度:</span>
                      <el-input
                        v-model="item.orderData.OdiqTemperature"
                        clearable
                      ></el-input>
                      <span>℃</span>
                    </div>
                    <div class="input-info">
                      <span>货物:</span>
                      <el-input
                        v-model="item.orderData.OdiqGoods"
                        clearable
                      ></el-input>
                    </div>
            <div
              class="two"
              v-if="
                item.tempOrder.Container.CntrType == 2 &&
                item.orderinqiry == null &&
                item.tempOrder.Container.CntrName.substring(2) == 'FR'
              "
            >
              <router-link to="/inquiry">特殊箱询价</router-link>
              <div class="input-info">
                <span>货物:</span>
                <el-input
                  v-model="item.orderData.OdiqGoods"
                  clearable
                ></el-input>
              </div>
              <div class="bulk">
                <div>
                  <span>长:</span>
                  <el-input
                    v-model="item.orderData.OdiqLong"
                    clearable
                  ></el-input>
                </div>
                <div>
                  <span>宽:</span>
                  <el-input
                    v-model="item.orderData.OdiqWidth"
                    clearable
                  ></el-input>
                </div>
                <div>
                  <span>高:</span>
                  <el-input
                    v-model="item.orderData.OdiqHeight"
                    clearable
                  ></el-input>
                    <div class="input-remark">
                      <span>备注:</span>
                      <el-input
                        v-model="item.orderData.OdiqRemarks"
                        clearable
                      ></el-input>
                    </div>
                  </div>
                  <!--OT  -->
                  <div
                    v-if="
                      item.tempOrder.Container.CntrName.substring(2) == 'OT'
                    "
                    class="two"
                  >
                    <div class="input-info">
                      <span>货物:</span>
                      <el-input v-model="item.orderData.OdiqGoods"></el-input>
                    </div>
                    <div class="bulk">
                      <div>
                        <span>高:</span>
                        <el-input
                          v-model="item.orderData.OdiqHeight"
                        ></el-input>
                      </div>
                    </div>
                    <div class="input-remark">
                      <span>备注:</span>
                      <el-input v-model="item.orderData.OdiqRemarks"></el-input>
                    </div>
                  </div>
                  <!-- 初次之外的样式 -->
                  <div   v-if="
                      (item.tempOrder.Container.CntrName.substring(2) != 'OT'&& item.tempOrder.Container.CntrName.substring(2) != 'FR')&& item.tempOrder.Container.CntrName.substring(2) != 'RF'
                    "
                    class="two" >
                        <div class="input-info">
                      <span>货物:</span>
                      <el-input v-model="item.orderData.OdiqGoods"></el-input>
                    </div>
                    <div class="input-remark">
                      <span>备注:</span>
                      <el-input v-model="item.orderData.OdiqRemarks"></el-input>
                    </div>
                  </div>
                </div>
              </div>
              <div class="input-remark">
                <span>备注:</span>
                <el-input
                  v-model="item.orderData.OdiqRemarks"
                  clearable
                ></el-input>
              <!-- 有值的判断 -->
              <div v-else>
                 <div v-if="item.tempOrder.Container.CntrType == 2">
                  <div
                    v-if="
                      item.tempOrder.Container.CntrName.substring(2) == 'FR'
                    "
                    class="two"
                  >
                    <div class="input-info">
                      <span>货物:</span>
                       <span>{{item.orderData.OdiqGoods}}</span>
                    </div>
                    <div class="bulk">
                      <div>
                        <span>长:</span>
                        <span>{{item.orderData.OdiqLong}}</span>
                      </div>
                      <div>
                        <span>宽:</span>
                        <span>{{item.orderData.OdiqWidth}}</span>
                      </div>
                      <div>
                        <span>高:</span>
                        <span>{{item.orderData.OdiqHeight}}</span>
                      </div>
                    </div>
                    <div class="input-remark">
                      <span>备注:</span>
                      <span>{{item.orderData.OdiqRemarks}}</span>
                    </div>
                  </div>
                  <!-- RF -->
                  <div
                    v-if="
                      item.tempOrder.Container.CntrName.substring(2) == 'RF'
                    "
                    class="two"
                  >
                    <div class="input-info">
                      <span><i class="iconfont icon-wendu1"></i>温度:</span>
                      <span>{{item.orderData.OdiqTemperature}}℃</span>
                    </div>
                    <div class="input-info">
                      <span>货物:</span>
                      <span>{{item.orderData.OdiqGoods}}</span>
                    </div>
                    <div class="input-remark">
                      <span>备注:</span>
                      <span>{{item.orderData.OdiqRemarks}}</span>
                    </div>
                  </div>
                  <!--OT  -->
                  <div
                    v-if="
                      item.tempOrder.Container.CntrName.substring(2) == 'OT'
                    "
                    class="two"
                  >
                    <div class="input-info">
                      <span>货物:</span>
                      <span>{{item.orderData.OdiqGoods}}</span>
                    </div>
                    <div class="bulk">
                      <div>
                        <span>高:</span>
                        <span>{{item.orderData.OdiqHeight}}</span>
                      </div>
                    </div>
                    <div class="input-remark">
                      <span>备注:</span>
                      <span>{{item.orderData.OdiqRemarks}}</span>
                    </div>
                  </div>
                  <!-- 初次之外的样式 -->
                  <div   v-if="
                      (item.tempOrder.Container.CntrName.substring(2) != 'OT'&& item.tempOrder.Container.CntrName.substring(2) != 'FR')&& item.tempOrder.Container.CntrName.substring(2) != 'RF'
                    "
                    class="two" >
                        <div class="input-info">
                      <span>货物:</span>
                      <span>{{item.orderData.OdiqGoods}}</span>
                    </div>
                    <div class="input-remark">
                      <span>备注:</span>
                       <span>{{item.orderData.OdiqRemarks}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="two" v-if="item.orderinqiry!=null">
              <div>已询价
                <span>询价时间:2021-03-31</span>
              </div>
              <div class="input-info">
                <span>货物:新疆棉花</span>
              </div>
              <div class="bulk">
                <div>
                  <span>长:2米</span>
                </div>
                <div>
                  <span>宽:1米</span>
                </div>
                <div>
                  <span>高:1.5米</span>
                </div>
              </div>
              <div class="input-remark">
                <span>备注:</span>
                <span>测试备注备注</span>
              </div>
              <div class="time">
                询价等待时长:1天2小时
              </div>
            </div> -->
            <!-- 有值进行展示 -->
            <div class="two four" v-if="item.orderinqiry != null">
              <div>
                已询价
                <span>询价时间:{{ item.orderinqiry.OdiqReplyTime }}</span>
              </div>
              <div class="input-info">
                <span>货物:{{ item.orderinqiry.OdiqGoods }}</span>
              </div>
              <div class="bulk">
                <div>
                  <span>长:{{ item.orderinqiry.OdiqLong }}米</span>
                </div>
                <div>
                  <span>宽:{{ item.orderinqiry.OdiqWidth }}米</span>
                </div>
                <div>
                  <span>高:{{ item.orderinqiry.OdiqHeight }}米</span>
                </div>
              </div>
              <div class="input-remark">
                <span>备注:</span>
                <span>{{ item.orderinqiry.OdiqRemarks }}</span>
              </div>
              <div class="time-two">
                询价时长:{{ item.orderinqiry.OdiqWaitDuration }}
              </div>
              <div class="money">
                <span v-if="item.orderinqiry.OdiqMoney != null"
                  >¥ {{ item.orderinqiry.OdiqMoney }}</span
                >
              </div>
            </div>
            <div
              class="two"
              v-if="
                item.tempOrder.Container.CntrType == 2 &&
                item.orderinqiry == null &&
                item.tempOrder.Container.CntrName.substring(2) == 'OT'
              "
            >
              <router-link to="/inquiry">特殊箱询价</router-link>
              <div class="input-info">
                <span>货物:</span>
                <el-input v-model="item.orderData.OdiqGoods"></el-input>
              </div>
              <!-- <div class="input-info">
                <span>重量:</span>
                <el-input></el-input>
              </div> -->
              <div class="bulk">
                <div>
                  <span>高:</span>
                  <el-input v-model="item.orderData.OdiqHeight"></el-input>
                </div>
              </div>
              <div class="input-remark">
                <span>备注:</span>
                <el-input v-model="item.orderData.OdiqRemarks"></el-input>
              </div>
            </div>
            <div
              class="two"
              v-if="
                item.tempOrder.Container.CntrType == 2 &&
                item.orderinqiry == null &&
                item.tempOrder.Container.CntrName.substring(2) == 'RF'
              "
            >
              <div
                class="one"
                v-if="item.tempOrder.Container.IsCarPooling == 1"
              >
                <el-checkbox v-model="checked">同意拼车省钱</el-checkbox>
              </div>
              <div class="input-info">
                <span><i class="iconfont icon-wendu1"></i>温度:</span>
                <el-input
                  v-model="item.orderData.OdiqTemperature"
                  clearable
                ></el-input>
                <span>℃</span>
              </div>
              <div class="input-info">
                <span>货物:</span>
                <el-input
                  v-model="item.orderData.OdiqGoods"
                  clearable
                ></el-input>
              </div>
              <div class="input-remark">
                <span>备注:</span>
                <el-input
                  v-model="item.orderData.OdiqRemarks"
                  clearable
                ></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
@@ -308,7 +355,13 @@
      width="30%"
      :before-close="handleClose"
    >
      <info-dialog  :demo="perfectBoxData" :count="boxCount" @info="acceptInfo" ></info-dialog>
      <info-dialog
        :demo="perfectBoxData"
        :count="boxCount"
        :type="orderType"
        :self="selfOwer"
        @info="acceptInfo"
      ></info-dialog>
    </el-dialog>
  </div>
</template>
@@ -337,9 +390,11 @@
      },
      pollArr: [],
      pollData: [],
      perfectBoxData:{},
      boxCount:1,
      perfectBoxData: {},
      boxCount: 1,
      begin: {},
      orderType:0, //装卸类型
      selfOwer:false
    };
  },
  props: ["orderall"],
@@ -347,61 +402,62 @@
    infoDialog,
  },
  created() {
  },
  watch: {
    orderall:{
      handler(val){
           for (var i = 0; i < val.tempOrderForms.length; i++) {
        // var orderinQiry = {
        //   TempOrderID: "",
        //   OdiqWeight: "",
        //   OdiqTemperature: "",
        //   OdiqLong: "",
        //   OdiqWidth: "",
        //   OdiqHeight: "",
        //   OdiqRemarks: "",
        //   OdiqGoods:""
        // };
        // val.tempOrderForms[i].orderData = orderinQiry;
         val.tempOrderForms[i].isNumDisable = false;
        if (
          val.tempOrderForms[i].tempOrder.IsUrgent == null ||
          val.tempOrderForms[i].tempOrder.IsUrgent == 0
        ) {
          val.tempOrderForms[i].tempOrder.IsUrgent = false;
        } else {
          val.tempOrderForms[i].tempOrder.IsUrgent = true;
        }
    orderall: {
      handler(val) {
        console.log("箱子类型里面收到的值",val)
        this.orderType = val.OrderType;
        for (var i = 0; i < val.tempOrderForms.length; i++) {
          // var orderinQiry = {
          //   TempOrderID: "",
          //   OdiqWeight: "",
          //   OdiqTemperature: "",
          //   OdiqLong: "",
          //   OdiqWidth: "",
          //   OdiqHeight: "",
          //   OdiqRemarks: "",
          //   OdiqGoods:""
          // };
          // val.tempOrderForms[i].orderData = orderinQiry;
          val.tempOrderForms[i].isNumDisable = false;
          if (
            val.tempOrderForms[i].tempOrder.IsUrgent == null ||
            val.tempOrderForms[i].tempOrder.IsUrgent == 0
          ) {
            val.tempOrderForms[i].tempOrder.IsUrgent = false;
          } else {
            val.tempOrderForms[i].tempOrder.IsUrgent = true;
          }
        if (
          val.tempOrderForms[i].tempOrder.SelfBox == null ||
          val.tempOrderForms[i].tempOrder.SelfBox == 0
        ) {
          val.tempOrderForms[i].tempOrder.SelfBox = false;
        } else {
          val.tempOrderForms[i].tempOrder.SelfBox = true;
          if (
            val.tempOrderForms[i].tempOrder.SelfBox == null ||
            val.tempOrderForms[i].tempOrder.SelfBox == 0
          ) {
            val.tempOrderForms[i].tempOrder.SelfBox = false;
            this.selfOwer = false;
          } else {
            val.tempOrderForms[i].tempOrder.SelfBox = true;
            this.selfOwer = true;
          }
          if (
            val.tempOrderForms[i].tempOrder.IsCarPooling == null ||
            val.tempOrderForms[i].tempOrder.IsCarPooling == 0
          ) {
            val.tempOrderForms[i].tempOrder.IsCarPooling = false;
          } else {
            val.tempOrderForms[i].tempOrder.IsCarPooling = true;
          }
        }
        if (
          val.tempOrderForms[i].tempOrder.IsCarPooling == null ||
          val.tempOrderForms[i].tempOrder.IsCarPooling == 0
        ) {
          val.tempOrderForms[i].tempOrder.IsCarPooling = false;
        } else {
          val.tempOrderForms[i].tempOrder.IsCarPooling = true;
        }
      }
      this.tempOrderForms = val.tempOrderForms;
        this.tempOrderForms = val.tempOrderForms;
      },
      deep:true,
      deep: true,
    },
    pollArr(val) {
      var begin;
      if (val.length != 0) {
        begin = setInterval(() => {
        console.log(val);
        this.begin = setInterval(() => {
          this.getPolling({ OdiqIds: val });
          if (this.pollData.length != 0) {
@@ -411,38 +467,39 @@
              }
            });
          }
        }, 30000);
        }, 3000);
      } else {
        clearInterval(begin);
        console.log(this.pollArr);
        console.log(this.begin);
        clearInterval(this.begin);
      }
    },
  },
  methods: {
    perfectInfo(content,index){
       this.boxCount = index;
         this.perfectBoxData=content.tempOrder;
         setTimeout(()=>{
             this.infoDialog = true;
         },200)
        console.log(content.tempOrder.TempOrderContainer);
    perfectInfo(content, index) {
      console.log("箱子信息",content);
      this.boxCount = index;
      this.perfectBoxData = content.tempOrder;
      setTimeout(() => {
        this.infoDialog = true;
      }, 200);
      console.log(content.tempOrder.TempOrderContainer);
    },
    //调整拼车
    isCarPool(val,content){
         if (val) {
    isCarPool(val, content) {
      if (val) {
        this.getSingeTemp({
          IsCarPooling: 1,
          TempOrderID: content.tempOrder.TempOrderID,
        });
        this.$emit("pinche",content.tempOrder.TempOrderID)
        this.$emit("pinche", content.tempOrder.TempOrderID);
      } else {
        this.getSingeTemp({
          IsCarPooling: 0,
          TempOrderID: content.tempOrder.TempOrderID,
        });
         this.$emit("pinche","")
        this.$emit("pinche", "");
      }
    },
    //调整时间
@@ -480,23 +537,25 @@
          SelfBox: 1,
          TempOrderID: content.tempOrder.TempOrderID,
        });
        this.selfOwer = val;
      } else {
        this.getSingeTemp({
          SelfBox: 0,
          TempOrderID: content.tempOrder.TempOrderID,
        });
          this.selfOwer = val;
      }
    },
    //调整数量
    handleChange(val,content) {
       this.getSingeTemp({
    handleChange(val, content) {
      this.getSingeTemp({
        ContainerNub: val,
        TempOrderID: content.tempOrder.TempOrderID,
      });
        this.perfectBoxData=content.tempOrder;
      this.perfectBoxData = content.tempOrder;
    },
    // 删除
    delOrder(id,index) {
    delOrder(id, index) {
      this.$confirm("确认删除该条数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
@@ -509,7 +568,7 @@
              this.$qs.stringify({ tmpOrderId: id })
            )
            .then((res) => {
              this.tempOrderForms.splice(index,1);
              this.tempOrderForms.splice(index, 1);
              console.log(res);
            })
            .catch((err) => {
@@ -536,14 +595,17 @@
          console.log(err);
        });
    },
 //获取临时订单
    async getTempOrder(){
     await this.$axios.post("/api/Order/GetTempOrderAll").then(res=>{
        // console.log(res);
        this.tempOrderForms = res.data.tempOrderForms;
      }).catch(err=>{
        console.log(err);
      })
    //获取临时订单
    async getTempOrder() {
      await this.$axios
        .post("/api/Order/GetTempOrderAll")
        .then((res) => {
          // console.log(res);
          this.tempOrderForms = res.data.tempOrderForms;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //单独调整临时表单单条数据
    async getSingeTemp(model) {
@@ -571,36 +633,37 @@
    acceptInfo(e) {
      this.infoDialog = false;
      var arr = [];
      if(e.moreBox.length>1){
        for(var i=0;i<e.moreBox.length;i++){
            arr.push({
               BolCode: e.BolCode,
              TradeCode:e.TradeCode ,
              ShipAgent: e.ShipAgent,
              ContainerOwner: e.ContainerOwner,
              ContainerNo:e.moreBox[i].ContainerNo,
               BoxSeal:e.moreBox[i].BoxSeal
            })
      if (e.moreBox.length > 1) {
        for (var i = 0; i < e.moreBox.length; i++) {
          arr.push({
            BolCode: e.BolCode,
            TradeCode: e.TradeCode,
            ShipAgent: e.ShipAgent,
            ContainerOwner: e.ContainerOwner,
            ContainerNo: e.moreBox[i].ContainerNo,
            BoxSeal: e.moreBox[i].BoxSeal,
          });
        }
      }else{
         arr.push({
               BolCode: e.BolCode,
              TradeCode:e.TradeCode ,
              ShipAgent: e.ShipAgent,
              ContainerOwner: e.ContainerOwner,
              ContainerNo:e.moreBox[0].ContainerNo,
               BoxSeal:e.moreBox[0].BoxSeal
            })
      } else {
        arr.push({
          BolCode: e.BolCode,
          TradeCode: e.TradeCode,
          ShipAgent: e.ShipAgent,
          ContainerOwner: e.ContainerOwner,
          ContainerNo: e.moreBox[0].ContainerNo,
          BoxSeal: e.moreBox[0].BoxSeal,
        });
      }
      this.getSingeTemp({TempOrderID:e.id,TempOrderContainer:arr});
       this.tempOrderForms[e.index].TempOrderContainer[0].ContainerNo = e.moreBox[0].ContainerNo;
      this.getSingeTemp({ TempOrderID: e.id, TempOrderContainer: arr });
      // 给箱号复制进行展示
      this.tempOrderForms[e.index].TempOrderContainer[0].ContainerNo =
        e.moreBox[0].ContainerNo;
      //禁用数量
      this.tempOrderForms[e.index].isNumDisable = true;
      setTimeout(()=>{
      setTimeout(() => {
        this.getTempOrder();
      },200)
      console.log( this.tempOrderForms);
      }, 200);
      console.log(this.tempOrderForms);
    },
    handleClose(done) {
@@ -650,6 +713,11 @@
  border-radius: 3px;
  color: #b2b2b2;
  font-size: 14px;
  width: 145px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.show-data .one .gp {
  font-weight: bold;