料位总览提交1-页面及数据交互

czt

2026-01-08 0ca73d619d01d8a7a73e0aa5ae1a45fb528a5e15

料位总览提交1-页面及数据交互

 fzzy-igdss-core/src/main/java/com/fzzy/igds/domain/DepotConf.java

@@ -107,4 +107,12 @@
    @TableField("is_only_th")
    private String isOnlyTH = Constant.YN_N;

    @Column(name = "diameter", columnDefinition = "decimal(20,2) COMMENT '筒仓直径(单位：米)'")
    @TableField("diameter")
    private Double diameter = 0.0;

    @Column(name = "height", columnDefinition = "decimal(20,2) COMMENT '筒仓高度(单位：米)'")
    @TableField("height")
    private Double height = 0.0;

}

 fzzy-igdss-core/src/main/java/com/fzzy/igds/domain/Quantity.java

@@ -45,6 +45,10 @@
    @TableField("diameter")
    private Double diameter = 0.0;

    @Column(name = "height_per", columnDefinition = "decimal(20,2) COMMENT '检测高度百分比(单位：%)'")
    @TableField("height_per")
    private Double heightPer = 0.0;

    @Column(name = "height", columnDefinition = "decimal(20,2) COMMENT '检测高度(单位：米)'")
    @TableField("height")
    private Double height = 0.0;

 fzzy-igdss-core/src/main/java/com/fzzy/igds/service/DepotConfService.java

@@ -274,7 +274,7 @@
     */
    public void updateFreq(String freq) {
        UpdateWrapper<DepotConf> updateWrapper = new UpdateWrapper<>();
        updateWrapper.eq("dept_id", ContextUtil.subDeptId(null)).set("pos_x", freq);
        updateWrapper.eq("dept_id", ContextUtil.subDeptId(null)).set("grain_freq", freq);
        depotConfMapper.update(null, updateWrapper);
    }


 fzzy-igdss-view/src/main/java/com/fzzy/igds/DepotConf.view.xml

@@ -262,6 +262,21 @@
                <Editor/>
              </AutoFormElement>
              <AutoFormElement>
                <Property name="property">diameter</Property>
                <Property name="name">diameter</Property>
                <Editor/>
              </AutoFormElement>
              <AutoFormElement>
                <Property name="property">height</Property>
                <Property name="name">height</Property>
                <Editor/>
              </AutoFormElement>
              <AutoFormElement>
                <Property name="name">updateBy</Property>
                <Property name="property">updateBy</Property>
                <Editor/>
              </AutoFormElement>
              <AutoFormElement>
                <Property name="name">grainFreq</Property>
                <Property name="property">grainFreq</Property>
                <Editor/>
@@ -282,21 +297,6 @@
                <Property name="iconClass">fa fa-refresh</Property>
                <Property name="exClassName">btn2</Property>
              </Button>
              <AutoFormElement>
                <Property name="name">createBy</Property>
                <Property name="property">createBy</Property>
                <Editor/>
              </AutoFormElement>
              <AutoFormElement>
                <Property name="name">createTime</Property>
                <Property name="property">createTime</Property>
                <Editor/>
              </AutoFormElement>
              <AutoFormElement>
                <Property name="name">updateBy</Property>
                <Property name="property">updateBy</Property>
                <Editor/>
              </AutoFormElement>
              <AutoFormElement>
                <Property name="name">updateTime</Property>
                <Property name="property">updateTime</Property>

 fzzy-igdss-view/src/main/java/models/core.model.xml

@@ -787,7 +787,6 @@
        <Property name="keyProperty">id</Property>
        <Property name="valueProperty">name</Property>
      </Property>
      <Property name="required">true</Property>
    </PropertyDef>
    <PropertyDef name="thSer">
      <Property></Property>
@@ -880,6 +879,16 @@
      <Property name="dataType">Integer</Property>
      <Property name="label">起始根号</Property>
    </PropertyDef>
    <PropertyDef name="diameter">
      <Property name="dataType">Double</Property>
      <Property name="label">筒仓直径</Property>
      <Property name="displayFormat">#0.00 ç±³</Property>
    </PropertyDef>
    <PropertyDef name="height">
      <Property name="dataType">Double</Property>
      <Property name="label">筒仓高度</Property>
      <Property name="displayFormat">#0.00 ç±³</Property>
    </PropertyDef>
    <PropertyDef name="grainAuto">
      <Property></Property>
      <Property name="label">粮情优化</Property>

 fzzy-igdss-web/src/main/java/com/fzzy/common/manager/CommonManager.java

@@ -21,6 +21,7 @@
import org.springframework.stereotype.Component;

