<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8" />
|
<title>重大项目下钻</title>
|
|
<link rel="stylesheet" href="UE/element-ui/lib/theme-chalk/index.css" />
|
<script src="UE/jquery.min.js"></script>
|
<script src="UE/element/vue.min.js"></script>
|
|
<script src="UE/element-ui/lib/index.js"></script>
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
|
<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
|
|
<style>
|
@font-face {
|
font-family: Font1;
|
src: url(./Font/SourceHanSansCN-Normal.otf);
|
}
|
|
html,
|
body {
|
margin: 0;
|
padding: 2px;
|
height: 100%;
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.box {
|
width: 424px;
|
height: 422px;
|
background: url('./UE/img/frameBackground.png') no-repeat center;
|
background-size: 100% 100%;
|
overflow-y: auto;
|
font-family: Font1;
|
box-sizing: border-box;
|
padding: 10px 10px 10px 10px;
|
}
|
|
.box1 {
|
font-family: Font1;
|
font-style: normal;
|
font-weight: 500;
|
font-size: 16px;
|
line-height: 24px;
|
color: #ffcb14;
|
}
|
|
.box2 {
|
margin-top: 8px;
|
color: white;
|
}
|
|
.label1 {
|
font-family: Font1;
|
font-size: 14px;
|
line-height: 14px;
|
color: #ffffff;
|
}
|
|
.box3 {
|
font-family: Font1;
|
font-style: normal;
|
font-weight: 400;
|
font-size: 16px;
|
line-height: 16px;
|
color: #ffffff;
|
margin-top: 18px;
|
}
|
|
.box4 {
|
margin-left: -35px;
|
margin-top: 18px;
|
box-sizing: border-box;
|
}
|
|
::-webkit-scrollbar {
|
width: 5px;
|
}
|
|
::-webkit-scrollbar-thumb {
|
background-color: lightgreen;
|
border-radius: 5px;
|
}
|
|
::-webkit-scrollbar-track {
|
|
background-color: rgba(255, 255 255, 0.6);
|
}
|
|
.el-icon-my-export {
|
background: url('UE/img/Frame.png') center no-repeat;
|
/* background-size: cover;*/
|
}
|
|
.el-icon-my-export:before {
|
content: "替";
|
font-size: 16px;
|
visibility: hidden;
|
}
|
|
|
.el-icon-my-export {
|
font-size: 16px;
|
}
|
|
.el-icon-my-export:before {
|
content: "\e611";
|
}
|
|
.el-icon-my-frame {
|
background: url('UE/img/Frame2.png') center no-repeat;
|
/* background-size: cover;*/
|
}
|
|
.el-icon-my-frame:before {
|
content: "替";
|
font-size: 16px;
|
visibility: hidden;
|
}
|
|
|
.el-icon-my-frame {
|
font-size: 16px;
|
}
|
|
.el-icon-my-frame:before {
|
content: "\e611";
|
}
|
|
.el-timeline-item__content {
|
color: white;
|
}
|
|
.el-timeline-item {
|
position: relative !important;
|
padding-bottom: 1px !important;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div id="app" class="box">
|
<div class="box1">{{ message1 }}</div>
|
<div class="box2">
|
<i class="el-icon-my-export"></i> <label class="label1">{{ message2 }}</label>
|
<i class="el-icon-my-frame"></i> <label class="label1">{{ message3 }}</label>
|
</div>
|
<div class="box3">{{ message4 }}</div>
|
<div class="box4">
|
<el-timeline>
|
<el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon"
|
:type="activity.type" :color="activity.color" :size="activity.size" :timestamp="activity.timestamp">
|
{{ activity.content }}
|
</el-timeline-item>
|
</el-timeline>
|
|
</div>
|
</div>
|
|
<script>
|
new Vue({
|
el: '#app',
|
data: function () {
|
return {
|
message1:
|
' ',
|
message2: '居住建设项目',
|
message3: '开发建设局',
|
message4: '2022年项目作战地图',
|
num: 3,
|
activities: []
|
}
|
},
|
methods: {
|
showmessage() {
|
this.activities = []
|
var arr = ['v']
|
var id = this.getQueryString(arr[0])
|
var value = JSON.parse(id)
|
|
this.message1 = value.project_name;
|
this.message2 = value.project_category_name;
|
this.message3 = value.project_owner_name;
|
var that = this;
|
let std = [];
|
var sql = "sql/data/api/v2/execute/customResult/SA2022080913584002802071/data"
|
var sql_test ;
|
if (value.test == 1) {
|
sql_test= "/test-data/"
|
}else{
|
sql_test= "/easy-data/"
|
}
|
var url = sql_test+sql
|
$.ajax(url, {
|
type: "post",
|
data: JSON.stringify({
|
project_stat_id: value.id
|
}),
|
contentType: "application/json;charset=UTF-8",
|
dataType: "json",
|
success: (rs) => {
|
|
that.showContent(rs)
|
}
|
|
})
|
|
},
|
showContent(rs) {
|
let std = [];
|
|
for (var i in rs) {
|
var name = rs[i].month + '月' + '—' + rs[i].content;
|
var state = parseInt(rs[i].state)
|
if (state == 0) {
|
std.push({
|
content: name,
|
size: 'large',
|
type: 'primary',
|
icon: 'el-icon-check',
|
color: '#00FFCB'
|
})
|
} if (state === 1) {
|
std.push({
|
content: name,
|
size: 'large',
|
type: 'primary',
|
icon: 'el-icon-check',
|
color: '#FFA014'
|
})
|
} else if (state === 2) {
|
std.push({
|
content: name,
|
size: 'large',
|
type: 'primary',
|
|
color: '#00FFCB'
|
})
|
} else if (state === 3) {
|
std.push({
|
content: name,
|
size: 'large',
|
type: 'primary',
|
|
color: '#ffffff'
|
})
|
}
|
}
|
this.activities = std;
|
},
|
|
|
|
|
getQueryString(name) {
|
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
|
var r = window.location.search.substr(1).match(reg)
|
if (r != null) {
|
return decodeURI(r[2])
|
}
|
|
return ''
|
}
|
},
|
created() {
|
|
this.showmessage()
|
|
}
|
})
|
</script>
|
</body>
|
|
</html>
|
