huanghai
/
dsProject
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'main'
${ noResults }
dsProject/dsBase/WebRoot/html/orgDataView/index.html

435 lines
28 KiB
Raw Permalink Blame History

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>长春市教育装备与信息化项目智慧管理系统</title>
<link rel="shortcut icon" href="#" />
<!-- 导入样式 -->
<!-- <link rel="stylesheet" href="./cdn/dist/index.css" /> -->
<link rel="stylesheet" href="../cdn/theme-chalk/index.css" />
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/pietimer.css">
</head>
<body>
<div id="app" style="height: 100%;">
<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 target="_blank"
href="https://ow365.cn/?i=14531&ssl=1&info=3&fname=955a974f-07d0-41f9-95bb-99fab4525a88.pptx&furl=https://video.edusoa.com/ccsjy-gtzz/955a974f-07d0-41f9-95bb-99fab4525a88.pptx">生成报告(PPT)</a>
</div>
<div class="reportWord"><a target="_blank"
href="https://ow365.cn/?i=14531&ssl=1&info=3&fname=c3db1cbb-0af0-4868-9c12-ceb669d47a4a.doc&furl=https://video.edusoa.com/ccsjy-gtzz/c3db1cbb-0af0-4868-9c12-ceb669d47a4a.doc">生成报告(Word)</a>
</div>
<el-header>长春市教育装备与信息化项目智慧管理系统</el-header>
<el-container>
<el-aside>
<el-row style="height: 25%;">
<el-col style="height: 100%;">
<div class="boxTop">
<img class="img-title" src="./images/u8.png">
<div class="txt-title">年度项目概览</div>
<div
style="position: absolute;top: 15px;left: 0;right: 10px;bottom: 5px;display: flex;align-items: center;justify-content:space-around;">
<div class="circle-div">
<el-image style="width: 55%;" src="./images/zl.png" fit="scale-down"></el-image>
<img src="./images/u266.svg" class="circle-icon">
</div>
<div style="color: #01DFF4;" class="circle-text">
<span>项目总量</span>
<span style="margin: 5px 0;"></span>
<span>1049 个</span>
</div>
<div class="circle-div">
<el-image style="width: 55%;" src="./images/ze.png" fit="scale-down"></el-image>
<img src="./images/u276.svg" class="circle-icon">
</div>
<div style="color: #FFC37D;" class="circle-text">
<span>预算总额</span>
<span style="margin: 5px 0;"></span>
<span>1071589.5 万元</span>
</div>
</div>
</div>
</el-col>
</el-row>
<el-row style="height: 75%;">
<el-col style="height: 100%;">
<div class="box">
<img class="img-title" src="./images/u8.png">
<div class="txt-title">项目异常情况</div>
<div style="position: absolute;top: 15px;bottom: 0;left: 0;right: 0;">
<div style="height: 20%;display: flex;">
<div class="rectangle-div">
<img src="./images/u314.png" alt="" style="width: 170px;">
<div class="rectangle-text-div">
<span class="rectangle-num-size">3<span
style="font-size: 14px;">/次</span></span>
<span style="margin: 3% 0;"></span>
<span class="rectangle-text-size">项目逾期</span>
</div>
</div>
<div class="rectangle-div">
<img src="./images/u314.png" alt="" style="width: 170px;">
<div class="rectangle-text-div">
<span class="rectangle-num-size">2<span
style="font-size: 14px;">/次</span></span>
<span style="margin: 3% 0;"></span>
<span class="rectangle-text-size">项目中止</span>
</div>
</div>
<div class="rectangle-div">
<img src="./images/u314.png" alt="" style="width: 170px;">
<div class="rectangle-text-div">
<span class="rectangle-num-size">2<span
style="font-size: 14px;">/次</span></span>
<span style="margin: 3% 0;"></span>
<span class="rectangle-text-size">重复申报</span>
</div>
</div>
</div>
<div style="height: 80%;color: #02C8D3;font-size: 12px;padding: 0 10px;">
<p class="strip-title">逾期项目</p>
<div class="strip-item">
<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">
<div class="yqLeft">
<img src="./images/u311.svg" style="margin-left: 20px;">
<div class="yqOrg">长春市第一中学</div>
</div>
<div class="yqRight">
逾期 <span
style="font-size: 16px;font-weight: bolder;">&nbsp;1&nbsp;</span> 次
</div>
</div>
</div>
<div class="strip-item">
<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">
<div class="yqLeft">
<img src="./images/u311.svg" style="margin-left: 20px;">
<div class="yqOrg">长春市第二中学</div>
</div>
<div class="yqRight">
逾期 <span
style="font-size: 16px;font-weight: bolder;">&nbsp;1&nbsp;</span> 次
</div>
</div>
</div>
<div class="strip-item">
<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">
<div class="yqLeft">
<img src="./images/u311.svg" style="margin-left: 20px;">
<div class="yqOrg">长春市第七中学</div>
</div>
<div class="yqRight">
逾期 <span
style="font-size: 16px;font-weight: bolder;">&nbsp;1&nbsp;</span> 次
</div>
</div>
</div>
<p class="strip-title">关闭项目</p>
<div class="strip-item">
<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">
<div class="yqLeft">
<img src="./images/u363.svg" style="margin-left: 20px;">
<div class="yqOrg">长春市养正高级中学</div>
</div>
<div class="yqRight">
逾期 <span
style="font-size: 16px;font-weight: bolder;">&nbsp;1&nbsp;</span> 次
</div>
</div>
</div>
<div class="strip-item">
<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">
<div class="yqLeft">
<img src="./images/u363.svg" style="margin-left: 20px;">
<div class="yqOrg">长春市第一实验小学</div>
</div>
<div class="yqRight">
逾期 <span
style="font-size: 16px;font-weight: bolder;">&nbsp;1&nbsp;</span> 次
</div>
</div>
</div>
<p class="strip-title">近五年重复申报项目</p>
<div class="strip-item">
<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">
<div class="yqLeft">
<img src="./images/u381.svg" style="margin-left: 20px;">
<div class="yqOrg">长春市第二实验小学</div>
</div>
<div class="yqMiddle">学生课桌椅</div>
<div class="yqRight">
逾期 <span
style="font-size: 16px;font-weight: bolder;">&nbsp;1&nbsp;</span> 次
</div>
</div>
</div>
<div class="strip-item">
<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">
<div class="yqLeft">
<img src="./images/u381.svg" style="margin-left: 20px;">
<div class="yqOrg">长春市第一中学</div>
</div>
<div class="yqMiddle">创客教室</div>
<div class="yqRight">
逾期 <span
style="font-size: 16px;font-weight: bolder;">&nbsp;1&nbsp;</span> 次
</div>
</div>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
</el-aside>
<el-main>
<el-row style="height: 100%;">
<el-col style="height: 100%;">
<div class="boxTop">
<img class="img-title" src="./images/u8.png">
<div class="txt-title">项目进展情况</div>
<div style="margin-left: 20px;margin-top: 30px;position: relative;">
<img src="./images/u84.svg">
<span
style="position: absolute;left: 10px;top: 2px;color: #69D9FE;font-size: 14px;">项目分布</span>
</div>
<div style="display: flex;align-items: center;margin: 20px 0;">
<div
style="position: relative;color: rgba(0, 255, 255, 0.756862745098039);width: 25%;text-align: center;">
<img src="./images/u313.png" width="160" height="95">
<div class="wcjd_num" id="xmlxNum">1049</div>
<div class="wcjd_text">年度项目</div>
</div>
<div
style="position: relative;color: rgba(0, 255, 255, 0.756862745098039);height: 100%;width: 25%;text-align: center;">
<img src="./images/u313.png" width="160" height="95">
<div class="wcjd_num" id="zbcgNum">236</div>
<div class="wcjd_text">招标采购</div>
</div>
<div
style="position: relative;color: rgba(0, 255, 255, 0.756862745098039);height: 100%;width: 25%;text-align: center;">
<img src="./images/u313.png" width="160" height="95">
<div class="wcjd_num" id="ssysNum">378</div>
<div class="wcjd_text">实施验收</div>
</div>
<div
style="position: relative;color: rgba(0, 255, 255, 0.756862745098039);height: 100%;width: 25%;text-align: center;">
<img src="./images/u313.png" width="160" height="95">
<div class="wcjd_num" id="xmbfNum">435</div>
<div class="wcjd_text">项目拨付</div>
</div>
</div>
<!-- <input type="button" id="test1" value="切换" @click="toggle()" />
<input type="button" id="test2" value="清除" @click="clear()" /> -->
<div style="margin-left: 20px;position: relative;">
<img src="./images/u84.svg">
<span
style="position: absolute;left: 10px;top: 2px;color: #69D9FE;font-size: 14px;">项目单位分布</span>
<div id="timer" style="width: 20px;height: 20px;position: absolute;right: 290px;top:-7px; "></div>
<div id="xmwcqk"
style="position: absolute;right: 25px;top:5px;display: flex;align-items: center;font-size: 12px;visibility:hidden;">
<div
style="display: flex;align-items: center;color: #fff;justify-content: space-around;width: 280px;">
项目完成情况
<div style="background: #4FC3F7;text-align: center;width: 35px;height: 35px; border-radius: 8px;"><<br />50%</div>
<div style="background: #2196F3;text-align: center;width: 35px;height: 35px; border-radius: 8px;">>=<br />50%</div>
<div style="background: #0288D1;text-align: center;width: 35px;height: 35px; border-radius: 8px;">>=<br />70%</div>
<div style="background: #0D47A1;text-align: center;width: 35px;height: 35px; border-radius: 8px;">>=<br />90%</div>
</div>
</div>
<div id="xmycqk"
style="position: absolute;right: 25px;top:5px;display: flex;align-items: center;font-size: 12px;visibility:hidden;">
<div
style="display: flex;align-items: center;color: #fff;justify-content: space-around;width: 280px;">
项目逾期情况
<div style="background: #FFD54F;text-align: center;width: 35px;height: 35px; border-radius: 8px;"><<br />50%</div>
<div style="background: #FFC107;text-align: center;width: 35px;height: 35px; border-radius: 8px;">>=<br />50%</div>
<div style="background: #FFA000;text-align: center;width: 35px;height: 35px; border-radius: 8px;">>=<br />70%</div>
<div style="background: #FF6F00;text-align: center;width: 35px;height: 35px; border-radius: 8px;">>=<br />90%</div>
</div>
</div>
<div id="xmgbqk"
style="position: absolute;right: 25px;top:5px;display: flex;align-items: center;font-size: 12px;visibility:hidden;">
<div
style="display: flex;align-items: center;color: #fff;justify-content: space-around;width: 280px;">
项目中止情况
<div style="background: #F06292;text-align: center;width: 35px;height: 35px; border-radius: 8px;"><<br />50%</div>
<div style="background: #F44336;text-align: center;width: 35px;height: 35px; border-radius: 8px;">>=<br />50%</div>
<div style="background: #C2185B;text-align: center;width: 35px;height: 35px; border-radius: 8px;">>=<br />70%</div>
<div style="background: #B71C1C;text-align: center;width: 35px;height: 35px; border-radius: 8px;">>=<br />90%</div>
</div>
</div>
</div>
<div
style="height: 71%;text-align: center;margin-top: 5px;padding: 10px 20px 0 20px;position: relative;">
<img src="./images/border.png" style="width: 100%;height: 100%;">
<div id="baiduMap"
style="width: 91%;height: 92%;position: absolute;left: 32px;top: 32px;"></div>
</div>
</div>
</el-col>
</el-row>
</el-main>
<el-aside>
<el-row style="height: 70%;">
<el-col style="height: 100%;">
<div class="boxTop">
<img class="img-title" src="./images/u8.png">
<div class="txt-title">项目单位排行</div>
<div style="position: absolute;top: 15px;bottom: 0;left: 0;right: 0;">
<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 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>
</el-col>
</el-row>
<el-row style="height: 30%;">
<el-col style="height: 100%;">
<div class="box">
<img class="img-title" src="./images/u8.png">
<div class="txt-title">近5年项目总体分布</div>
<div style="position: absolute;top: 15px;bottom: 5px;left: 0;right: 0;">
<div style="text-align: right;font-size: 12px;margin-right: 25px;height: 5%;">
<span id="wnfbZl" style="color: #3CD5FF;cursor: pointer;"
@click="wnfbTabClick('wnfbZl')">项目总量</span>&nbsp;&nbsp;&nbsp;<span
style="color: #3CD5FF;">|</span>&nbsp;&nbsp;&nbsp;<span id="wnfbYs"
style="color: #AAAAAA;cursor: pointer;"
@click="wnfbTabClick('wnfbYs')">项目总预算</span>
</div>
<div style="height: 95%;" id="wnfb"></div>
</div>
</div>
</el-col>
</el-row>
</el-aside>
</el-container>
</div>
<!-- 导入 Vue 3 -->
<script src="../cdn/vue.global.prod.min.js"></script>
<script src="../cdn/vue-router.global.prod.min.js"></script>
<!-- 导入组件库 -->
<script src="../cdn/dist/index.full.min.js"></script>
<script src="./js/jquery.min.js"></script>
<!-- 环形进度 -->
<script type="text/javascript" src="./js/jquery.pietimer.js"></script>
<!-- 滚动插件 -->
<script type="text/javascript" src="./js/vue3-seamless-scroll.min.js"></script>
<!-- echarts -->
<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/tagcanvas.min.js"></script>
<script type="text/javascript" src="./js/countUp.min.js"></script>
<!-- 百度地图 -->
<!-- <script type="text/javascript"
src="https://api.map.baidu.com/api?v=3.0&ak=pFUiIwX7nCouiW7YH4MmYdaNdsnHdtee"></script> -->
<script type="text/javascript" src="./js/map3.0_init.js"></script>
<script type="text/javascript" src="./js/map3.0.js"></script>
<!-- base64 -->
<script src="./js/base64.js"></script>
<!-- 数据 -->
<script src="./js/data.js"></script>
<!-- 自定义js -->
<script src="./js/index.js"></script>
</body>
</html>
Reference in new issue View Git Blame Copy Permalink