cs-fzsc10.html 13.3 KB
<!DOCTYPE html>
<html lang="en">
    <!-- TODO: 废弃文件 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" type="text/css" href="/frontweb/view/reviewmanage/resultreview/css/font-awesome.css"/>
	<link rel="stylesheet" type="text/css" href="/frontweb/view/reviewmanage/resultreview/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/frontweb/view/reviewmanage/resultreview/js/layui-v2.5.5/css/layui.css">
    <link rel="stylesheet" href="/frontweb/view/reviewmanage/resultreview/js/layui_ext/dtree/dtree.css">
    <link rel="stylesheet" href="/frontweb/view/reviewmanage/resultreview/js/layui_ext/dtree/font/dtreefont.css">
    <link rel="stylesheet" href="/frontweb/view/reviewmanage/resultreview/css/common.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="ghcg_l">
        <div class="ghcg_right">
            <div class="ghcg_right_nav">
                <span class="ghcg_right_nav_left">某市国土空间规划成果</span>
                <span class="ghcg_right_nav_right" id="back">
                    <img style="vertical-align:sub" src="./images/icon_back.png" alt="">
                返回</span>
            </div>
            <div class="ghcg_right_footer">
                <div class="ghcg_right_footer_left">
                    <div class="ghcg_right_footer_left_top">
                        资料目录
                    </div>
                    <div style="background: rgba(0,0,0,0.05);width: 80%;height: 1px;">
                    </div>
                    <!-- 树组件 -->
                    <div class="dtree-container upload div-attachment" id="ghcg_fj_view">
                       <ul id="demoTree" style="width:100%" class="dtree" data-id="0"></ul>
                    </div>
                </div>
                <!-- pdf文件 -->
                <div class="ghcg_right_footer_middle">
                    <iframe id="ghcg_iframe" width="100%" height="100%" name="pdftofrist" scrolling="no"  marginwidth="0" marginheight="0" 
                    src="/frontweb/view/reviewmanage/resultreview/widgets/Review/Review/images/2.pdf"></iframe>
                </div>
                <div class="ghcg_right_footer_right">
                    <div class="ghcg_right_footer_right_top">
                        辅助审查
                    </div>
                    <div>
                    </div>
                    <!-- 辅助审查 -->
                    <div class="ghcg_right_footer_right_middle">
                       <div class="ghcg_right_footer_right_middle_ziti">
                           <button class="layui-btn layui-btn-normal">
                                指标符合性
                           </button>
                           <span class="ghcg_right_footer_right_middle_ziti_span">已审查</span>
                       </div>
                       <div class="ghcg_right_footer_right_middle_ziti">
                           <button class="layui-btn layui-btn-normal">
                                空间一致性
                           </button>
                           <span class="ghcg_right_footer_right_middle_ziti_span">未审查</span>
                       </div>
                       <div class="ghcg_right_footer_right_middle_ziti">
                           <button class="layui-btn layui-btn-normal">
                                函数一致性
                           </button>
                           <span class="ghcg_right_footer_right_middle_ziti_span">已审查</span>
                       </div>
                       <div class="ghcg_right_footer_right_middle_ziti">
                           <button class="layui-btn layui-btn-normal">
                                区域协调性
                           </button>
                           <span class="ghcg_right_footer_right_middle_ziti_span">未审查</span>
                       </div>
                    </div>
                    <div class="ghcg_right_footer_right_footer">
                        <button class="layui-btn layui-btn-normal ghcg_right_footer_right_footer_button" id="project_scbg">
                          <img src="./images/审查报告.png" alt="">审查报告</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="/frontweb/view/reviewmanage/resultreview/js/layui-v2.5.5/layui.js"></script>
