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.

379 lines
23 KiB

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>长春市教育装备与信息化项目智慧管理系统 </title>
<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>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="app" style="height: 100%;">
<div class="divHeader">
长春市教育装备与信息化项目智慧管理系统
</div>
<div class="selectYear">
<select style="background-color:#428BCA;border: 0;color: #fff;">
<option value="2021">2021</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
</select>
</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 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;">17<span style="font-size: 12px;">&nbsp;&nbsp;</span>
</div>
</div>
<div class="circle-div-2">
<img src="./images/ze.png">
<img class="circle-div-2-icon" src="./images/u276.svg">
</div>
<div class="circle-div-1-content">
<div style="color: #FFC37D;margin-bottom: 30px;">预算总额</div>
<div style="color: #FFC37D;">887.9<span style="font-size: 12px;">&nbsp;&nbsp;万元</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;">
<div style="position: relative;">
<img src="./images/u314.png" style="width: 170px;">
<div class="boxTextNum">5<span style="font-size: 14px;">/次</span></div>
<div class="boxTextTtile">项目逾期</div>
</div>
<div style="position: relative;">
<img src="./images/u314.png" style="width: 170px;">
<div class="boxTextNum">1<span style="font-size: 14px;">/次</span></div>
<div class="boxTextTtile">项目中止</div>
</div>
<div style="position: relative;">
<img src="./images/u314.png" style="width: 170px;">
<div class="boxTextNum">3<span style="font-size: 14px;">/次</span></div>
<div class="boxTextTtile">重复申报</div>
</div>
</div>
<div style="height: 74%; display: inline-block;overflow: hidden;position: relative;">
<vue3-seamless-scroll :list="['1','2','3','4','5']" :step="0.3" hover>
<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">2021年图书馆项目</div>
<div class="yqNum">
逾期 <span style="font-size: 18px;font-weight: bolder;">3</span>
</div>
</div>
</div>
<div class="yqItem_child_items">
<div class="child_item">
<div class="child_item_title">技术方案补充</div>
<div class="child_item_count">逾期3天</div>
</div>
<div class="child_item">
<div class="child_item_title">申请市级验收</div>
<div class="child_item_count">逾期15天</div>
</div>
<div class="child_item">
<div class="child_item_title">资金请示文件提交</div>
<div class="child_item_count">逾期12天</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">2021年多功能体育场改造</div>
<div class="yqNum">
逾期 <span style="font-size: 18px;font-weight: bolder;">1</span>
</div>
</div>
</div>
<div class="yqItem_child_items">
<div class="child_item">
<div class="child_item_title">技术方案补充</div>
<div class="child_item_count">逾期3天</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">2021年数字化校园项目</div>
<div class="yqNum">
技术方案初审
</div>
</div>
</div>
</div>
<div style="padding: 0 20px;">
<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="yqOrg">学生课桌椅</div>
<div class="yqNum">重复申报 2 次 </div>
</div>
</div>
<div class="yqItem_child_items">
<div class="child_item">
<div class="child_item_title">2018年基础设施购置</div>
<div class="child_item_count">预算金额80万</div>
</div>
<div class="child_item">
<div class="child_item_title">2019年基础设施购置</div>
<div class="child_item_count">预算金额80万</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/lajitong1.svg" style="margin-left: 20px;">
<div class="yqOrg">即将报废-2017年特色装备</div>
<div class="yqNum">
剩余 125 天
</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/yanqi.svg" style="margin-left: 20px;">
<div class="yqOrg">延期报废-2016年基本条件装备</div>
<div class="yqNum">
2022-08-09
</div>
</div>
</div>
</div>
-->
</vue3-seamless-scroll>
</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;">
<img src="./images/u313.png" width="160" height="95">
<div class="wcjd_num">17</div>
<div class="wcjd_text">年度项目</div>
</div>
<div style="position: relative">
<img src="./images/u313.png" width="160" height="95">
<div class="wcjd_num">4</div>
<div class="wcjd_text">招标采购</div>
</div>
<div style="position: relative;">
<img src="./images/u313.png" width="160" height="95">
<div class="wcjd_num">3</div>
<div class="wcjd_text">实施验收</div>
</div>
<div style="position: relative;">
<img src="./images/u313.png" width="160" height="95">
<div class="wcjd_num">1</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="xmxxjd">
<div class="xmxxjd_out">
<div class="xmxxjd_card">
<div class="card_label_green">新建</div>
<div class="card_title">2021年图书馆项目</div>
<div class="card_progress_out">
<div class="card_progress_inner"></div>
</div>
<div class="card_down">
<span style="font-size: 14px;color: #AAA;">2021-05-12</span>
<span style="font-size: 14px;color: #3CD5FF;">招标采购 - 技术方案上报</span>
</div>
</div>
</div>
<div class="xmxxjd_out">
<div class="xmxxjd_card">
<div class="card_label_green">新建</div>
<div class="card_title">2021年基础设施购置</div>
<div class="card_progress_out">
<div class="card_progress_inner_1"></div>
</div>
<div class="card_down">
<span style="font-size: 14px;color: #AAA;">2021-05-12</span>
<span style="font-size: 14px;color: #3CD5FF;">实施验收 - 项目单位验收</span>
</div>
</div>
</div>
<div class="xmxxjd_out">
<div class="xmxxjd_card">
<div class="card_label_orange">续拨</div>
<div class="card_title">2021年多功能体育场改造</div>
<div class="card_progress_out">
<div class="card_progress_inner"></div>
</div>
<div class="card_down">
<span style="font-size: 14px;color: #AAA;">2021-05-12</span>
<span style="font-size: 14px;color: #3CD5FF;">招标采购 - 技术方案上报</span>
</div>
</div>
</div>
<div class="xmxxjd_out">
<div class="xmxxjd_card">
<div class="card_label_green">新建</div>
<div class="card_title">2021年学生桌椅</div>
<div class="card_progress_out">
<div class="card_progress_inner"></div>
</div>
<div class="card_down">
<span style="font-size: 14px;color: #AAA;">2021-05-12</span>
<span style="font-size: 14px;color: #3CD5FF;">招标采购 - 技术方案上报</span>
</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 id="xmssqk" style="height: 95%;margin-top: 10px;"></div>
</div>
</div>
</div>
<div class="right_1">
<div class="right_2_box">
<img class="img-title" src="./images/u8.png">
<div class="txt-title">近五年项目分布</div>
<div class="right_2_box_1_tb">
<div style="text-align: right;font-size: 12px;margin-right: 25px;">
<span id="wnfbZl" style="color: #0A99DA;">项目/个</span>
</div>
<div class="wnfb" id="xmzl"></div>
</div>
</div>
</div>
<div class="right_1">
<div class="right_2_box">
<img class="img-title" src="./images/u8.png">
<div class="txt-title">近五年项目预算分布</div>
<div class="right_2_box_1_tb">
<div style="text-align: right;font-size: 12px;margin-right: 25px;">
<span id="wnfbZl" style="color: #7FCEB5;">金额/万元</span>
</div>
<div class="wnfb" id="xmzys"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="./js/data.js"></script>
<script src="./js/index.js"></script>
</body>
</html>