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.
224 lines
11 KiB
224 lines
11 KiB
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>长春市教育装备挂图作战</title>
|
|
<script type="text/javascript" src="https://cdn.staticfile.org/vue/3.2.21/vue.global.min.js"></script>
|
|
<script type="text/javascript" src="https://cdn.staticfile.org/axios/0.24.0/axios.min.js"></script>
|
|
<script type="text/javascript"
|
|
src="https://cdn.jsdelivr.net/npm/vue3-seamless-scroll@1.1.3/dist/vue3-seamless-scroll.min.js"></script>
|
|
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
|
|
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts-liquidfill.min.js"></script>
|
|
<!-- <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts-wordcloud.min.js"></script> -->
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
|
|
<script type="text/javascript" src="https://www.goat1000.com/tagcanvas.min.js"></script>
|
|
<link rel="stylesheet" href="./css/index.css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<div class="dHeader">
|
|
<h1>2021长春市教育装备挂图作战</h1>
|
|
</div>
|
|
<div class="dBody">
|
|
<div class="bodyLeft">
|
|
<div class="box" style="height: 33%;">
|
|
<div class="title">
|
|
<div class="titleTxt">项目单位情况</div>
|
|
</div>
|
|
<div class="boxBorder boxBorder1"></div>
|
|
<div class="boxBorder boxBorder2"></div>
|
|
<div class="boxBorder boxBorder3"></div>
|
|
<div class="boxBorder boxBorder4"></div>
|
|
<div class="echarts">
|
|
<div id="xmdwqk" style="width:100%; height:100%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="box" style="height: 31%;">
|
|
<div class="title">
|
|
<div class="titleTxt">项目类型分布</div>
|
|
</div>
|
|
<div class="boxBorder boxBorder1"></div>
|
|
<div class="boxBorder boxBorder2"></div>
|
|
<div class="boxBorder boxBorder3"></div>
|
|
<div class="boxBorder boxBorder4"></div>
|
|
<div class="echarts">
|
|
<canvas width="550" height="250" id="myCanvas"></canvas>
|
|
<div id="tags" style="display: none;">
|
|
<a v-for="items in wordCloud" href="#" :data-weight="items.num"
|
|
:style="'font-size: '+items.size+'ex'">{{items.name}}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box" style="height: 33%;">
|
|
<div class="title">
|
|
<div class="titleTxt">项目金额分布</div>
|
|
</div>
|
|
<div class="boxBorder boxBorder1"></div>
|
|
<div class="boxBorder boxBorder2"></div>
|
|
<div class="boxBorder boxBorder3"></div>
|
|
<div class="boxBorder boxBorder4"></div>
|
|
<div class="echarts">
|
|
<div id="xmjefb" style="width:100%; height:90%;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="bodyMiddle">
|
|
<div class="box" style="height: 103%;">
|
|
<div class="title">
|
|
<div class="titleTxt">项目进展情况</div>
|
|
</div>
|
|
<div class="boxBorder boxBorder1"></div>
|
|
<div class="boxBorder boxBorder2"></div>
|
|
<div class="boxBorder boxBorder3"></div>
|
|
<div class="boxBorder boxBorder4"></div>
|
|
<div class="echartsMiddle">
|
|
<div class="middleUp">
|
|
<div class="centerTitle">完成进度</div>
|
|
|
|
<div class="centerNum">
|
|
<div class="centerImg">
|
|
<img src="./images/zl.png" alt="">
|
|
<div class="zlNum" style="color: #3DD4FF;">60</div>
|
|
<div class="zlLine"></div>
|
|
<div class="zlText" style="color: #3DD4FF;">项目总量</div>
|
|
</div>
|
|
<div class="centerImg">
|
|
<img src="./images/xmlx.png" alt="">
|
|
<div class="imgNum" style="color: #0085FF;">60</div>
|
|
<div class="imgText" style="color: #0085FF;">项目立项</div>
|
|
</div>
|
|
<div class="centerImg">
|
|
<img src="./images/zbcg.png" alt="">
|
|
<div class="imgNum" style="color: #F8B551;">32</div>
|
|
<div class="imgText" style="color: #F8B551;">招标采购</div>
|
|
</div>
|
|
<div class="centerImg">
|
|
<img src="./images/ssys.png" alt="">
|
|
<div class="imgNum" style="color: #B769FF;">22</div>
|
|
<div class="imgText" style="color: #B769FF;">实施验收</div>
|
|
</div>
|
|
<div class="centerImg">
|
|
<img src="./images/xmbf.png" alt="">
|
|
<div class="imgNum" style="color: #32B16C;">16</div>
|
|
<div class="imgText" style="color: #32B16C;">项目拨付</div>
|
|
</div>
|
|
<div class="centerImg">
|
|
<img src="./images/xmgb.png" alt="">
|
|
<div class="imgNum" style="color: #BF3A68;">20</div>
|
|
<div class="imgText" style="color: #BF3A68;">项目关闭</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="middleCenter">
|
|
<div class="centerTitle">趋势分布</div>
|
|
<div class="centerContent">
|
|
<div id="qsfb" style="width:100%; height:100%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="middleDown">
|
|
<div class="centerTitle">单位分布</div>
|
|
<div class="centerContent">
|
|
<div id="dwfb" style="width:100%; height:100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="bodyRight">
|
|
<div class="box" style="height: 76%;">
|
|
<div class="title">
|
|
<div class="titleTxt">项目单位排行</div>
|
|
</div>
|
|
<div class="boxBorder boxBorder1"></div>
|
|
<div class="boxBorder boxBorder2"></div>
|
|
<div class="boxBorder boxBorder3"></div>
|
|
<div class="boxBorder boxBorder4"></div>
|
|
<div class="tableSelect">
|
|
<ul class="tab-tilte">
|
|
<li 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 class="box" style="height: 24.5%;">
|
|
<div class="title">
|
|
<div class="titleTxt">项目异常</div>
|
|
</div>
|
|
<div class="boxBorder boxBorder1"></div>
|
|
<div class="boxBorder boxBorder2"></div>
|
|
<div class="boxBorder boxBorder3"></div>
|
|
<div class="boxBorder boxBorder4"></div>
|
|
<div class="xmycSelect">
|
|
<ul class="xmyc-tab-tilte">
|
|
<li v-for="(items,index) in xmycTabList" @click="xmycTabClick(index)"
|
|
:class="[xmycCur == index ? 'active' : '']"
|
|
style="border: 1px solid #2B99D1; border-radius: 5px;">
|
|
<span></span>{{items.tabTitle}}</span> <span
|
|
style="margin-left: 10px;color: #fdcb6e;font-weight: bolder;font-size: 14px;">{{items.count}}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="tabBottomLine"></div>
|
|
|
|
<div class="xmycContent">
|
|
<div class="xmycItem" v-for="item in xmycList">
|
|
<div class="itemImg"><img src="./images/u420.svg" alt=""></div>
|
|
<div class="itemTxt">{{item.orgName}}</div>
|
|
<div class="itemNum">{{item.count}}</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</body>
|
|
<script src="./js/data.js"></script>
|
|
<script src="./js/index.js"></script>
|
|
|
|
</html> |