483 lines
13 KiB
Vue
483 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<view class="service-summary-page">
|
|||
|
|
<tn-navbar
|
|||
|
|
fixed
|
|||
|
|
bg-color="rgba(255, 255, 255, 0.01)"
|
|||
|
|
:bottom-shadow="false"
|
|||
|
|
:placeholder="false"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<view class="service-summary"
|
|||
|
|
:style="{'background':'url('+ menuData.pic +') no-repeat','backgroundPosition':'center center','backgroundSize':'100% 100%'}"
|
|||
|
|
>
|
|||
|
|
<view class="summary-content">
|
|||
|
|
<view class="summary-info">
|
|||
|
|
<view class="title">{{ menuData.title }}</view>
|
|||
|
|
<view class="desc">{{ menuData.description }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="service-container tn-pt-lg" v-if="flag">
|
|||
|
|
<view class="tn-radius tn-m-lg">
|
|||
|
|
<view class="title-container">
|
|||
|
|
<view class="left">
|
|||
|
|
<view class="title">{{serviceData.title}}</view>
|
|||
|
|
<view class="desc tn-text-lg">
|
|||
|
|
<tn-icon name="clock" size="36rpx"/>
|
|||
|
|
{{serviceData.dateMonth.replace('-','年01-')+'月'}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="service-detail tn-pt-sm" v-if="flag">
|
|||
|
|
<view class="tn-p-lg tn-text-bold tn-text-2xl tn-text-center" :style="{'color':color}">
|
|||
|
|
安全生产标准化企业
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="box tn-radius tn-p-sm">
|
|||
|
|
<view class="tn-text-lg">
|
|||
|
|
<TnTitle title="安全生产标准化企业" mode="vLine" size="lg"/>
|
|||
|
|
<view class="tn-flex tn-flex-center-between tn-mt tn-mb">
|
|||
|
|
<view class="childbox tn-radius tn-p-sm">
|
|||
|
|
<TnTitle title="一级企业" mode="dot" size="md"/>
|
|||
|
|
<TnCountScroll :value="serviceData.level1" class="tn-pl-sm tn-text-bold tn-text-xl"/>家
|
|||
|
|
</view>
|
|||
|
|
<view class="childbox tn-radius tn-p-sm">
|
|||
|
|
<TnTitle title="二级企业" mode="dot" size="md"/>
|
|||
|
|
<TnCountScroll :value="serviceData.level2" class="tn-pl-sm tn-text-bold tn-text-xl"/>家
|
|||
|
|
</view>
|
|||
|
|
<view class="childbox tn-radius tn-p-sm">
|
|||
|
|
<TnTitle title="三级企业" mode="dot" size="md"/>
|
|||
|
|
<TnCountScroll :value="serviceData.level3" class="tn-pl-sm tn-text-bold tn-text-xl"/>家
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="tn-text">
|
|||
|
|
一级企业：<span class="tn-text-bold tn-text-lg" :style="{'color':color}">{{serviceData.level1_list}}</span>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<view class="tn-p-lg tn-text-bold tn-text-2xl tn-text-center" :style="{'color':color}">
|
|||
|
|
安全监管重点企业
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="box tn-radius tn-p">
|
|||
|
|
<view class="tn-flex tn-flex-center-between tn-flex-wrap">
|
|||
|
|
<view class="child tn-radius tn-p-sm">
|
|||
|
|
<TnTitle title="危化企业" mode="vLine"/>
|
|||
|
|
<TnCountScroll :value="serviceData.danger" class="tn-pl-sm tn-text-bold tn-text-xl"/>家
|
|||
|
|
</view>
|
|||
|
|
<view class="child tn-radius tn-p-sm">
|
|||
|
|
<TnTitle title="金属冶炼企业" mode="vLine"/>
|
|||
|
|
<TnCountScroll :value="serviceData.metal" class="tn-pl-sm tn-text-bold tn-text-xl"/>家
|
|||
|
|
</view>
|
|||
|
|
<view class="child tn-radius tn-p-sm">
|
|||
|
|
<TnTitle title="粉尘涉爆企业" mode="vLine"/>
|
|||
|
|
<TnCountScroll :value="serviceData.dust" class="tn-pl-sm tn-text-bold tn-text-xl"/>家
|
|||
|
|
</view>
|
|||
|
|
<view class="child tn-radius tn-p-sm">
|
|||
|
|
<TnTitle title="其它企业" mode="vLine"/>
|
|||
|
|
<TnCountScroll :value="serviceData.other" class="tn-pl-sm tn-text-bold tn-text-xl"/>家
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="chart-box">
|
|||
|
|
<ucharts-ring
|
|||
|
|
:chartData="importantChartData"
|
|||
|
|
position="bottom"
|
|||
|
|
title="安全监管重点企业"
|
|||
|
|
:val="serviceData.danger+serviceData.metal+serviceData.dust+serviceData.other+'家'"
|
|||
|
|
radius="100"/>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="tn-p-lg tn-text-bold tn-text-2xl tn-text-center" :style="{'color':color}">
|
|||
|
|
消防安全
|
|||
|
|
</view>
|
|||
|
|
<view class="box tn-radius tn-p tn-flex">
|
|||
|
|
<view class="tn-w-1-2 tn-p">
|
|||
|
|
<TnTitle title="加强关注企业" mode="vLine" size="lg"/>
|
|||
|
|
<TnCountScroll :value="serviceData.fire_safety" class="tn-pl-sm tn-text-bold tn-text-2xl"/>家
|
|||
|
|
</view>
|
|||
|
|
<view class="tn-w-1-2 tn-pt tn-red-dark_text">注：特指生产存储易燃、可燃产品或原材料企业</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="tn-p-lg tn-text-bold tn-text-2xl tn-text-center" :style="{'color':color}">
|
|||
|
|
监督检查
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="box tn-radius tn-p">
|
|||
|
|
<view class="tn-flex tn-flex-center-between">
|
|||
|
|
<view class="tn-w-1-2 tn-p">
|
|||
|
|
<TnTitle title="监督检查" mode="vLine" size="lg"/>
|
|||
|
|
<TnCountScroll :value="serviceData.inspection" class="tn-pl-sm tn-text-bold tn-text-2xl"/>家次
|
|||
|
|
</view>
|
|||
|
|
<view class="tn-w-1-2 tn-p">
|
|||
|
|
<TnTitle title="安全隐患" mode="vLine" size="lg"/>
|
|||
|
|
<TnCountScroll :value="serviceData.trouble" class="tn-pl-sm tn-text-bold tn-text-2xl"/>个
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="tn-text tn-pl tn-pr">
|
|||
|
|
整改情况：{{serviceData.improve}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="tn-p-lg tn-text-bold tn-text-2xl tn-text-center" :style="{'color':color}">
|
|||
|
|
宣传活动
|
|||
|
|
</view>
|
|||
|
|
<view class="box tn-radius tn-p-lg">
|
|||
|
|
开展各类安全生产培训宣传活动<span class="tn-text-bold tn-text-2xl">{{serviceData.publicize}}</span>次
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="text" v-if="serviceData.explan">
|
|||
|
|
<view class="tn-p-lg tn-text-bold tn-text-2xl tn-text-center" :style="{'color':color}">
|
|||
|
|
其它说明
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="tn-text-lg" style="text-indent: 2em;line-height: 1.8em;color: #444444;">
|
|||
|
|
<mp-html :content="serviceData.explan" :copy-link="false" @linktap="downloadFile"/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<tn-date-time-picker v-model="dateTimeValue" v-model:open="openDateTimePicker" init-current-date-time format="YYYY-MM" mode="yearmonth" @confirm="getDate"/>
|
|||
|
|
|
|||
|
|
<view class="picker-btn" @click="showPicker">
|
|||
|
|
<tn-button shape="circle" type="success" size="lg" shadow shadow-color="tn-type-primary_shadow">
|
|||
|
|
<tn-icon name="history" :size="50"/>
|
|||
|
|
</tn-button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import { onMounted, reactive, ref } from 'vue';
|
|||
|
|
import request from '@/utils/request';
|
|||
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|||
|
|
import TnCountScroll from '@/uni_modules/tuniaoui-vue3/components/count-scroll/src/count-scroll.vue'
|
|||
|
|
import TnDateTimePicker from '@/uni_modules/tuniaoui-vue3/components/date-time-picker/src/date-time-picker.vue'
|
|||
|
|
import onShare from '@/utils/share';
|
|||
|
|
import UchartsRing from '@/pages/components/ucharts-ring.vue';
|
|||
|
|
|
|||
|
|
const { onShareAppMessage,onShareTimeline } = onShare()
|
|||
|
|
|
|||
|
|
const shareTitle = ref()
|
|||
|
|
|
|||
|
|
const shareParam = ref()
|
|||
|
|
|
|||
|
|
const color = ref();
|
|||
|
|
|
|||
|
|
const flag = ref(false);
|
|||
|
|
|
|||
|
|
const orgId = ref();
|
|||
|
|
|
|||
|
|
const importantChartData = ref({})
|
|||
|
|
|
|||
|
|
const openDateTimePicker = ref(false);
|
|||
|
|
|
|||
|
|
const serviceData = reactive({
|
|||
|
|
parkId:'',
|
|||
|
|
dateMonth:'',
|
|||
|
|
title:'',
|
|||
|
|
level1:0,
|
|||
|
|
level1_list:'',
|
|||
|
|
level2:0,
|
|||
|
|
level3:0,
|
|||
|
|
danger:0,
|
|||
|
|
metal:0,
|
|||
|
|
dust:0,
|
|||
|
|
other:0,
|
|||
|
|
fire_safety:0,
|
|||
|
|
improve:'',
|
|||
|
|
publicize:0,
|
|||
|
|
inspection:0,
|
|||
|
|
trouble:0,
|
|||
|
|
explan:''
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const dateTimeValue = ref();
|
|||
|
|
|
|||
|
|
const menuData = reactive({
|
|||
|
|
pic:'',
|
|||
|
|
title:'',
|
|||
|
|
color:'',
|
|||
|
|
description:''
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const showPicker = () => {
|
|||
|
|
openDateTimePicker.value = true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const getDate = (value:string) => {
|
|||
|
|
getServiceData(value)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const getMenuData = (id:number) => {
|
|||
|
|
request({
|
|||
|
|
url:'/front/report/menu',
|
|||
|
|
method:'GET',
|
|||
|
|
data:{menuId:id}
|
|||
|
|
}).then((res:any)=>{
|
|||
|
|
if(res.data.code === 0){
|
|||
|
|
Object.assign(menuData,res.data.data)
|
|||
|
|
shareParam.value = res.data.data.menuId
|
|||
|
|
color.value = res.data.data.color
|
|||
|
|
}else{
|
|||
|
|
uni.showToast({
|
|||
|
|
icon:'none',
|
|||
|
|
title:res.data.message
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
const getServiceData = (date:string) => {
|
|||
|
|
request({
|
|||
|
|
url:'/front/report/service/summary',
|
|||
|
|
method:'GET',
|
|||
|
|
data:{id:orgId.value,month:date}
|
|||
|
|
}).then((res:any) => {
|
|||
|
|
if(res.data.code === 0){
|
|||
|
|
Object.assign(serviceData,res.data.data)
|
|||
|
|
shareTitle.value = res.data.data.title
|
|||
|
|
setTimeout(() => {
|
|||
|
|
let important_res = {
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
data: [{ "name": "危化企业", "value": Number(serviceData.danger) },
|
|||
|
|
{ "name": "金属冶炼企业", "value": Number(serviceData.metal) },
|
|||
|
|
{ "name": "粉尘涉爆企业", "value": Number(serviceData.dust) },
|
|||
|
|
{ "name": "其它", "value": Number(serviceData.other) },
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
importantChartData.value = JSON.parse(JSON.stringify(important_res));
|
|||
|
|
}, 500);
|
|||
|
|
}else{
|
|||
|
|
uni.showToast({
|
|||
|
|
icon:'none',
|
|||
|
|
title:res.data.message
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
flag.value = true
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
const downloadFile = (file:any) => {
|
|||
|
|
uni.downloadFile({
|
|||
|
|
url:file.href,
|
|||
|
|
success(res) {
|
|||
|
|
if (res.statusCode === 200) {
|
|||
|
|
uni.saveFile({
|
|||
|
|
tempFilePath: res.tempFilePath, //临时路径
|
|||
|
|
success: function(res) {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
mask: true,
|
|||
|
|
title: '文件已保存：' + res.savedFilePath, //保存路径
|
|||
|
|
duration: 3000,
|
|||
|
|
});
|
|||
|
|
setTimeout(() => {
|
|||
|
|
//打开文档查看
|
|||
|
|
uni.openDocument({
|
|||
|
|
filePath: res.savedFilePath,
|
|||
|
|
showMenu: true,
|
|||
|
|
success: function() {
|
|||
|
|
console.log('打开文档成功');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}, 3000)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
console.log('下载成功');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.log(err);
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
mask: true,
|
|||
|
|
title: '失败请重新下载',
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onShareAppMessage(() => {
|
|||
|
|
return {
|
|||
|
|
title:shareTitle.value,
|
|||
|
|
path:'/pages/report/service/child/index?mid=' + shareParam.value + '&id=' + orgId.value
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
onShareTimeline(() => {
|
|||
|
|
return {
|
|||
|
|
title:shareTitle.value,
|
|||
|
|
path:'/pages/report/service/child/index?mid=' + shareParam.value + '&id=' + orgId.value
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
onLoad((option)=>{
|
|||
|
|
getMenuData(option.mid)
|
|||
|
|
orgId.value = option.id
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
onMounted(()=>{
|
|||
|
|
getServiceData('')
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.service-summary {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 450rpx;
|
|||
|
|
z-index: 2;
|
|||
|
|
|
|||
|
|
&::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background: linear-gradient(
|
|||
|
|
0deg,
|
|||
|
|
rgba(0, 0, 0, 0.4) 0%,
|
|||
|
|
rgba(0, 0, 0, 0) 100%
|
|||
|
|
);
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-content {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
bottom: 80rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 0rpx 30rpx;
|
|||
|
|
z-index: 2;
|
|||
|
|
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.summary-info {
|
|||
|
|
flex: 1;
|
|||
|
|
color: #fff;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 52rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
letter-spacing: 8rpx;
|
|||
|
|
text-shadow: 4rpx 4rpx 10rpx #585858;
|
|||
|
|
}
|
|||
|
|
.desc {
|
|||
|
|
font-size: 34rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
letter-spacing: 4rpx;
|
|||
|
|
text-shadow: 4rpx 4rpx 10rpx #585858;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.service-container{
|
|||
|
|
position: relative;
|
|||
|
|
top: -40rpx;
|
|||
|
|
z-index: 99;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 50rpx;
|
|||
|
|
.title-container {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
line-height: 1;
|
|||
|
|
|
|||
|
|
.left {
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
.desc {
|
|||
|
|
margin-top: 32rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right {
|
|||
|
|
flex-grow: 0;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
font-size: 70rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.service-detail {
|
|||
|
|
position: relative;
|
|||
|
|
border-radius: 20rpx 20rpx 0 0;
|
|||
|
|
z-index: 10;
|
|||
|
|
.box{
|
|||
|
|
background: linear-gradient(-45deg, rgba(0, 150, 255, 0.5), rgba(0, 150, 255, 0.05));
|
|||
|
|
.childbox{
|
|||
|
|
width: calc(100% / 3 - 15rpx);
|
|||
|
|
background: linear-gradient(-45deg, rgba(0, 150, 255, 0.05), rgba(0, 150, 255, 0.3));
|
|||
|
|
}
|
|||
|
|
.child{
|
|||
|
|
width: calc(100% / 2 - 10rpx);;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.text{
|
|||
|
|
text-align: justify;
|
|||
|
|
letter-spacing: 4rpx;
|
|||
|
|
}
|
|||
|
|
.topic-item {
|
|||
|
|
& + .topic-item {
|
|||
|
|
margin-top: 36rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.service-review{
|
|||
|
|
.review-item{
|
|||
|
|
width: 50%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.park-container {
|
|||
|
|
width: fit-content;
|
|||
|
|
height:100%;
|
|||
|
|
.scroll-item {
|
|||
|
|
flex-grow: 1;
|
|||
|
|
.empty {
|
|||
|
|
width: 100rpx;
|
|||
|
|
height: 100rpx;
|
|||
|
|
border-radius: 15rpx;
|
|||
|
|
}
|
|||
|
|
.title {
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.picker-btn{
|
|||
|
|
position: fixed;
|
|||
|
|
z-index: 999;
|
|||
|
|
right: 40rpx;
|
|||
|
|
bottom: 60rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|