<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/utility/lzmain.js"></script>
<script src="/utility/lzmain-form.js"></script>
<link href="/projectapp/common/css/main.css" rel="stylesheet">
<link rel="stylesheet" href="./css/tj.css">
<link rel="stylesheet" href="./css/el.css">
<style>
[v-cloak] {
display: none;
}
.fontBold {
font-weight: bold;
}
</style>
</head>
<body>
<div id="tjcon" class="tjcon w-full p-8 bg-themecol" v-cloak>
<div class="w-mainwh mx-auto my-auto">
<!-- 搜索 -->
<div class="flex items-center justify-end">
<span class="cursor-pointer hover:text-gray-900 " :class="{fontBold:curindex===1}" @click="isSelebyYear(1)">按年</span>
<div class="w-px h-4 bg-gray-300 m-4"></div>
<span class="cursor-pointer hover:text-gray-900 " :class="{fontBold:curindex===2}" @click="isSelebyYear(2)">按区间</span>
<div class="data-div ml-4 ">
<div v-show="curindex===1">
<el-date-picker v-model="value1" placeholder="选择年份" type="year" @change="getYear1">
</el-date-picker>
</div>
<div v-show="curindex===2">
<!-- <el-date-picker v-model="value3" type="date" @change="getDate3" placeholder="选择日期">
</el-date-picker>
<span class="m-4"> 至</span>
<el-date-picker v-model="value4" type="date" @change="getDate4" placeholder="选择日期" :picker-options="pickerOptions1">
</el-date-picker> -->
<el-date-picker v-model="value2" value-format='yyyy-MM-dd' type="daterange" @change="getDate2" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</div>
</div>
<button type="button" @click="btnok" class="btn btn-link text-base" title="查询">
<b class="btnico lzsystem_button_search"></b>
<span class="btntxt">查询</span>
</button>
<!-- <div @click="btnok" class="px-4 rounded-sm cursor-pointer bg-white ml-4 text-base border-solid border border-gray-300" style="height: 36px; line-height: 36px;">搜索</div> -->
</div>
<div class="flex flex-row justify-between h-itemht">
<!-- 统计情况 -->
<div class="w-itemwh bg-white">
<div class="item-title text-sm px-3 text-titlecol h-10 leading-10">
统计情况
</div>
<div class="px-4 py-4 w-full">
<div class="flex flex-row justify-between">
<div class="w-80 h-38 rounded-lg p-4 text-white flex flex-col bg-gradient-to-tr from-blue-400 via-blue-500 to-blue-600" style="width: 345px">
<img width="40px" src="./img/zxms.png" alt="" srcset="">
<p class="leading-10 pt-2 tj-title">总项目数及入场项目合同估算价</p>
<div class="flex flex-row justify-between align-center">
<div class="text-base ">
<span class="text-3xl pr-1 font-bold">{{zbxmsl}}</span>项
</div>
<div class="w-px h-3 h-4 bg-white"></div>
<div class="text-base ">
<span class="text-3xl pr-1 font-bold">{{zxmje}}</span>亿元
</div>
</div>
</div>
<div class="ml-4 h-38 rounded-lg p-4 text-white flex flex-col yell-jb flex-auto">
<img width="40px" src="./img/ccsl.png" alt="" srcset="">
<p class="leading-10 pt-2 tj-title">抽查项目数量</p>
<div class="flex flex-row justify-between align-center">
<div class="text-base ">
<span class="text-3xl pr-1 font-bold">{{ccxms}}</span>项
</div>
</div>
</div>
</div>
<div class="flex flex-row justify-between pt-6">
<div class="h-38 rounded-lg p-4 text-white flex flex-col " style="width: 345px; background-image: linear-gradient(to top right, #00E6FF, #00B2EB)">
<img width="40px" src="./img/zbxmsl.png" alt="" srcset="">
<p class="leading-10 pt-2 tj-title">中标项目数量及金额</p>
<div class="flex flex-row justify-between align-center">
<div class="text-base ">
<span class="text-3xl pr-1 font-bold">{{zbxmsl}}</span>项
</div>
<div class="w-px h-3 h-4 bg-white"></div>
<div class="text-base ">
<span class="text-3xl pr-1 font-bold">{{zbxmje}}</span>亿元
</div>
</div>
</div>
<div class="ml-4 h-38 rounded-lg p-4 text-white flex flex-col flex-auto" style=" background-image: linear-gradient(to top right, #00E480, #00D4A2)">
<img width="40px" src="./img/pd.png" alt="" srcset="">
<p class="leading-10 pt-2 tj-title">评定分离项目数量</p>
<div class="flex flex-row justify-between align-center">
<div class="text-base ">
<span class="text-3xl pr-1 font-bold">{{pdflxmsl}}</span>项
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 抽查情况 -->
<div class="ml-4 flex-1 bg-white ml-4">
<div class="item-title text-sm px-3 text-titlecol h-10 leading-10">
抽查情况
</div>
<div class="px-4 py-4 w-full overflow-y-auto" style="height: 332px;">
<table align="center" class="cctable w-full table-fixed">
<thead>
<tr class="h-4">
<td rowspan="2" class="font-bold " style="width: 146px;">事项类型</td>
<td colspan="3" class="text-center font-bold">强制性意见</td>
<td colspan="3" class="text-center font-bold">建议性意见</td>
</tr>
<tr class="h-7 pl-2">
<td class="text-gray-400 text-sm text-center pb-2">总数</td>
<td class="text-gray-400 text-sm text-center pb-2">已整改</td>
<td class="text-gray-400 text-sm text-center pb-2">未整改</td>
<td class="text-gray-400 text-sm text-center pb-2">总数</td>
<td class="text-gray-400 text-sm text-center pb-2">已整改</td>
<td class="text-gray-400 text-sm text-center pb-2">未整改</td>
</tr>
</thead>
<tbody>
<tr v-for="(item ,index) in ccqklist" ::key="index" class="h-10">
<td class="truncate " :title="item.sxname">{{item.sxname}}
</td>
<td class="text-center truncate" :title="item.qzzs">{{item.qzzs}}</td>
<td class="text-center truncate" :title="item.qzyzg">{{item.qzyzg}}</td>
<td class="text-center truncate" :title="item.qzwzg">{{item.qzwzg}}</td>
<td class="text-center truncate" :title="item.jyzs">{{item.jyzs}}</td>
<td class="text-center truncate" :title="item.jyyzg">{{item.jyyzg}}</td>
<td class="text-center truncate" :title="item.jywzg">{{item.jywzg}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 事项统计 -->
<div class="w-full mt-4 bg-white">
<div class="item-title text-sm px-3 text-titlecol h-10 leading-10">
事项统计
</div>
<div class="sxtj flex-wrap px-4 pt-4 w-full flex">
<div class="item mb-4 mr-4 flex sxtj-w flex-col" v-for="(sxitem, index) in sxtjlist" :key="index">
<div class="flex p-4 w-full items-center sxtj-bg justify-between flex-row">
<div class="flex items-center">
<img class="inline-block" :src="sxitem.imgurl" alt="" srcset="">
<span class="ml-3 font-bold" style="color: #262626;font-size: 16px;">{{sxitem.sxname}}</span>
</div>
<div><span class="text-3xl font-bold mr-1 " style="color: #262626;">{{sxitem.xmsl}}</span>项 </div>
</div>
<div class="w-full sxdiv flex sxtj-bg sxtj-bott justify-between p-3 flex-row mt-1 ">
<span class="block w-1/4 truncate" :title="sxitem.dcc">待抽查：{{sxitem.dcc}} </span>
<span class="block w-1/4 truncate" :title="sxitem.dfs">待复审：{{sxitem.dfs}} </span>
<span class="block w-1/4 truncate" :title="sxitem.dzg">待整改：{{sxitem.dzg}}</span>
<span class="block w-1/4 truncate " :title="sxitem.ybj">已办结：{{sxitem.ybj}} </span>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/projectapp/common/js/vue.js"></script>
<script src="/projectapp/common/js/element-ui-index.js"></script>
<script src="/projectapp/common/js/moment.min.js"></script>
<script src="/utility/base/basemodule/loading.js"></script>
<script>
// mindate = ""
var loadingObj = new Loading();
loadingObj.title = "加载中"
var app = new Vue({
el: '#tjcon',
data: {
curindex: 1,
ccxms: 0,
pdflxmsl: 0,
zbxmje: 0,
zbxmsl: 0,
zxmje: 0,
zxms: 0,
ccqklist: [],
sxtjlist: [],
value1: '2025',
start_date: '',
end_date: '',
value2: '',
value3: '',
value4: '',
// pickerOptions1: {
// disabledDate: (time) => {
// const disabledDate = new Date(mindate);
// // 禁用所有早于指定日期的日期
// return time.getTime() < disabledDate.getTime();
// }
// }
},
methods: {
// 是否按照年份
isSelebyYear(index) {
this.curindex = index
this.value1 = ""
this.value2 = ""
this.value3 = ""
this.value4 = ""
this.start_date = ''
this.end_date = ''
},
// 按照年
getYear1() {
this.start_date = ''
this.end_date = ''
if (this.value1) {
this.start_date = this.value1.getFullYear() + '-01-01';
this.end_date = this.value1.getFullYear() + '-12-30';
}
},
// 按照日期
getDate2() {
this.start_date = ''
this.end_date = ''
if (this.value2 && this.value2.length > 0) {
this.start_date = this.value2[0];
this.end_date = this.value2[1];
}
},
// getDate3() {
// debugger
// console.log(this.value3)
// this.start_date = this.value3.getFullYear();
// mindate = this.start_date
// },
// getDate4() {
// debugger
// console.log(this.value4)
// this.end_date = this.value4.getFullYear();
// },
// 按照日期或者年份查询数据
btnok() {
loadingObj.show();
this.dateMeth()
},
dateMeth() {
this.tjqklist()
this.ccqk()
this.sxtj()
},
// disabledBeforeToday(time) {
// const disabledDate = new Date(mindate);
// // 禁用所有早于指定日期的日期
// return time.getTime() < disabledDate.getTime();
// },
// 统计情况
tjqklist() {
let url = window.$apphost("common") + `/api/hwztbjg/gethometjqk?start_date=${this.start_date}&&end_date=${this.end_date}`
let tjqklistdata = $lzget(url).returnValue
let itemdata = tjqklistdata.data
if (itemdata.length > 0 ) {
this.ccxms = itemdata[0].ccxms
this.zbxmje = itemdata[0].zbxmje
this.pdflxmsl = itemdata[0].pdflxmsl
this.zbxmsl = itemdata[0].zbxmsl
this.zxmje = itemdata[0].zxmje
this.zxms = itemdata[0].zxms
}
},
// 抽查情况
ccqk() {
let url = window.$apphost("common") + `/api/hwztbjg/gethomeccqk?start_date=${this.start_date}&&end_date=${this.end_date}`
let ccqklistdata = $lzget(url).returnValue
console.log(ccqklistdata )
let itemdata = ccqklistdata.data
if (itemdata.length > 0) {
this.ccqklist = itemdata
}
},
sxtj() {
// /serverapp/api/hwztbjg/gethomesxtj
let url = window.$apphost("common") + `/api/hwztbjg/gethomesxtj?start_date=${this.start_date}&&end_date=${this.end_date}`
let sxtjlistdata = $lzget(url).returnValue
let itemdata = sxtjlistdata.data
if (itemdata.length > 0) {
this.sxtjlist = itemdata
}
setTimeout(() => {
loadingObj.close()
}, 1000);
},
},
mounted() {
var date = new Date();
this.start_date = date.getFullYear() + '-01-01';
// this.value1 = date.getFullYear();
this.end_date = date.getFullYear() + '-12-30';
this.tjqklist()
this.ccqk();
this.sxtj()
},
})
</script>
</body>
</html>