import javax.annotation.Resource;
import java.util.ArrayList;
import java.util.Date;
import java.util.LinkedHashMap;
import java.util.List;
@@ -126,6 +127,28 @@
    }

    /**
     * æ ¹æ®ä»“库类型获取库区下仓库列表
     * @param deptId
     * @param depotTypes  ç±»åž‹å¤šä¸ªï¼Œç”¨é€—号隔开
     * @return
     */
    public List<Depot> listAllDepot(String deptId, String depotTypes) {

        List<Depot> depots = this.listDepotByDeptId(deptId);
        if(null == depots || depots.isEmpty()){
            return null;
        }

        List<Depot> result = new ArrayList<>();
        for (Depot depot : depots) {
            if (depotTypes.contains(depot.getDepotType())) {
                result.add(depot);
            }
        }
        return result;
    }

    /**
     * @return
     */
    public List<SysDictData> getInoutType() {

 fzzy-igdss-web/src/main/java/com/fzzy/security/SecurityController.java

@@ -303,6 +303,35 @@
        return secManager.checkStop(param);
    }

    /*------------------料位计页面------------------*/
    /**
     * æ–™ä½æ€»è§ˆ
     *
     * @param deptId
     * @return
     */
    @RequestMapping("/height-all")
    public String oilAll(@RequestParam(value = "deptId", required = false) String deptId,
                         ModelMap view) {

        SysUser user = ContextUtil.getLoginUser();
        view.put(Constant.MODEL_KEY_LOGIN_USER, user);

        // èŽ·å–当前用户所在的分库名称
        if(StringUtils.isBlank(deptId)){
            deptId = ContextUtil.subDeptId(user);
        }
        view.put("deptId", deptId);

        // èŽ·å–当前部门下所有油罐列表信息
        List<Quantity> heightList = secManager.getHeightList(deptId);
        view.put(Constant.MODEL_KEY_DEPOT_LIST, heightList);

        view.put("bizType", "quantity");

        return prefix + "/height-all";
    }

    /*------------------巡更轨迹页面------------------*/
    /**
     * èŽ·å–巡更记录页面

 fzzy-igdss-web/src/main/java/com/fzzy/security/manager/SecManager.java

@@ -4,6 +4,7 @@
import com.fzzy.igds.camera.ApiCameraManager;
import com.fzzy.igds.camera.data.ApiCameraData;
import com.fzzy.igds.camera.data.ApiCameraResp;
import com.fzzy.igds.constant.DepotType;
import com.fzzy.igds.constant.OrderRespEnum;
import com.fzzy.igds.constant.RespCodeEnum;
import com.fzzy.igds.data.*;
@@ -23,10 +24,7 @@
import org.springframework.stereotype.Component;

import javax.annotation.Resource;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.*;

/**
 * @Description
@@ -403,4 +401,42 @@

        return remoteQuantityService.checkStop(request);
    }


    /**
     * èŽ·å–油罐油情及液位信息
     *
     * @param deptId
     * @return
     */
    public List<Quantity> getHeightList(String deptId) {

        if (StringUtils.isEmpty(deptId)) {
            deptId = ContextUtil.subDeptId(null);
        }
        //获取所有筒仓及浅圆仓
        List<Depot> depotList = commonManager.listAllDepot(deptId, DepotType.TYPE_02.getCode() + "," + DepotType.TYPE_04.getCode());
        if (null == depotList || depotList.isEmpty()) {
            return null;
        }

        List<Quantity> list = new ArrayList<>();
        List<Quantity> quantityList;
        Quantity quantity;
        for (Depot depot : depotList) {

            quantityList = quantityService.getQuantityList(depot.getId(), 1);
            if (null == quantityList || quantityList.isEmpty()) {
                quantity = new Quantity();
                quantity.setDepotId(depot.getId());
            }else {
                quantity = quantityList.get(0);
            }
            quantity.setDepotData(depot);

            list.add(quantity);
        }

        return list;
    }
}

 fzzy-igdss-web/src/main/resources/static/img/web/grain/height-all.png

 fzzy-igdss-web/src/main/resources/static/security/height-all.css

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,220 @@
@charset "UTF-8";
/*!****** lib.css *******/
/*!-----------------[初始化]--------------*/
*,:after,:before{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;outline:0!important;-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
table{border-collapse:collapse;border-spacing:0}
dl,ol,ul{list-style:none;margin-bottom:0;padding-left:0}
q:after,q:before{content:''}
fieldset,img{border:0}
abbr,acronym{border:0}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.col-c,.col-l,.col_c,.col_l,.l{float:left}
.col-r,.col_r,.r{float:right}
.c{clear:both}
.fix{zoom:1}
.fix:after,.fix:before{display:block;content:"clear";height:0;clear:both;overflow:hidden;visibility:hidden}
em{font-weight:400;font-style:normal}
body{color:#333;font-size:14px;line-height:1.5;font-family:'Microsoft Yahei',"PingFang SC","Helvetica Neue",Helvetica,Arial,sans-serif;background:#f3f5f8}
img{max-width:100%;border:none}
input,select,textarea{font-size:14px;color:#333;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;font-family:'Microsoft Yahei',"PingFang SC","Helvetica Neue",Helvetica,Arial,sans-serif}
input[type=button],input[type=reset],input[type=submit]{cursor:pointer}
::-webkit-input-placeholder{color:rgba(255,255,255,.6)}
::-moz-placeholder{color:rgba(255,255,255,.6)}
::-ms-input-placeholder{color:rgba(255,255,255,.6)}
select::-ms-expand{display:none}
a{color:#333;text-decoration:none}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-button{display:none}
::-webkit-scrollbar-track-piece{background:0 0}
::-webkit-scrollbar-thumb{background:#9ddeff}
/*!-----------------[初始化结束]--------------*/
/*!******************************
    -------[=头部]-------
********************************/
/*!******************************
    -------[=公用]-------
********************************/
/*!****** lib.css end *******/
/*!****** ls *******/
.m-controll{overflow:hidden;padding:18px 22px}
.ul-listl1{overflow:hidden;margin:0 -10px}
.ul-listl1 li{width:25%;float:left;padding:0 10px;margin-bottom:20px}
.ul-listl1 .con{background:#fff;overflow:hidden;padding:10px;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px}
.ul-listl1 .con .box{background:rgba(42,52,60,.1);overflow:hidden;padding:12px 40px 22px;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s}
.ul-listl1 .con .tit{font-size:18px;color:#283248;font-weight:700;text-align:center;margin-bottom:10px;overflow:hidden}
.m-echartboxl{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:23px}
.m-echartboxl .btn{width:47px;height:47px;line-height:47px;text-align:center;font-size:0;overflow:hidden;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;background:#85a1b5;cursor:pointer;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s}
.m-echartboxl .btn img{display:inline-block;vertical-align:middle;max-width:100%;max-height:100%}
.m-echartl1{width:154px;height:154px;overflow:hidden;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;background:url(../images/ls/bgl1.png) center center no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-ms-background-size:cover;-o-background-size:cover;background-size:cover;margin:0 auto;position:relative;-webkit-box-shadow:0 10px 20px rgba(51,144,211,.3);-moz-box-shadow:0 10px 20px rgba(51,144,211,.3);-ms-box-shadow:0 10px 20px rgba(51,144,211,.3);-o-box-shadow:0 10px 20px rgba(51,144,211,.3);box-shadow:0 10px 20px rgba(51,144,211,.3);padding:16.5px}
.m-echartl1:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;background:url(../images/ls/bgl2.png) center center no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-ms-background-size:cover;-o-background-size:cover;background-size:cover;overflow:hidden}
.m-echartl1 .sbox{width:100%;height:100%;background:rgba(255,255,255,.6);border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border:1px solid rgba(51,144,211,.29);position:relative;z-index:2;-webkit-box-shadow:0 10px 20px rgba(51,144,211,.3);-moz-box-shadow:0 10px 20px rgba(51,144,211,.3);-ms-box-shadow:0 10px 20px rgba(51,144,211,.3);-o-box-shadow:0 10px 20px rgba(51,144,211,.3);box-shadow:0 10px 20px rgba(51,144,211,.3)}
.m-echartl1 .sbox:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;-webkit-box-shadow:inset 0 10px 20px rgba(51,144,211,.1);-moz-box-shadow:inset 0 10px 20px rgba(51,144,211,.1);-ms-box-shadow:inset 0 10px 20px rgba(51,144,211,.1);-o-box-shadow:inset 0 10px 20px rgba(51,144,211,.1);box-shadow:inset 0 10px 20px rgba(51,144,211,.1);overflow:hidden}
.m-echartl1 .sbox .tit{position:absolute;top:50%;left:50%;text-align:center;overflow:hidden;font-size:14px;color:#283248;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%)}
.m-echartl1 .sbox .tit .num{font-size:36px;font-weight:700;overflow:hidden}
.m-echartl1 .sbox .chart{display:block;width:100%;height:100%}
.m-patternl{overflow:hidden;margin:0 -10px 20px}
.m-patternl .itm{width:33.33%;float:left;padding:0 10px;overflow:hidden}
.m-patternl .btn{background-color:#fff;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;overflow:hidden;padding:11px 10px 10px;cursor:pointer;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s}
.m-patternl .icon{width:26px;height:26px;line-height:26px;text-align:center;font-size:0;overflow:hidden;margin:0 auto 6px}
.m-patternl .icon img{display:inline-block;vertical-align:middle;max-width:100%;max-height:100%}
.m-patternl .icon .img2{display:none}
.m-patternl .tt{font-size:14px;color:#3390d3;text-align:center;overflow:hidden;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s}
.m-patternl .itm.open .btn{background:#3390d3}
.m-patternl .itm.open .tt{color:#fff}
.m-patternl .itm.open .icon .img1{display:none}
.m-patternl .itm.open .icon .img2{display:inline-block}
.ul-listl1 .con .timing{font-size:14px;color:#283248;line-height:33px;text-align:center;background:rgba(51,144,211,.1);overflow:hidden;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;margin-bottom:33px}
.ul-listl1 .con .timing .date{font-size:16px;color:#283248;font-weight:700;padding-left:5px}
.ul-listl1 .con .btnbox{overflow:hidden}
.ul-listl1 .con .btnbox .btn{font-size:18px;color:#fff;font-weight:700;display:block;background:#33acb8;line-height:50px;text-align:center;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;overflow:hidden;margin-bottom:19px;cursor:pointer;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center}
.ul-listl1 .con .btnbox .btn img{display:block;margin-right:10px;width:21px;height:auto}
.ul-listl1 .con .btnbox .btn.blue{background:#5779ce}
.ul-listl1 .con .btnbox .btn:last-child{margin-bottom:0}
.ul-listl1 .con .btnbox .btn:hover{opacity:.7}
.ul-listl1 li.active .con .box{background:rgba(51,144,211,.1)}
.m-echartboxl .btn:hover,.ul-listl1 li.active .con .echartbox .btn{background-color:#3390d3}
.ul-listl1 li.active .m-echartl1{background-image:url(../images/ls/bgl1-1.png)}
.ul-listl1 li.active .m-echartl1:after{background-image:url(../images/ls/bgl2-1.png);-webkit-animation:fadenum 10s infinite linear;-moz-animation:fadenum 10s infinite linear;-o-animation:fadenum 10s infinite linear;animation:fadenum 10s infinite linear}
.ul-listl1 li.active .m-echartl1 .sbox .tit{color:#3390d3}
.m-overviewl{padding:18px 20px 0;overflow:hidden}
.ul-listl2{overflow:hidden;margin:0 -15px}
.ul-listl2 li{width:33.33%;float:left;padding:0 15px;margin-bottom:30px}
.ul-listl2 .con{border:1px solid #3390d3;background:#3390d3;overflow:hidden;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;position:relative}
.ul-listl2 .con:after{content:"";position:absolute;bottom:0;left:0;top:50px;width:100%;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;background:#fff}
.ul-listl2 .con:before{content:"";position:absolute;bottom:0;left:0;right:200px;height:100%;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;background:#fff}
.ul-listl2 .con .box{background:url(../images/ls/bgl3.png) right top no-repeat;-webkit-background-size:auto;-moz-background-size:auto;-ms-background-size:auto;-o-background-size:auto;background-size:auto;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;overflow:hidden;padding:0 16px 0 18px;position:relative;z-index:2}
.ul-listl2 .con .bigtit{position:absolute;right:0;top:0;font-size:24px;padding:0 53px;line-height:42px;font-weight:700;overflow:hidden;color:#fff}
.ul-listl2 .con .top{overflow:hidden;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-flex-align:center;align-items:center;padding:10px 0;margin-right:150px}
.ul-listl2 .con .top .ico{width:35px;height:35px;line-height:35px;text-align:center;font-size:0;background:#3390d3;margin-right:10px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}
.ul-listl2 .con .top .ico img{display:inline-block;vertical-align:middle;max-width:80%;max-height:80%}
.ul-listl2 .con .top .tit{font-size:18px;color:#283248;font-weight:700;overflow:hidden;margin-right:7px}
.ul-listl2 .con .top .stit{font-size:16px;color:#283248;overflow:hidden;margin-right:10px}
.ul-listl2 .con .top .num{font-size:16px;color:#283248;font-weight:700;overflow:hidden}
.ul-listl2 .con .top .num em{display:inline-block;vertical-align:middle;margin-top:-2px;font-size:18px;color:#3390d3;overflow:hidden;font-weight:700;padding-right:8px}
.ul-listl2 .con .infol1{overflow:hidden;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;margin-bottom:9px}
.ul-listl2 .con .infol1 .itm{border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;overflow:hidden;min-width:94px;padding:16px 10px 20px;margin-right:8px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}
.ul-listl2 .con .infol1 .itm:last-child{margin-right:0;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-moz-flex:1;-ms-flex:1;flex:1;padding:6px 10px}
.ul-listl2 .con .infol1 .tt{font-size:16px;color:#283248;text-align:center;overflow:hidden;margin-bottom:2px}
.ul-listl2 .con .infol1 .tt2{font-size:16px;font-weight:700;color:#283248;overflow:hidden;text-align:center}
.ul-listl2 .con .infol1 .quantity{margin-top:11px;overflow:hidden;background:rgba(87,121,206,.1);border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;padding:0 14px;overflow:hidden;font-size:16px;line-height:26px;color:#283248}
.ul-listl2 .con .infol1 .quantity .num{display:inline-block;vertical-align:middle;margin-top:-2px;font-size:18px;line-height:26px;color:#283248;font-weight:700;padding-left:10px}
.g-titl1{overflow:hidden;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}
.g-titl1 .ll{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-flex-align:center;align-items:center;overflow:hidden}
.g-titl1 .ll .ico{width:35px;height:35px;line-height:35px;text-align:center;font-size:0;overflow:hidden;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;margin-right:5px}
.g-titl1 .ll .ico img{display:inline-block;vertical-align:middle;max-width:80%;max-height:80%}
.g-titl1 .ll .tit{font-size:16px;font-weight:700;color:#283248;overflow:hidden}
.g-titl1 .ll .tit .date{display:inline-block;vertical-align:bottom;font-size:14px;padding-left:5px}
.g-titl1 .more{font-size:14px;color:#5779ce;overflow:hidden;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin-bottom:5px;padding-right:5px}
.g-titl1.green .more{color:#33acb8}
.g-titl1.cyan .more{color:#76b15b}
.ul-listl2 .con .infol2{border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;overflow:hidden;margin-bottom:10px;padding:9px 10px 0}
.m-listl{overflow:hidden;margin:7px -5px 0}
.m-listl .item{width:25%;float:left;padding:0 5px;margin-bottom:9px}
.m-listl .item .sbox{overflow:hidden;background-color:rgba(51,172,184,.1);border-radius:7px;-webkit-border-radius:7px;-moz-border-radius:7px;-ms-border-radius:7px;-o-border-radius:7px;padding:3px 10px;text-align:center}
.m-listl .item .sbox .tt{font-size:16px;color:#283248;overflow:hidden;line-height:1.3;margin-bottom:2px}
.m-listl .item .sbox .tt em{font-size:12px;display:inline-block;vertical-align:bottom}
.m-listl .item .sbox .num{font-size:16px;color:#283248;overflow:hidden;font-weight:700;line-height:1.3}
.m-listl.styl2 .item .sbox{background-color:rgba(118,177,91,.1)}
.m-detectionl{overflow:hidden;padding:18px 22px 0}
.ul-listl3{overflow:hidden;margin:0 -10px}
.ul-listl3 li{width:25%;float:left;padding:0 10px;margin-bottom:21px}
.ul-listl3 .con{padding:10px;overflow:hidden;background:#fff;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px}
.ul-listl3 .con .box{background:#eaf4fb;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;padding:9px 10px 0}
.ul-listl3 .con .top{overflow:hidden;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}
.ul-listl3 .con .top .num{float:left;padding:0 17px;background:#3390d3;overflow:hidden;color:#fff;font-size:16px;font-weight:700;line-height:29px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;margin-right:10px}
.ul-listl3 .con .top .tit{font-size:16px;font-weight:700;color:#283248;overflow:hidden}
.ul-listl3 .con .top .ll{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-flex-align:center;align-items:center}
.ul-listl3 .con .top .more{font-size:14px;color:#3390d3;overflow:hidden}
.ul-listl3 .con .picbox{overflow:hidden;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:23px 0 0 26px;margin-bottom:11px}
.ul-listl3 .con .picbox .pic{width:220px;height:auto;overflow:hidden;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin-right:12px}
.ul-listl3 .con .picbox .pic img{display:block;width:100%}
.ul-listl3 .con .heat{padding:27px 82px 20px 0;position:relative}
.ul-listl3 .con .line{width:12px;height:100%;background:#bac3d0;position:relative}
.ul-listl3 .con .line .sline{display:block;position:absolute;bottom:0;left:0;width:100%;background:#3390d3}
.ul-listl3 .con .line .num{position:absolute;left:12px;font-size:16px;line-height:24px;margin-top:-12px;overflow:hidden;white-space:nowrap;color:#3390d3;padding-left:12px}
.ul-listl3 .con .line .num em{font-weight:700}
.ul-listl3 .con .line .num:after{content:"";position:absolute;top:50%;left:0;width:8px;background:#8993a1;height:1px}
.ul-listl3 .con .heat .temperature{position:absolute;top:-3px;right:0;font-size:16px;line-height:27px;color:#3390d3;overflow:hidden;font-weight:700;background:rgba(51,144,211,.2);border-radius:20px 20px 20px 0;-webkit-border-radius:20px 20px 20px 0;-moz-border-radius:20px 20px 20px 0;-ms-border-radius:20px 20px 20px 0;-o-border-radius:20px 20px 20px 0;padding:0 10px;min-width:70px;text-align:center}
.ul-listl3 .con .reserves{font-size:16px;line-height:40px;color:#283248;text-align:center;overflow:hidden;background:rgba(51,144,211,.1);border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px}
.ul-listl3 .con .reserves .num{font-weight:700;padding-left:10px}
.ul-listl3 .con .date{font-size:12px;text-align:center;overflow:hidden;line-height:30px}
@keyframes fadenum{
0%{transform:rotate(0);-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0)}
100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg)}
}
@media only screen and (min-width:1200px){
.m-controll{padding:.937vw 1.145vw}
.ul-listl1{margin:0 -.52vw}
.ul-listl1 li{padding:0 .52vw;margin-bottom:1.041vw}
.ul-listl1 .con{background:#fff;padding:.52vw;border-radius:.52vw;-webkit-border-radius:.52vw;-moz-border-radius:.52vw;-ms-border-radius:.52vw;-o-border-radius:.52vw}
.ul-listl1 .con .box{background:rgba(42,52,60,.1);padding:.625vw 2.083vw 1.145vw;border-radius:.52vw;-webkit-border-radius:.52vw;-moz-border-radius:.52vw;-ms-border-radius:.52vw;-o-border-radius:.52vw}
.ul-listl1 .con .tit{font-size:.937vw;font-weight:700;margin-bottom:.52vw}
.m-echartboxl{margin-bottom:1.197vw}
.m-echartboxl .btn{width:2.447vw;height:2.447vw;line-height:2.447vw}
.m-echartl1{width:8.020vw;height:8.020vw;-webkit-box-shadow:0 .52vw 1.041vw rgba(51,144,211,.3);-moz-box-shadow:0 .52vw 1.041vw rgba(51,144,211,.3);-ms-box-shadow:0 .52vw 1.041vw rgba(51,144,211,.3);-o-box-shadow:0 .52vw 1.041vw rgba(51,144,211,.3);box-shadow:0 .52vw 1.041vw rgba(51,144,211,.3);padding:.859vw}
.m-echartl1 .sbox{-webkit-box-shadow:0 .52vw 1.041vw rgba(51,144,211,.3);-moz-box-shadow:0 .52vw 1.041vw rgba(51,144,211,.3);-ms-box-shadow:0 .52vw 1.041vw rgba(51,144,211,.3);-o-box-shadow:0 .52vw 1.041vw rgba(51,144,211,.3);box-shadow:0 .52vw 1.041vw rgba(51,144,211,.3)}
.m-echartl1 .sbox:after{-webkit-box-shadow:inset 0 .52vw 1.041vw rgba(51,144,211,.1);-moz-box-shadow:inset 0 .52vw 1.041vw rgba(51,144,211,.1);-ms-box-shadow:inset 0 .52vw 1.041vw rgba(51,144,211,.1);-o-box-shadow:inset 0 .52vw 1.041vw rgba(51,144,211,.1);box-shadow:inset 0 .52vw 1.041vw rgba(51,144,211,.1)}
.m-echartl1 .sbox .tit{font-size:.729vw}
.m-echartl1 .sbox .tit .num{font-size:1.875vw}
.m-patternl{margin:0 -.52vw 1.041vw}
.m-patternl .itm{width:33.33%;padding:0 .52vw}
.m-patternl .btn{border-radius:.52vw;-webkit-border-radius:.52vw;-moz-border-radius:.52vw;-ms-border-radius:.52vw;-o-border-radius:.52vw;padding:.572vw .52vw .52vw}
.m-patternl .icon{width:1.354vw;height:1.354vw;line-height:1.354vw;font-size:0;margin:0 auto .312vw}
.m-patternl .tt{font-size:.729vw}
.ul-listl1 .con .timing{font-size:.729vw;line-height:1.718vw;background:rgba(51,144,211,.1);border-radius:.26vw;-webkit-border-radius:.26vw;-moz-border-radius:.26vw;-ms-border-radius:.26vw;-o-border-radius:.26vw;margin-bottom:1.718vw}
.ul-listl1 .con .timing .date{font-size:.833vw;padding-left:.26vw}
.ul-listl1 .con .btnbox .btn{font-size:.937vw;line-height:2.604vw;border-radius:.26vw;-webkit-border-radius:.26vw;-moz-border-radius:.26vw;-ms-border-radius:.26vw;-o-border-radius:.26vw;margin-bottom:.989vw}
.ul-listl1 .con .btnbox .btn img{margin-right:.52vw;width:1.093vw;height:auto}
.m-overviewl{padding:.937vw 1.041vw 0}
.ul-listl2{margin:0 -.781vw}
.ul-listl2 li{padding:0 .781vw;margin-bottom:1.562vw}
.ul-listl2 .con{border-radius:.52vw;-webkit-border-radius:.52vw;-moz-border-radius:.52vw;-ms-border-radius:.52vw;-o-border-radius:.52vw}
.ul-listl2 .con:after{top:2.604vw;border-radius:.52vw;-webkit-border-radius:.52vw;-moz-border-radius:.52vw;-ms-border-radius:.52vw;-o-border-radius:.52vw}
.ul-listl2 .con:before{right:10.41vw;border-radius:.52vw;-webkit-border-radius:.52vw;-moz-border-radius:.52vw;-ms-border-radius:.52vw;-o-border-radius:.52vw;background:#fff}
.ul-listl2 .con .box{border-radius:.52vw;-webkit-border-radius:.52vw;-moz-border-radius:.52vw;-ms-border-radius:.52vw;-o-border-radius:.52vw;padding:0 .833vw 0 .937vw}
.ul-listl2 .con .bigtit{right:0;top:0;font-size:1.25vw;padding:0 2.76vw;line-height:2.187vw;font-weight:700}
.ul-listl2 .con .top{padding:.52vw 0;margin-right:7.812vw}
.ul-listl2 .con .top .ico{width:1.822vw;height:1.822vw;line-height:1.822vw;margin-right:.52vw}
.ul-listl2 .con .top .tit{font-size:.937vw;font-weight:700;margin-right:.364vw}
.ul-listl2 .con .top .stit{font-size:.833vw;margin-right:.52vw}
.ul-listl2 .con .top .num{font-size:.833vw;font-weight:700}
.ul-listl2 .con .top .num em{margin-top:-.104vw;font-size:.937vw;font-weight:700;padding-right:.416vw}
.ul-listl2 .con .infol1{margin-bottom:.468vw}
.ul-listl2 .con .infol1 .itm{border-radius:.52vw;-webkit-border-radius:.52vw;-moz-border-radius:.52vw;-ms-border-radius:.52vw;-o-border-radius:.52vw;min-width:4.895vw;padding:.833vw .52vw 1.041vw;margin-right:.416vw;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}
.ul-listl2 .con .infol1 .itm:last-child{padding:.312vw .52vw}
.ul-listl2 .con .infol1 .tt{font-size:.833vw;margin-bottom:.104vw}
.ul-listl2 .con .infol1 .tt2{font-size:.833vw;font-weight:700}
.ul-listl2 .con .infol1 .quantity{margin-top:.572vw;background:rgba(87,121,206,.1);border-radius:.26vw;-webkit-border-radius:.26vw;-moz-border-radius:.26vw;-ms-border-radius:.26vw;-o-border-radius:.26vw;padding:0 .729vw;font-size:.833vw;line-height:1.354vw}
.ul-listl2 .con .infol1 .quantity .num{margin-top:-.104vw;font-size:.937vw;line-height:1.354vw;font-weight:700;padding-left:.52vw}
.g-titl1 .ll .ico{width:1.822vw;height:1.822vw;line-height:1.822vw;margin-right:.26vw}
.g-titl1 .ll .tit{font-size:.833vw}
.g-titl1 .ll .tit .date{font-size:.729vw;padding-left:.26vw}
.g-titl1 .more{font-size:.729vw;margin-bottom:.26vw;padding-right:.26vw}
.ul-listl2 .con .infol2{border-radius:.52vw;-webkit-border-radius:.52vw;-moz-border-radius:.52vw;-ms-border-radius:.52vw;-o-border-radius:.52vw;margin-bottom:.52vw;padding:.468vw .52vw 0}
.m-listl{margin:.364vw -.26vw 0}
.m-listl .item{padding:0 .26vw;margin-bottom:.468vw}
.m-listl .item .sbox{border-radius:.364vw;-webkit-border-radius:.364vw;-moz-border-radius:.364vw;-ms-border-radius:.364vw;-o-border-radius:.364vw;padding:.156vw .52vw}
.m-listl .item .sbox .tt{font-size:.833vw;line-height:1.3;margin-bottom:.104vw}
.m-listl .item .sbox .tt em{font-size:.625vw}
.m-listl .item .sbox .num{font-size:.833vw;font-weight:700;line-height:1.3}
.m-detectionl{padding:.937vw 1.145vw 0}
.ul-listl3{margin:0 -.52vw}
.ul-listl3 li{padding:0 .52vw;margin-bottom:1.093vw}
.ul-listl3 .con{padding:.52vw;background:#fff;border-radius:.52vw;-webkit-border-radius:.52vw;-moz-border-radius:.52vw;-ms-border-radius:.52vw;-o-border-radius:.52vw}
.ul-listl3 .con .box{background:#eaf4fb;border-radius:.52vw;-webkit-border-radius:.52vw;-moz-border-radius:.52vw;-ms-border-radius:.52vw;-o-border-radius:.52vw;padding:.468vw .52vw 0}
.ul-listl3 .con .top .num{padding:0 .885vw;font-size:.833vw;line-height:1.51vw;border-radius:.26vw;-webkit-border-radius:.26vw;-moz-border-radius:.26vw;-ms-border-radius:.26vw;-o-border-radius:.26vw;margin-right:.52vw}
.ul-listl3 .con .top .tit{font-size:.833vw}
.ul-listl3 .con .top .more{font-size:.729vw}
.ul-listl3 .con .picbox{padding:1.197vw 0 0 1.354vw;margin-bottom:.572vw}
.ul-listl3 .con .picbox .pic{width:11.45vw;margin-right:.625vw}
.ul-listl3 .con .heat{padding:1.406vw 4.27vw 1.041vw 0}
.ul-listl3 .con .line{width:.625vw}
.ul-listl3 .con .line .num{left:.625vw;font-size:.833vw;line-height:1.25vw;margin-top:-.625vw;white-space:nowrap;padding-left:.625vw}
.ul-listl3 .con .line .num em{font-weight:700}
.ul-listl3 .con .line .num:after{content:"";top:50%;left:0;width:.416vw;background:#8993a1;height:1px}
.ul-listl3 .con .heat .temperature{top:-.156vw;right:0;font-size:.833vw;line-height:1.406vw;font-weight:700;background:rgba(51,144,211,.2);border-radius:1.041vw 1.041vw 1.041vw 0;-webkit-border-radius:1.041vw 1.041vw 1.041vw 0;-moz-border-radius:1.041vw 1.041vw 1.041vw 0;-ms-border-radius:1.041vw 1.041vw 1.041vw 0;-o-border-radius:1.041vw 1.041vw 1.041vw 0;padding:0 .52vw;min-width:3.645vw}
.ul-listl3 .con .reserves{font-size:.833vw;line-height:2.083vw;background:rgba(51,144,211,.1);border-radius:.52vw;-webkit-border-radius:.52vw;-moz-border-radius:.52vw;-ms-border-radius:.52vw;-o-border-radius:.52vw}
.ul-listl3 .con .reserves .num{font-weight:700;padding-left:.52vw}
.ul-listl3 .con .date{font-size:.625vw;line-height:1.562vw}
}
/*!****** ls end *******/

 fzzy-igdss-web/src/main/resources/templates/security/height-all.html

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,229 @@
<!DOCTYPE html>
<html lang="zh-cn" xmlns:th=http://www.thymeleaf.org>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>料位总览</title>

    <link rel="stylesheet" th:href="@{/security/height-all.css}">
</head>

<body class="">
<div class="screen-container">
    <div class="m-detectionl">
        <ul class="ul-listl3" id="oilList">
            <li>
                <div class="con">
                    <div class="box">
                        <div class="top">
                            <div class="ll">
                                <div class="num">1号筒仓</div>
                                <div class="tit">玉米</div>
                            </div>
                            <a href="" class="more">详情 &gt;</a>
                        </div>
                        <div class="picbox">
                            <div class="pic">
                                <img th:src="@{/img/web/grain/height-all.png}" alt="">
                            </div>
                            <div class="heat">
                                <div class="line">
                                    <div class="sline" style="height: 58%;">
                                        <div class="num"><em>11.527</em>ç±³</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="reserves">计算储量<em class="num">290789.9KG</em></div>
                        <div class="date">2025-09-25 10:00</div>
                    </div>
                </div>
            </li>
            <li>
                <div class="con">
                    <div class="box">
                        <div class="top">
                            <div class="ll">
                                <div class="num">2号筒仓</div>
                                <div class="tit">玉米</div>
                            </div>
                            <a href="" class="more">详情 &gt;</a>
                        </div>
                        <div class="picbox">
                            <div class="pic">
                                <img th:src="@{/img/web/grain/height-all.png}" alt="">
                            </div>
                            <div class="heat">
                                <div class="line">
                                    <div class="sline" style="height: 58%;">
                                        <div class="num"><em>11.527</em>ç±³</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="reserves">计算储量<em class="num">290789.9KG</em></div>
                        <div class="date">2025-09-25 10:00</div>
                    </div>
                </div>
            </li>
            <li>
                <div class="con">
                    <div class="box">
                        <div class="top">
                            <div class="ll">
                                <div class="num">3号筒仓</div>
                                <div class="tit">玉米</div>
                            </div>
                            <a href="" class="more">详情 &gt;</a>
                        </div>
                        <div class="picbox">
                            <div class="pic">
                                <img th:src="@{/img/web/grain/height-all.png}" alt="">
                            </div>
                            <div class="heat">
                                <div class="line">
                                    <div class="sline" style="height: 58%;">
                                        <div class="num"><em>11.527</em>ç±³</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="reserves">计算储量<em class="num">290789.9KG</em></div>
                        <div class="date">2025-09-25 10:00</div>
                    </div>
                </div>
            </li>
            <li>
                <div class="con">
                    <div class="box">
                        <div class="top">
                            <div class="ll">
                                <div class="num">4号筒仓</div>
                                <div class="tit">玉米</div>
                            </div>
                            <a href="" class="more">详情 &gt;</a>
                        </div>
                        <div class="picbox">
                            <div class="pic">
                                <img th:src="@{/img/web/grain/height-all.png}" alt="">
                            </div>
                            <div class="heat">
                                <div class="line">
                                    <div class="sline" style="height: 58%;">
                                        <div class="num"><em>11.527</em>ç±³</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="reserves">计算储量<em class="num">290789.9KG</em></div>
                        <div class="date">2025-09-25 10:00</div>
                    </div>
                </div>
            </li>
            <li>
                <div class="con">
                    <div class="box">
                        <div class="top">
                            <div class="ll">
                                <div class="num">5号筒仓</div>
                                <div class="tit">玉米</div>
                            </div>
                            <a href="" class="more">详情 &gt;</a>
                        </div>
                        <div class="picbox">
                            <div class="pic">
                                <img th:src="@{/img/web/grain/height-all.png}" alt="">
                            </div>
                            <div class="heat">
                                <div class="line">
                                    <div class="sline" style="height: 58%;">
                                        <div class="num"><em>11.527</em>ç±³</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="reserves">计算储量<em class="num">290789.9KG</em></div>
                        <div class="date">2025-09-25 10:00</div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:inline="javascript">
    //料位列表
    var listDepot = [[${listDepot}]];

    renderDepotData();

    function renderDepotData() {

        var html = '';
        if (listDepot) {
            $.each(listDepot, function (index, item) {
                var depot = item.depotData;

                html += '<li><div class="con"><div class="box"><div class="top"><div class="ll">';
                html += '<div class="num">' + (depot.name == null ? "" : depot.name) + '</div>';
                html += '<div class="tit">' + (depot.foodVarietyName == null ? "--" : depot.foodVarietyName) + '</div></div>';
                html += '<a href="../../basic/grain/view-check3?depotId=' + depot.id + '" class="more">详情 &gt;</a></div>';
                html += '<div class="picbox"><div class="pic"><img src="/img/web/grain/height-all.png" alt=""></div>';
                html += '<div class="heat"><div class="line">';
                html += '<div class="sline" style="height: ' + (item.heightPer == null ? "--" : item.heightPer) + '%;">';
                html += '<div class="num"><em>' + (item.height == null ? "--" : item.height) + '</em> ç±³</div>';
                html += '</div></div></div></div>';
                html += '<div class="reserves">计算储量<em class="num">' + (item.weight == null ? "--" : (item.weight).toFixed(2)) + ' KG</em></div>';
                html += '<div class="date">' + (item.receiveDate == null ? "暂无检测记录" : formatDate('Y-mm-dd HH:MM', new Date(item.receiveDate))) + '</div>';
                html += '</div></div></li>';
            });
        } else {
            html += '<li><div class="con"><div class="box"><div class="top"><div class="ll">';
            html += '<div class="num">--</div>';
            html += '<div class="tit">--</div></div>';
            html += '<a href="javascript:;" class="more">详情 &gt;</a></div>';
            html += '<div class="picbox"><div class="pic"><img src="/img/web/grain/height-all.png" alt=""></div>';
            html += '<div class="heat"><div class="line">';
            html += '<div class="sline" style="height: 0%;">';
            html += '<div class="num"><em>--</em> ç±³</div>';
            html += '</div></div><div class="temperature">-- C°</div></div></div>';
            html += '<div class="reserves">计算储量<em class="num">-- KG</em></div>';
            html += '<div class="date">--</div>';
            html += '</div></div></li>';
        }
        $("#oilList").html(html);
    }

    /**
     * æ ¼å¼åŒ–日期
     * @param fmt
     * @param date
     * @return {*}
     */
    function formatDate(fmt, date) {
        var ret;
        var opt = {
            "Y+": date.getFullYear().toString(),        // å¹´
            "m+": (date.getMonth() + 1).toString(),     // æœˆ
            "d+": date.getDate().toString(),            // æ—¥
            "H+": date.getHours().toString(),           // æ—¶
            "M+": date.getMinutes().toString(),         // åˆ†
            "S+": date.getSeconds().toString()          // ç§’
            // æœ‰å…¶ä»–格式化字符需求可以继续添加，必须转化成字符串
        };
        for (var k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            }
        }
        return fmt;
    }
</script>
</body>

</html>