<script src="/frontweb/view/reviewmanage/resultreview/js/vue/vue.js"></script>
<script src="/frontweb/view/reviewmanage/resultreview/js/jquery.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="/frontweb/common/js/config.js"></script>
<script src="/frontweb/view/reviewmanage/resultreview/js/common.js"></script>
<script src="./fjOperation.js"></script>
<script src="./Widget.js"></script>
</html>
<script>
    $(function () {
        // 测试数据
        let _data = [
            {
                title: '01某市国土空间规划(2019-2035)——测试导入',
                id: 1,
                parentId: 0,
                spread:true,
                basicData: {
                    test: 0
                },
                children: [
                    {
                        title:'成果数据基本信息.txt',
                        id:1001,
                        parentId: 1,
                        // iconClass:"dtree-icon-null top-icon-bottom"
                    },
                    {
                        title:'数据库建设文档',
                        id:1002,
                        parentId: 1,
                        children: [],
                        iconClass:"dtree-icon-null top-icon"
                    },
                    {
                        title: '文档数据',
                        id: 1000,
                        parentId: 1,
                        spread:true,
                        children:[
                            {
                                title: '某某市国土规划(2019-2035).pdf',
                                parentId: 1000,
                                id: 100001
                            }
                        ]
                    },
                    {
                        title: '栅格数据',
                        id: 1001,
                        parentId: 1,
                        spread:true,
                        children:[
                            {
                                title:'成果图',
                                id:100001,
                                parentId: 1001,
                                spread:true,
                                children:[
                                    {
                                        title:'附图1国土空间格局图.jpg',
                                        id:1000001,
                                        parentId: 100001,
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        title: '矢量数据',
                        id: 1002,
                        parentId: 1,
                        spread:true,
                        children:[
                            {
                                title:'市级国土空间规划分区0429.gdb.zip',
                                id:10001,
                                parentId: 1002,
                            }
                        ]
                    },
                    {
                        title: '表格数据',
                        id: 1003,
                        parentId: 1,
                        spread:true,
                        children:[
                            {
                                title:'国土空间规划指标体系.mdb',
                                id:10001,
                                parentId: 1003,
                            },
                            {
                                title:'附表国土用途规划分类.xlsx',
                                id:10002,
                                parentId: 1003,
                            }
                        ]
                    }
                ]}
        ]; // 使用data加载/ 使用url加载(可与data加载同时存在),
        dTreeInit('demoTree', _data, res => {
            debugger
        }, (optres, nodename) => {
            debugger
            if (nodename === 'view') {
                $('#ghcg_iframe').attr('src','/frontweb/view/reviewmanage/resultreview/widgets/Review/Review/images/icon_menu.png')
            } else if (nodename === 'delete') {

            } else if (nodename === 'download') {

            }
        });

        //审查报告按钮监听
        $('#project_scbg').click(function(){
            $('#ghcg_iframe').attr('src','/frontweb/view/reviewmanage/resultreview/widgets/Review/Review/images/XXXXXX县国土空间规划成果初审报告.pdf')
        })
    })
</script>
<style scoped >
    *{
        margin: 0;
        padding: 0;
    }
    html{
        width: 100%;
        height: 100%;
    }
    body{
        width: 100%;
        height: 100%;
    }
    .ghcg_l{
        position: relative;
        height: 100%;
    }
    .layui-nav-tree{
      width: 164px;
    }
    .ghcg_right{
        position: absolute;
        width: calc(100% );
        height: calc(100% );
        /* margin-left: 150px; */
        background-color: #fff;
    }
    .ghcg_right_nav{
        height: 56px;
        display: flex;
        justify-content: space-between;
        padding-left: 24px;
        padding-right: 24px;
        background: #FFFFFF;
        box-shadow: 0 2px 8px 0 rgba(0,0,0,0.06);
    }
    .ghcg_right_nav_left{
        font-family: PingFangSC-Medium;
        font-size: 16px;
        color: #000000;
        text-align: center;
        line-height: 56px;
        font-weight:  600;
    }
    .ghcg_right_nav_right{
        font-family: PingFangSC-Medium;
        font-size: 14px;
        color: #1890FF;
        line-height: 56px;
        cursor: pointer;
    }
    .ghcg_right_footer{
        display: flex;
        height: calc(100% - 58px);
    }
    .ghcg_right_footer_left{
        width: 23%;
    }
    .ghcg_right_footer_left_top{
        font-family: PingFangSC-Medium;
        font-size: 14px;
        color: #000000;
        margin-left: 22px;
        height: 47px;
        font-weight: 600;
        line-height: 47px;
    }
    .ghcg_right_footer_left_bottom>.dtree>.dtree-nav-item{
        padding-left: 20px;
        line-height: 36px;
        height: 36px;
    }
    .dtree-nav-div{
      height: 36px;
    }
    .dtree-nav-item{
      line-height: 36px;
    }
    .top-icon::before{
      content: '';
      display: inline-block;
      width: 14px ;
      height: 13px ;
      margin-right: 3px;
      background: url('/frontweb/view/reviewmanage/resultreview/widgets/Review/Review/images/icon_file_list.png') ;
      background-size: cover;
    }
    .top-icon-bottom::before{
      content: '';
      display: inline-block;
      width: 13px ;
      height: 13px ;
      margin-right: 3px;
      background: url('/frontweb/view/reviewmanage/resultreview/widgets/Review/Review/images/icon_page.png') ;
      background-size: 100% 100%;
    }
    .dtree{
        width: 100% !important;
        margin-left: 3px;
        font-size: 14px;
    }
    .dtree-zdy-item-this{background-color:rgba(24,144,255,0.10)!important;} /* 当前选中行样式*/
    .dtree-zdy-item:hover{background-color:rgba(24,144,255,0.10)!important;} /* 行悬停样式*/
    /* .dtree-zdy-item cite{font-size:14px!important;} 行文字样式 */
    .dtree-zdy-item:hover cite{color:black} /* 行悬停文字样式*/
    .ghcg_right_footer_middle{
        flex: 1;
        /* height: 100%; */
    }
    .ghcg_right_footer_right{
        /* width: 20%; */
        width: 18.4%;
        font-size: 14px;
    }
    .ghcg_right_footer_right_top{
        font-family: PingFangSC-Medium;
        font-size: 14px;
        color: #000000;
        margin-left: 20px;
        font-weight: 600;
        height: 47px;
        line-height: 47px;
    }
    .ghcg_right_footer_right_middle{
        padding-left: 20px;
        display: flex;
        flex-direction: column;
    }
    .ghcg_right_footer_right_middle_ziti{
        height:40px;
        line-height: 40px;
    }
    .ghcg_right_footer_right_middle_ziti>.layui-btn{
        width: 176px;
        background: #FFFFFF;
        border: 1px solid #0096EB;
        border-radius: 2px;
        color: #0096EB;
        padding: 0;
    }
    .ghcg_right_footer_right_middle_ziti_span{
        float: right;
        padding-right: 20px;
        font-family: "Microsoft YaHei", "微软雅黑",PingFangSC-Regular;
    }
    .ghcg_right_footer_right_footer{
        margin-top: 40px;
        margin-left: 50%;
    }
    .ghcg_right_footer_right_footer>.ghcg_right_footer_right_footer_button{
        transform: translateX(-50%);
        background: #0096EB;
        border: 1px solid #0096EB;
        border-radius: 2px;
        color: white;
        width: 96px;
        padding: 0;
    }
    .ghcg_right_footer_right_footer>.ghcg_right_footer_right_footer_button>img{
        width: 13px;
        margin-right: 8.2px;
    }

</style>