You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
317 lines
19 KiB
317 lines
19 KiB
2 years ago
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>长春市教育装备挂图作战</title>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="./css/index.css">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="app" style="height: 100%;">
|
||
|
|
|
||
|
|
<div class="divHeader">2021长春市教育装备挂图作战</div>
|
||
|
|
<div class="reportPPT"><a href="./files/2021年长春市教育装备分析报告.pptx">生成报告(PPT)</a></div>
|
||
|
|
<div class="reportWord"><a href="./files/2021年长春市教育装备分析报告.doc">生成报告(Word)</a></div>
|
||
|
|
|
||
|
|
<div class="divBody">
|
||
|
|
<div class="left">
|
||
|
|
<div class="left_1">
|
||
|
|
<div class="left_1_box">
|
||
|
|
<img class="img-title" src="./images/u8.png">
|
||
|
|
<div class="txt-title">年度项目概览</div>
|
||
|
|
<div class="left_1_box_tb">
|
||
|
|
<div class="circle-div-1">
|
||
|
|
<img class="rotation" src="./images/zl.png">
|
||
|
|
<img class="circle-div-1-icon" src="./images/u266.svg">
|
||
|
|
</div>
|
||
|
|
<div class="circle-div-1-content">
|
||
|
|
<div style="color: #01DFF4;margin-bottom: 30px;">项目总量</div>
|
||
|
|
<div style="color: #01DFF4;">128<span style="font-size: 12px;"> 个</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="circle-div-2">
|
||
|
|
<img class="rotation" src="./images/zl.png">
|
||
|
|
<img class="circle-div-2-icon" src="./images/u266.svg">
|
||
|
|
</div>
|
||
|
|
<div class="circle-div-1-content">
|
||
|
|
<div style="color: #01DFF4;margin-bottom: 30px;">预算总额</div>
|
||
|
|
<div style="color: #01DFF4;">5546<span style="font-size: 12px;"> 万元</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="left_2">
|
||
|
|
<div class="left_2_box">
|
||
|
|
<img class="img-title" src="./images/u8.png">
|
||
|
|
<div class="txt-title">项目异常情况</div>
|
||
|
|
<div class="left_2_box_tb">
|
||
|
|
<div
|
||
|
|
style="display: flex;align-items: center;justify-content: space-around;margin-top: 20px;">
|
||
|
|
<div style="position: relative;">
|
||
|
|
<img src="./images/u313.png" width="170" height="110">
|
||
|
|
<div class="boxTextNum">5</div>
|
||
|
|
<div class="boxTextTtile">项目逾期 / 次</div>
|
||
|
|
</div>
|
||
|
|
<div style="position: relative;">
|
||
|
|
<img src="./images/u313.png" width="170" height="110">
|
||
|
|
<div class="boxTextNum">1</div>
|
||
|
|
<div class="boxTextTtile">项目关闭 / 次</div>
|
||
|
|
</div>
|
||
|
|
<div style="position: relative;">
|
||
|
|
<img src="./images/u313.png" width="170" height="110">
|
||
|
|
<div class="boxTextNum">3</div>
|
||
|
|
<div class="boxTextTtile">重复申报 / 次</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="padding: 0 20px;height: 40%;">
|
||
|
|
<p>逾期项目</p>
|
||
|
|
<div class="yqItem">
|
||
|
|
<div class="jiao left_up_jiao"></div>
|
||
|
|
<div class="jiao left_down_jiao"></div>
|
||
|
|
<div class="jiao right_up_jiao"></div>
|
||
|
|
<div class="jiao right_down_jiao"></div>
|
||
|
|
<div class="yqContent">
|
||
|
|
<img src="./images/u311.svg" style="margin-left: 20px;">
|
||
|
|
<div class="yqOrg">长春市第一中学</div>
|
||
|
|
<div class="yqNum">
|
||
|
|
逾期 <span style="font-size: 18px;font-weight: bolder;">3</span> 次
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="yqItem">
|
||
|
|
<div class="jiao left_up_jiao"></div>
|
||
|
|
<div class="jiao left_down_jiao"></div>
|
||
|
|
<div class="jiao right_up_jiao"></div>
|
||
|
|
<div class="jiao right_down_jiao"></div>
|
||
|
|
<div class="yqContent">
|
||
|
|
<img src="./images/u311.svg" style="margin-left: 20px;">
|
||
|
|
<div class="yqOrg">长春市第二中学</div>
|
||
|
|
<div class="yqNum">
|
||
|
|
逾期 <span style="font-size: 18px;font-weight: bolder;">2</span> 次
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="yqItem">
|
||
|
|
<div class="jiao left_up_jiao"></div>
|
||
|
|
<div class="jiao left_down_jiao"></div>
|
||
|
|
<div class="jiao right_up_jiao"></div>
|
||
|
|
<div class="jiao right_down_jiao"></div>
|
||
|
|
<div class="yqContent">
|
||
|
|
<img src="./images/u311.svg" style="margin-left: 20px;">
|
||
|
|
<div class="yqOrg">长春市第七中学</div>
|
||
|
|
<div class="yqNum">
|
||
|
|
逾期 <span style="font-size: 18px;font-weight: bolder;">1</span> 次
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="padding: 0 20px;height: 15%;">
|
||
|
|
<p>关闭项目</p>
|
||
|
|
<div class="yqItem">
|
||
|
|
<div class="jiao left_up_jiao"></div>
|
||
|
|
<div class="jiao left_down_jiao"></div>
|
||
|
|
<div class="jiao right_up_jiao"></div>
|
||
|
|
<div class="jiao right_down_jiao"></div>
|
||
|
|
<div class="yqContent">
|
||
|
|
<img src="./images/u363.svg" style="margin-left: 20px;">
|
||
|
|
<div class="yqOrg">长春市养正高级中学</div>
|
||
|
|
<div class="yqNum">
|
||
|
|
逾期 <span style="font-size: 18px;font-weight: bolder;">1</span> 次
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div style="padding: 0 20px;height: 30%;">
|
||
|
|
<p>近五年重复申报项目</p>
|
||
|
|
<div class="yqItem">
|
||
|
|
<div class="jiao left_up_jiao"></div>
|
||
|
|
<div class="jiao left_down_jiao"></div>
|
||
|
|
<div class="jiao right_up_jiao"></div>
|
||
|
|
<div class="jiao right_down_jiao"></div>
|
||
|
|
<div class="yqContent">
|
||
|
|
<img src="./images/u381.svg" style="margin-left: 20px;">
|
||
|
|
<div class="yqOrgA">长春市第二实验小学</div>
|
||
|
|
<div class="yqSub">学生课桌椅</div>
|
||
|
|
<div class="yqNum">
|
||
|
|
申报 <span style="font-size: 18px;font-weight: bolder;">2</span> 次
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="yqItem">
|
||
|
|
<div class="jiao left_up_jiao"></div>
|
||
|
|
<div class="jiao left_down_jiao"></div>
|
||
|
|
<div class="jiao right_up_jiao"></div>
|
||
|
|
<div class="jiao right_down_jiao"></div>
|
||
|
|
<div class="yqContent">
|
||
|
|
<img src="./images/u381.svg" style="margin-left: 20px;">
|
||
|
|
<div class="yqOrgA">长春市第一中学</div>
|
||
|
|
<div class="yqSub">创客教室</div>
|
||
|
|
<div class="yqNum">
|
||
|
|
申报 <span style="font-size: 18px;font-weight: bolder;">2</span> 次
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="middle">
|
||
|
|
<div class="middle_1">
|
||
|
|
<div class="middle_1_box">
|
||
|
|
<img class="img-title" src="./images/u8.png">
|
||
|
|
<div class="txt-title">项目进展情况</div>
|
||
|
|
|
||
|
|
<div class="middle_1_box_1_tb">
|
||
|
|
<p style="margin: 20px 0 0 40px;">完成进度</p>
|
||
|
|
<div class="wcjd">
|
||
|
|
<div style="position: relative;color: #0085FF;">
|
||
|
|
<img src="./images/xmlx.png" width="100">
|
||
|
|
<div class="wcjd_num" id="xmlxNum">128</div>
|
||
|
|
<div class="wcjd_text">项目立项</div>
|
||
|
|
</div>
|
||
|
|
<div style="position: relative;color: #F8B551;">
|
||
|
|
<img src="./images/zbcg.png" width="100">
|
||
|
|
<div class="wcjd_num" id="zbcgNum">121</div>
|
||
|
|
<div class="wcjd_text">招标采购</div>
|
||
|
|
</div>
|
||
|
|
<div style="position: relative;color: #B769FF;">
|
||
|
|
<img src="./images/ssys.png" width="100">
|
||
|
|
<div class="wcjd_num" id="ssysNum">60</div>
|
||
|
|
<div class="wcjd_text">实施验收</div>
|
||
|
|
</div>
|
||
|
|
<div style="position: relative;color: #32B16C;">
|
||
|
|
<img src="./images/xmbf.png" width="100">
|
||
|
|
<div class="wcjd_num" id="xmbfNum">26</div>
|
||
|
|
<div class="wcjd_text">项目拨付</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="middle_1_box_2_tb">
|
||
|
|
<p style="margin: -5px 0 0 40px;">趋势分布</p>
|
||
|
|
<div class="qsfb" id="qsfb"></div>
|
||
|
|
</div>
|
||
|
|
<div class="middle_1_box_3_tb">
|
||
|
|
<p style="margin: 0 0 0 40px;">实施进度</p>
|
||
|
|
<div class="ssjd">
|
||
|
|
<div class="ssjd_left" id="ssjd"></div>
|
||
|
|
<div class="ssjd_right">
|
||
|
|
<div class="ssjd_right_yjl">
|
||
|
|
<div style="margin: 10px;border: 1px solid #237BBC;border-radius: 3px;">
|
||
|
|
<div style="text-align: center;color: #fff;font-size: 16px;margin: 10px 0;">有监理</div>
|
||
|
|
<div style="border-bottom: 1px solid #237BBC;margin: 0 20px;"></div>
|
||
|
|
<div style="padding: 0 20px 0 40px;">
|
||
|
|
<ul style="list-style-type:square;" class="ssjd_ul">
|
||
|
|
<li><div style="display: flex;align-items: center;justify-content: space-between;"><span>共计问题</span><span>11</span></div></li>
|
||
|
|
<li><div style="display: flex;align-items: center;justify-content: space-between;"><span>已整改</span><span>87</span></div></li>
|
||
|
|
<li><div style="display: flex;align-items: center;justify-content: space-between;color: #F8B551;"><span>待整改</span><span>35</span></div></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="ssjd_right_wjl">
|
||
|
|
<div style="margin: 10px;border: 1px solid #237BBC;border-radius: 3px;">
|
||
|
|
<div style="text-align: center;color: #fff;font-size: 16px;margin: 10px 0;">无监理</div>
|
||
|
|
<div style="border-bottom: 1px solid #237BBC;margin: 0 20px;"></div>
|
||
|
|
<div style="padding: 0 20px 0 40px;">
|
||
|
|
<ul style="list-style-type:square;" class="ssjd_ul">
|
||
|
|
<li><div style="display: flex;align-items: center;justify-content: space-between;"><span>已上传过程材料项目</span><span>56</span></div></li>
|
||
|
|
<li><div style="display: flex;align-items: center;justify-content: space-between;color: #F8B551;"><span>待上传过程材料项目</span><span>31</span></div></li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="right">
|
||
|
|
<div class="right_1">
|
||
|
|
<div class="right_1_box">
|
||
|
|
<img class="img-title" src="./images/u8.png">
|
||
|
|
<div class="txt-title">项目单位排行</div>
|
||
|
|
<div class="right_1_box_1_tb">
|
||
|
|
<div class="tableSelect">
|
||
|
|
<ul class="tab-tilte">
|
||
|
|
<li style="list-style: none;" v-for="(title,index) in tabTitle" @click="tabClick(index)"
|
||
|
|
:class="[cur == index ? 'active' : '']">
|
||
|
|
{{title}}
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="tabBottomLine"></div>
|
||
|
|
|
||
|
|
<div class="scroll">
|
||
|
|
<vue3-seamless-scroll :list="list" :step="0.3" hover>
|
||
|
|
<div class="item" v-for="item in list" :key="index">
|
||
|
|
<div class="orgItems">
|
||
|
|
<div class="orgItem">
|
||
|
|
<div class="orgItemTitle">
|
||
|
|
<div class="orgTitleNum">{{item.num}}</div>
|
||
|
|
<div class="orgTitleTxt">{{item.schoolName}}</div>
|
||
|
|
</div>
|
||
|
|
<div class="orgItemTypeList">
|
||
|
|
<div class="typeListItems" v-for="(projectItem, index) in item.projectList">
|
||
|
|
<div class="dot" :class="'dotColor'+index"></div>
|
||
|
|
<div class="typeItemTxt">{{projectItem.projectName}}</div>
|
||
|
|
<div class="typeItemNum">{{projectItem.projectCount}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="circle">
|
||
|
|
<div>{{item.completionRate}}%</div>
|
||
|
|
<div>完成率</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</vue3-seamless-scroll>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="right_2">
|
||
|
|
<div class="right_2_box">
|
||
|
|
<img class="img-title" src="./images/u8.png">
|
||
|
|
<div class="txt-title">近5年项目总体分布</div>
|
||
|
|
<div class="right_2_box_1_tb">
|
||
|
|
<div style="text-align: right;font-size: 12px;margin-right: 25px;">项目总量 | <span style="color: #AAAAAA;">项目总预算</span></div>
|
||
|
|
<div class="wnfb" id="wnfb"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript" src="./js/vue.global.prod.min.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/axios.min.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/vue3-seamless-scroll.min.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/echarts.min.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/echarts-liquidfill.min.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/jquery.min.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/tagcanvas.min.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/countUp.min.js"></script>
|
||
|
|
<script src="./js/data.js"></script>
|
||
|
|
<script src="./js/index.js"></script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
|
||
|
|
</html>
|