看板
This commit is contained in:
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<view class="u-wrap u-padding-bottom-70">
|
||||
<view class="photo u-flex u-row-center u-padding-40">
|
||||
<u-image width="300rpx" height="300rpx" shape="circle" bg-color="var(--u-bg-color)" :src="src"></u-image>
|
||||
</view>
|
||||
<u-cell-group>
|
||||
<u-cell-item title="姓名" value="张三" :arrow="false" ></u-cell-item>
|
||||
<u-cell-item title="联系方式" value="13395515136" :arrow="false"></u-cell-item>
|
||||
<u-cell-item title="所属单位" value="xxxxxxxxxxxxxx单位" :arrow="false"></u-cell-item>
|
||||
</u-cell-group>
|
||||
<view class="fab">
|
||||
<u-button type="primary" >退出</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from 'vue'
|
||||
const src = ref("https://ik.imagekit.io/anyup/uview-pro/logo/default.png");
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.u-wrap{
|
||||
background-color: #ffffff;
|
||||
width: 100%;
|
||||
height: calc(100vh - 52px - env(safe-area-inset-bottom));
|
||||
.fab{
|
||||
padding: 20rpx 40rpx;
|
||||
position: fixed;
|
||||
bottom: 200rpx;left: 0;right: 0;
|
||||
z-index: 9999999999999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<view class="custom-wrap u-padding-30">
|
||||
<view class="custom-tabs u-flex box-shadow">
|
||||
<view :class="['custom-tabs-tab', tabIndx?'':'custom-tabs-tab_active']" @click="handleChangeTab(0)">
|
||||
<u-icon name="anquan" custom-prefix="custom-icon" size="80" />
|
||||
<text class="u-margin-top-20">安全生产数据</text>
|
||||
</view>
|
||||
<view :class="['custom-tabs-tab', tabIndx?'custom-tabs-tab_active':'']" @click="handleChangeTab(1)">
|
||||
<u-icon name="zhiliang" custom-prefix="custom-icon" size="80" />
|
||||
<text class="u-margin-top-20">质量焊接数据</text>
|
||||
</view>
|
||||
</view>
|
||||
<u-transition :show="tabIndx === 0" name="slide-right">
|
||||
<view v-if="tabIndx == 0">
|
||||
<ProjectCard />
|
||||
<view style="margin-top: -60rpx;padding: 0 20rpx 40rpx;">
|
||||
<block v-for="(i,idx) in safeComponent">
|
||||
<SafeHoursCard v-if="i===1" />
|
||||
<OrganizerCard v-if="i===2" />
|
||||
<EducationCard v-if="i===3" />
|
||||
<DefectTreatmentCard v-if="i===4" />
|
||||
<CostCard v-if="i===5" />
|
||||
<SpecialEquipCard v-if="i===6" />
|
||||
<BigCrisisCard v-if="i===7" />
|
||||
<RiskRankingCard v-if="i===8" />
|
||||
<WorkCard v-if="i===9" />
|
||||
<EmergencyCard v-if="i===10" />
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</u-transition>
|
||||
<u-transition :show="tabIndx === 1" name="slide-right">
|
||||
<view v-if="tabIndx == 1">
|
||||
<OrgPersonCard />
|
||||
<StarLevelCard />
|
||||
<EducationCard1 />
|
||||
<MeasuringCard />
|
||||
<InspectionRecord />
|
||||
<ProjectItem />
|
||||
<HighQuality />
|
||||
<QCActivity />
|
||||
<ConstructionScheme />
|
||||
<ReviewAndBriefing />
|
||||
<QmsInspect />
|
||||
<AcceptanceData />
|
||||
<WeldingData />
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
defineAsyncComponent,
|
||||
ref
|
||||
} from 'vue';
|
||||
|
||||
/* 加载组件
|
||||
-------------------------------------------------------------*/
|
||||
// 安全
|
||||
import ProjectCard from './safe/projectCard.vue'
|
||||
import SafeHoursCard from './safe/safeHoursCard.vue'
|
||||
import OrganizerCard from './safe/organizerCard.vue'
|
||||
import EducationCard from './safe/educationCard.vue'
|
||||
import DefectTreatmentCard from './safe/defectTreatmentCard.vue'
|
||||
import CostCard from './safe/costCard.vue'
|
||||
import SpecialEquipCard from './safe/specialEquipCard.vue'
|
||||
import BigCrisisCard from './safe/bigCrisisCard.vue'
|
||||
import RiskRankingCard from './safe/riskRankingCard.vue'
|
||||
import WorkCard from './safe/workCard.vue'
|
||||
import EmergencyCard from './safe/emergencyCard.vue'
|
||||
// 质量
|
||||
import OrgPersonCard from './qms/orgPersonCard.vue'
|
||||
import StarLevelCard from './qms/starLevelCard.vue'
|
||||
import EducationCard1 from './qms/educationCard.vue'
|
||||
import MeasuringCard from './qms/measuringCard.vue'
|
||||
import InspectionRecord from './qms/inspectionRecord.vue'
|
||||
import ProjectItem from './qms/projectItemCard.vue'
|
||||
import HighQuality from './qms/highQuality.vue'
|
||||
import QCActivity from './qms/QCActivity.vue'
|
||||
import ConstructionScheme from './qms/constructionScheme.vue'
|
||||
import ReviewAndBriefing from './qms/reviewAndBriefing.vue'
|
||||
import QmsInspect from './qms/qmsInspect.vue'
|
||||
import AcceptanceData from './qms/acceptanceData.vue'
|
||||
import WeldingData from './qms/weldingData.vue'
|
||||
|
||||
const safeComponent = ref([2, 1, 3, 4, 5, 6, 7, 8, 9, 10])
|
||||
|
||||
const tabIndx = ref(0)
|
||||
|
||||
const handleChangeTab = (idx) => {
|
||||
tabIndx.value = idx
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<ChartCard margin="30rpx 0 0 0" title="QC活动">
|
||||
<view class="inspection ">
|
||||
<qiun-data-charts type="column" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
|
||||
</view>
|
||||
</ChartCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChartCard from '@/components/chartCard.vue'
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
import {
|
||||
onReady
|
||||
} from '@dcloudio/uni-app'
|
||||
|
||||
const opts = ref({
|
||||
padding: [15, 15, 0, 5],
|
||||
enableScroll: false,
|
||||
legend: {show: false},
|
||||
xAxis: {
|
||||
disableGrid: true
|
||||
},
|
||||
yAxis: {
|
||||
showTitle: true,
|
||||
data: [{
|
||||
title: "单位：项"
|
||||
}]
|
||||
},
|
||||
extra: {
|
||||
column: {
|
||||
type: "group",
|
||||
width: 30,
|
||||
activeBgColor: "#000000",
|
||||
activeBgOpacity: 0.08,
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const chartData = ref({})
|
||||
|
||||
const handleTap = (e) => {
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
|
||||
onReady(() => {
|
||||
let res = {
|
||||
categories: ["省部级奖\n项", "集团级奖\n项", "企业级奖\n项"],
|
||||
series: [{
|
||||
color: "#27c9cb",
|
||||
name: '',
|
||||
data: [100, 542, 685]
|
||||
},
|
||||
]
|
||||
};
|
||||
chartData.value = JSON.parse(JSON.stringify(res));
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.inspection {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<ChartCard margin="30rpx 0 0 0" title="质量验收数据">
|
||||
<view class="ys">
|
||||
<qiun-data-charts type="mix" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
|
||||
</view>
|
||||
<view class="ys u-margin-top-30">
|
||||
<qiun-data-charts type="mix" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
|
||||
</view>
|
||||
</ChartCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChartCard from '@/components/chartCard.vue'
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
import {
|
||||
onReady
|
||||
} from '@dcloudio/uni-app'
|
||||
|
||||
const opts = ref({
|
||||
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
|
||||
padding: [15, 15, 0, 15],
|
||||
enableScroll: false,
|
||||
legend: { fontSize: 10},
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
},
|
||||
yAxis: {
|
||||
disabled: false,
|
||||
disableGrid: false,
|
||||
splitNumber: 5,
|
||||
gridType: "dash",
|
||||
dashLength: 4,
|
||||
gridColor: "#CCCCCC",
|
||||
padding: 10,
|
||||
showTitle: true,
|
||||
data: [{
|
||||
position: "right",
|
||||
min: 0,
|
||||
max: 100,
|
||||
title: "百分比"
|
||||
},
|
||||
{
|
||||
position: "left",
|
||||
title: "数量",
|
||||
textAlign: "left"
|
||||
}
|
||||
]
|
||||
},
|
||||
extra: {
|
||||
mix: {
|
||||
column: {
|
||||
width: 20,
|
||||
seriesGap: 8
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const chartData = ref({})
|
||||
const chartData1 = ref({})
|
||||
const handleTap = (e) => {
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
|
||||
onReady(() => {
|
||||
let res = {
|
||||
categories: ["关键工序验收", "特殊工程验收", "隐藏工程验收"],
|
||||
series: [{
|
||||
name: "合格率",
|
||||
type: "line",
|
||||
style: "curve",
|
||||
color: "#ffe200",
|
||||
disableLegend: true,
|
||||
data: [70, 50, 85]
|
||||
},
|
||||
{
|
||||
name: "验收数",
|
||||
index: 1,
|
||||
type: "column",
|
||||
data: [40, 55, 110]
|
||||
},
|
||||
{
|
||||
name: "合格数",
|
||||
index: 1,
|
||||
type: "column",
|
||||
data: [50, 20, 75]
|
||||
},
|
||||
]
|
||||
};
|
||||
chartData.value = JSON.parse(JSON.stringify(res));
|
||||
|
||||
let res1 = {
|
||||
categories: ["单位工程", "分部工程", "分项工程"],
|
||||
series: [{
|
||||
name: "合格率",
|
||||
type: "line",
|
||||
style: "curve",
|
||||
color: "#ffe200",
|
||||
disableLegend: true,
|
||||
data: [70, 50, 85]
|
||||
},
|
||||
{
|
||||
name: "验收数",
|
||||
index: 1,
|
||||
type: "column",
|
||||
data: [40, 55, 110]
|
||||
},
|
||||
{
|
||||
name: "合格数",
|
||||
index: 1,
|
||||
type: "column",
|
||||
data: [50, 20, 75]
|
||||
},
|
||||
]
|
||||
};
|
||||
chartData1.value = JSON.parse(JSON.stringify(res1));
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.ys {
|
||||
height: 300rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<ChartCard margin="30rpx 0 0 0" title="施工方案">
|
||||
<view class="inspection ">
|
||||
<qiun-data-charts type="column" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
|
||||
</view>
|
||||
</ChartCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChartCard from '@/components/chartCard.vue'
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
import {
|
||||
onReady
|
||||
} from '@dcloudio/uni-app'
|
||||
|
||||
const opts = ref({
|
||||
padding: [15, 15, 0, 5],
|
||||
enableScroll: false,
|
||||
legend: {show: false},
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
showTitle: true,
|
||||
data: [{
|
||||
title: "单位：个"
|
||||
}]
|
||||
},
|
||||
extra: {
|
||||
column: {
|
||||
type: "group",
|
||||
width: 30,
|
||||
activeBgColor: "#000000",
|
||||
activeBgOpacity: 0.08,
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const chartData = ref({})
|
||||
|
||||
const handleTap = (e) => {
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
|
||||
onReady(() => {
|
||||
let res = {
|
||||
categories: ["总数", "项目审批数", "企业审批数"],
|
||||
series: [{
|
||||
color: "#5c7fcb",
|
||||
name: '',
|
||||
data: [100, 542, 685]
|
||||
},
|
||||
]
|
||||
};
|
||||
chartData.value = JSON.parse(JSON.stringify(res));
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.inspection {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<ChartCard margin="30rpx 0 0 0" title="教育培训">
|
||||
<view class="education u-flex">
|
||||
<view class="education-box">
|
||||
<view class="education-box-lab">质量培训(人次)</view>
|
||||
<view class="education-box-num u-margin-top-20">800</view>
|
||||
</view>
|
||||
<view class="education-box">
|
||||
<view class="education-box-lab">技术质量交底(人次)</view>
|
||||
<view class="education-box-num u-margin-top-20">800</view>
|
||||
</view>
|
||||
</view>
|
||||
</ChartCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChartCard from '@/components/chartCard.vue'
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.education{
|
||||
width: 100%;
|
||||
&-box{
|
||||
flex: 1;
|
||||
&-lab{
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
&-num{
|
||||
color: #333333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<ChartCard margin="30rpx 0 0 0" title="优质工程">
|
||||
<view class="inspection ">
|
||||
<qiun-data-charts type="column" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
|
||||
</view>
|
||||
</ChartCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChartCard from '@/components/chartCard.vue'
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
import {
|
||||
onReady
|
||||
} from '@dcloudio/uni-app'
|
||||
|
||||
const opts = ref({
|
||||
padding: [15, 15, 0, 5],
|
||||
enableScroll: false,
|
||||
legend: {show: false},
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
rotateLabel: true,
|
||||
rotateAngle: -30
|
||||
},
|
||||
yAxis: {
|
||||
showTitle: true,
|
||||
data: [{
|
||||
title: "单位：项"
|
||||
}]
|
||||
},
|
||||
extra: {
|
||||
column: {
|
||||
type: "group",
|
||||
width: 30,
|
||||
activeBgColor: "#000000",
|
||||
activeBgOpacity: 0.08,
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const chartData = ref({})
|
||||
|
||||
const handleTap = (e) => {
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
|
||||
onReady(() => {
|
||||
let res = {
|
||||
categories: ["国家级鲁\n班奖", "国家级国\n优奖", "省部级奖\n项", "市级奖项"],
|
||||
series: [{
|
||||
color: "#91CB74",
|
||||
name: '',
|
||||
data: [100, 542, 685, 254]
|
||||
},
|
||||
]
|
||||
};
|
||||
chartData.value = JSON.parse(JSON.stringify(res));
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.inspection {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<ChartCard margin="30rpx 0 0 0" title="报验记录">
|
||||
<view class="inspection ">
|
||||
<qiun-data-charts type="mix" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
|
||||
</view>
|
||||
</ChartCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChartCard from '@/components/chartCard.vue'
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
import {
|
||||
onReady
|
||||
} from '@dcloudio/uni-app'
|
||||
|
||||
const opts = ref({
|
||||
padding: [15, 15, 0, 15],
|
||||
enableScroll: false,
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
},
|
||||
yAxis: {
|
||||
disabled: false,
|
||||
disableGrid: false,
|
||||
splitNumber: 5,
|
||||
gridType: "dash",
|
||||
dashLength: 4,
|
||||
gridColor: "#CCCCCC",
|
||||
padding: 10,
|
||||
showTitle: true,
|
||||
data: [{
|
||||
position: "left",
|
||||
title: "",
|
||||
textAlign: "left"
|
||||
},
|
||||
{
|
||||
position: "right",
|
||||
min: 0,
|
||||
max: 100,
|
||||
title: "单位: %"
|
||||
}
|
||||
]
|
||||
},
|
||||
extra: {
|
||||
mix: {
|
||||
column: {
|
||||
width: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const chartData = ref({})
|
||||
|
||||
const handleTap = (e) => {
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
|
||||
onReady(() => {
|
||||
let res = {
|
||||
categories: ["设材报验数", "机具报验数", "人员报验数"],
|
||||
series: [
|
||||
|
||||
{
|
||||
name: "",
|
||||
index: 1,
|
||||
type: "line",
|
||||
color: "#5cffc9",
|
||||
data: [70, 50, 85],
|
||||
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "column",
|
||||
style: "curve",
|
||||
color: "#fff705",
|
||||
disableLegend: true,
|
||||
data: [56872, 4027, 8452],
|
||||
format: 'formatDataLabel'
|
||||
},
|
||||
|
||||
]
|
||||
};
|
||||
chartData.value = JSON.parse(JSON.stringify(res));
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.inspection {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
|
||||
<ChartCard margin="30rpx 0 0 0" title="计量器具数据">
|
||||
<view class="measuring u-flex">
|
||||
<view class="measuring-box u-flex u-row-center">
|
||||
<view class="measuring-box-icon"> <u-icon name="jiliangqijujianguan" color="#e28ea3" custom-prefix="custom-icon" size="60" ></u-icon></view>
|
||||
<view class="measuring-box-row u-padding-left-20">
|
||||
<text class="measuring-box-row-num">900台</text>
|
||||
<text class="measuring-box-row-lab">计量器具</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="measuring-box u-flex u-row-center">
|
||||
<view class="measuring-box-icon"> <u-icon name="hege" color="#3bdae2" custom-prefix="custom-icon" size="60" ></u-icon></view>
|
||||
<view class="measuring-box-row u-padding-left-20">
|
||||
<text class="measuring-box-row-num">9000台</text>
|
||||
<text class="measuring-box-row-lab">检验合格</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</ChartCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChartCard from '@/components/chartCard.vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.measuring{
|
||||
padding: 20rpx 0;
|
||||
&-box{
|
||||
flex: 1;
|
||||
&-row{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
&-lab{
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
&-num{
|
||||
color: #333333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<ChartCard margin="30rpx 0 0 0" title="组织机构人员">
|
||||
<view class="org-person">
|
||||
<view class="org-person-row">
|
||||
<view class="org-person-row_lab">
|
||||
集团总数
|
||||
</view>
|
||||
<view class="org-person-row_num">9521</view>
|
||||
</view>
|
||||
<view class="u-flex">
|
||||
<view class="org-person-row">
|
||||
<view class="org-person-row_lab">
|
||||
所企业总部人数
|
||||
</view>
|
||||
<view class="org-person-row_num">9521</view>
|
||||
</view>
|
||||
<view class="org-person-row">
|
||||
<view class="org-person-row_lab">
|
||||
分支机构人数
|
||||
</view>
|
||||
<view class="org-person-row_num">9521</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex">
|
||||
<view class="org-person-row">
|
||||
<view class="org-person-row_lab">
|
||||
质量管理人数
|
||||
</view>
|
||||
<view class="org-person-row_num">9521</view>
|
||||
</view>
|
||||
<view class="org-person-row">
|
||||
<view class="org-person-row_lab">
|
||||
特种设备质保体系
|
||||
</view>
|
||||
<view class="org-person-row_num">9521</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</ChartCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChartCard from '@/components/chartCard.vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.org-person{
|
||||
&-row{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
padding: 20rpx 0;
|
||||
&_lab{
|
||||
width: 200rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
line-height: 1;
|
||||
}
|
||||
&_num{
|
||||
width: calc(100% - 200rpx);
|
||||
line-height: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
padding-left: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<ChartCard margin="30rpx 0 0 0" title="工程划分">
|
||||
<view class="inspection ">
|
||||
<qiun-data-charts type="column" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
|
||||
</view>
|
||||
</ChartCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChartCard from '@/components/chartCard.vue'
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
import {
|
||||
onReady
|
||||
} from '@dcloudio/uni-app'
|
||||
|
||||
const opts = ref({
|
||||
padding: [15, 15, 0, 5],
|
||||
enableScroll: false,
|
||||
legend: {show: false},
|
||||
xAxis: {
|
||||
disableGrid: true
|
||||
},
|
||||
yAxis: {
|
||||
showTitle: true,
|
||||
data: [{
|
||||
title: "单位：个"
|
||||
}]
|
||||
},
|
||||
extra: {
|
||||
column: {
|
||||
type: "group",
|
||||
width: 30,
|
||||
activeBgColor: "#000000",
|
||||
activeBgOpacity: 0.08,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const chartData = ref({})
|
||||
|
||||
const handleTap = (e) => {
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
|
||||
onReady(() => {
|
||||
let res = {
|
||||
categories: ["单位工程数", "分部工程数", "分项工程数"],
|
||||
series: [{
|
||||
name: '',
|
||||
data: [10000, 5428, 6852]
|
||||
},
|
||||
]
|
||||
};
|
||||
chartData.value = JSON.parse(JSON.stringify(res));
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.inspection {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
|
||||
<ChartCard margin="30rpx 0 0 0" title="安全隐患排查治理">
|
||||
<view class="defect">
|
||||
<u-subsection :list="list" :current="current" @change="handleChange"></u-subsection>
|
||||
<view class="defect-main u-flex u-row-between u-margin-top-20">
|
||||
<view class="defect-box gb-all">
|
||||
<text class="defect-box-lab">质量问题</text>
|
||||
<text class="defect-box-num u-margin-top-20">4567项</text>
|
||||
</view>
|
||||
<view class="defect-box gb-rectified">
|
||||
<text class="defect-box-lab">整改完成</text>
|
||||
<text class="defect-box-num u-margin-top-20">20项</text>
|
||||
</view>
|
||||
<view class="defect-box gb-not-rectified">
|
||||
<text class="defect-box-lab">未整改</text>
|
||||
<text class="defect-box-num u-margin-top-20">6项</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</ChartCard>
|
||||
</template>
|
||||
<script setup>
|
||||
import ChartCard from '@/components/chartCard.vue'
|
||||
import {
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
|
||||
const current = ref(0)
|
||||
const list = ref([{
|
||||
name: '集团级'
|
||||
},
|
||||
{
|
||||
name: '企业级'
|
||||
},
|
||||
{
|
||||
name: '分支机构'
|
||||
}, {
|
||||
name: '项目级'
|
||||
}
|
||||
])
|
||||
|
||||
const handleChange = () => {
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.defect {
|
||||
&-main {
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
&-box {
|
||||
width: calc((100% - 40rpx) / 3);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&-lab {
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&-num {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gb-all {
|
||||
background: linear-gradient(to top right, #9E9E9E, #dcdcdc);
|
||||
}
|
||||
|
||||
.gb-not-rectified {
|
||||
background: linear-gradient(to top right, #FFD626, #FF9F7D);
|
||||
}
|
||||
|
||||
.gb-rectified {
|
||||
background: linear-gradient(to top right, #2488FA, #79BAFF);
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<ChartCard margin="30rpx 0 0 0" title="图纸会审/技术交底">
|
||||
<view class="education u-flex">
|
||||
<view class="education-box">
|
||||
<view class="education-box-lab">图纸会审(次)</view>
|
||||
<view class="education-box-num u-margin-top-20">800</view>
|
||||
</view>
|
||||
<view class="education-box">
|
||||
<view class="education-box-lab">设计交底(次)</view>
|
||||
<view class="education-box-num u-margin-top-20">800</view>
|
||||
</view>
|
||||
</view>
|
||||
</ChartCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChartCard from '@/components/chartCard.vue'
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.education{
|
||||
width: 100%;
|
||||
&-box{
|
||||
flex: 1;
|
||||
&-lab{
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
&-num{
|
||||
color: #333333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<ChartCard margin="30rpx 0 0 0" title="星级标准化工地建设">
|
||||
<view class="star-level">
|
||||
<view class="star-level-box u-flex">
|
||||
<view class="star-level-tit">五星</view>
|
||||
<view class="u-flex star-level-box_inner" style="width: calc(100% - 48rpx);">
|
||||
<view class="star-level-row">
|
||||
<view class="star-level_lab">
|
||||
创建数
|
||||
</view>
|
||||
<view class="star-level_num">
|
||||
59
|
||||
</view>
|
||||
</view>
|
||||
<view class="star-level-row">
|
||||
<view class="star-level_lab">
|
||||
企业自评价达标数
|
||||
</view>
|
||||
<view class="star-level_num">
|
||||
59
|
||||
</view>
|
||||
</view>
|
||||
<view class="star-level-row">
|
||||
<view class="star-level_lab">
|
||||
集团验收达标数
|
||||
</view>
|
||||
<view class="star-level_num">
|
||||
59
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="star-level-box u-flex u-margin-top-30 u-margin-bottom-30">
|
||||
<view class="star-level-tit">四星</view>
|
||||
<view class="u-flex star-level-box_inner" style="width: calc(100% - 48rpx);">
|
||||
<view class="star-level-row">
|
||||
<view class="star-level_lab">
|
||||
创建数
|
||||
</view>
|
||||
<view class="star-level_num">
|
||||
59
|
||||
</view>
|
||||
</view>
|
||||
<view class="star-level-row">
|
||||
<view class="star-level_lab">
|
||||
企业自评价达标数
|
||||
</view>
|
||||
<view class="star-level_num">
|
||||
59
|
||||
</view>
|
||||
</view>
|
||||
<view class="star-level-row">
|
||||
<view class="star-level_lab">
|
||||
集团验收达标数
|
||||
</view>
|
||||
<view class="star-level_num">
|
||||
59
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="star-level-box u-flex">
|
||||
<view class="star-level-tit">三星</view>
|
||||
<view class="u-flex star-level-box_inner" style="width: calc(100% - 48rpx);">
|
||||
<view class="star-level-row">
|
||||
<view class="star-level_lab">
|
||||
创建数
|
||||
</view>
|
||||
<view class="star-level_num">
|
||||
59
|
||||
</view>
|
||||
</view>
|
||||
<view class="star-level-row">
|
||||
<view class="star-level_lab">
|
||||
企业自评价达标数
|
||||
</view>
|
||||
<view class="star-level_num">
|
||||
59
|
||||
</view>
|
||||
</view>
|
||||
<view class="star-level-row">
|
||||
<view class="star-level_lab">
|
||||
集团验收达标数
|
||||
</view>
|
||||
<view class="star-level_num">
|
||||
59
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</ChartCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChartCard from '@/components/chartCard.vue'
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.star-level{
|
||||
&-box{
|
||||
&_inner{
|
||||
padding: 0 30rpx;
|
||||
display: grid;
|
||||
grid-template-columns: 100rpx 1fr 1fr;
|
||||
column-gap: 20rpx;
|
||||
}
|
||||
}
|
||||
&-tit{
|
||||
padding: 12rpx;
|
||||
width: 48rpx;
|
||||
height: 82rpx;
|
||||
text-align: center;
|
||||
line-height: 30rpx;
|
||||
font-size: 24rpx;
|
||||
background: linear-gradient(to right, #1e5ca3, #3094ff);
|
||||
color: #ffffff;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
&_lab{
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
}
|
||||
&_num{
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
&-row{
|
||||
height: 100rpx;
|
||||
padding: 10rpx;
|
||||
flex: 1;
|
||||
background-color: #F7FBFE;
|
||||
display: flex;flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<ChartCard margin="30rpx 0 0 0" title="焊接数据">
|
||||
<view class="weld">
|
||||
<view class="weld-row u-padding-20">
|
||||
<view class="weld-row-col u-flex">
|
||||
<view class="weld-row-col_lab">
|
||||
焊工总数
|
||||
</view>
|
||||
<view class="weld-row-col_num u-padding-left-18">
|
||||
945281
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="weld-row1 u-margin-top-20">
|
||||
<view class="weld-row1-col1 u-flex-col">
|
||||
<view class="weld-row1-col1_lab">
|
||||
总达因数
|
||||
</view>
|
||||
<view class="weld-row1-col1_num">
|
||||
945281
|
||||
</view>
|
||||
</view>
|
||||
<view class="weld-row1-col1 u-flex-col">
|
||||
<view class="weld-row1-col1_lab">
|
||||
完成达因数
|
||||
</view>
|
||||
<view class="weld-row1-col1_num">
|
||||
945281
|
||||
</view>
|
||||
</view>
|
||||
<view class="weld-row1-col1 u-flex-col">
|
||||
<view class="weld-row1-col1_lab">
|
||||
总片数
|
||||
</view>
|
||||
<view class="weld-row1-col1_num">
|
||||
945281
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="weld-row2 u-margin-top-20">
|
||||
<view class="weld-row1-col1 u-flex-col">
|
||||
<view class="weld-row1-col1_lab">
|
||||
合格片数
|
||||
</view>
|
||||
<view class="weld-row1-col1_num">
|
||||
945281
|
||||
</view>
|
||||
</view>
|
||||
<view class="weld-row1-col1 u-flex-col">
|
||||
<view class="weld-row1-col1_lab">
|
||||
一次合格率
|
||||
</view>
|
||||
<view class="weld-row1-col1_num">
|
||||
33.00%
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</ChartCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChartCard from '@/components/chartCard.vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.weld {
|
||||
&-row {
|
||||
&-col{
|
||||
&_lab{
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
&_num{
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
background-color: #F7FBFE;
|
||||
}
|
||||
&-row1{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, calc((100% - 60rpx) / 3));
|
||||
grid-column-gap: 30rpx;
|
||||
&-col1{
|
||||
padding: 20rpx;
|
||||
background-color: #F7FBFE;
|
||||
&_lab{
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
&_num{
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-row2{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, calc((100% - 30rpx) / 2));
|
||||
grid-column-gap: 30rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<ChartCard margin="0 0 30rpx 0" title="危大工程管控数据">
|
||||
<view class="big-crisis">
|
||||
<qiun-data-charts type="column" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
|
||||
</view>
|
||||
</ChartCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChartCard from '@/components/chartCard.vue'
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
import {
|
||||
onReady
|
||||
} from '@dcloudio/uni-app'
|
||||
|
||||
const opts = ref({
|
||||
padding: [15, 15, 0, 5],
|
||||
enableScroll: false,
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
xAxis: {
|
||||
disableGrid: true
|
||||
},
|
||||
yAxis: {
|
||||
data: [{
|
||||
min: 0
|
||||
}]
|
||||
},
|
||||
extra: {
|
||||
column: {
|
||||
type: "group",
|
||||
width: 20,
|
||||
activeBgColor: "#000000",
|
||||
activeBgOpacity: 0.08
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const chartData = ref({})
|
||||
|
||||
const handleTap = (e) => {
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
|
||||
onReady(() => {
|
||||
let res = {
|
||||
categories: ["未开始", "进行中", "已完成", "培训人次", "作业人次"],
|
||||
series: [{
|
||||
data: [35, 36, 31, 33, 13]
|
||||
}]
|
||||
};
|
||||
chartData.value = JSON.parse(JSON.stringify(res));
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.big-crisis {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
|
||||
<ChartCard margin="0 0 30rpx 0" title="安全费用" >
|
||||
<view class="cost u-flex">
|
||||
<view class="cost-box">
|
||||
<view class="cost-box-lab">费用提取(亿元)</view>
|
||||
<view class="cost-box-num u-margin-top-20">800</view>
|
||||
</view>
|
||||
<view class="cost-box">
|
||||
<view class="cost-box-lab">费用使用(亿元)</view>
|
||||
<view class="cost-box-num u-margin-top-20">800</view>
|
||||
</view>
|
||||
</view>
|
||||
</ChartCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChartCard from '@/components/chartCard.vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.cost{
|
||||
width: 100%;
|
||||
&-box{
|
||||
flex: 1;
|
||||
&-lab{
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
&-num{
|
||||
color: #333333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
|
||||
<ChartCard margin="0 0 30rpx 0" title="安全隐患排查治理">
|
||||
<view class="defect">
|
||||
<u-subsection :list="list" :current="current" @change="handleChange"></u-subsection>
|
||||
<view class="defect-main u-flex u-row-between u-margin-top-20">
|
||||
<view class="defect-box gb-all">
|
||||
<text class="defect-box-lab">安全隐患</text>
|
||||
<text class="defect-box-num u-margin-top-20">4567</text>
|
||||
</view>
|
||||
<view class="defect-box gb-rectified">
|
||||
<text class="defect-box-lab">整改闭环</text>
|
||||
<text class="defect-box-num u-margin-top-20">20</text>
|
||||
</view>
|
||||
<view class="defect-box gb-not-rectified">
|
||||
<text class="defect-box-lab">未整改</text>
|
||||
<text class="defect-box-num u-margin-top-20">6</text>
|
||||
</view>
|
||||
<view class="defect-box gb-rectified-rate">
|
||||
<text class="defect-box-lab">整改率</text>
|
||||
<text class="defect-box-num u-margin-top-20">99.99%</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</ChartCard>
|
||||
</template>
|
||||
<script setup>
|
||||
import ChartCard from '@/components/chartCard.vue'
|
||||
import {
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
|
||||
const current = ref(0)
|
||||
const list = ref([{
|
||||
name: '集团级'
|
||||
},
|
||||
{
|
||||
name: '公司级'
|
||||
},
|
||||
{
|
||||
name: '项目级'
|
||||
}, {
|
||||
name: '分支机构'
|
||||
}
|
||||
])
|
||||
|
||||
const handleChange = () => {
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.defect {
|
||||
&-main {
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
&-box {
|
||||
width: calc((100% - 40rpx) / 4);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&-lab {
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&-num {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gb-all {
|
||||
background: linear-gradient(to top right, #9E9E9E, #dcdcdc);
|
||||
}
|
||||
|
||||
.gb-not-rectified {
|
||||
background: linear-gradient(to top right, #FFD626, #FF9F7D);
|
||||
}
|
||||
|
||||
.gb-rectified {
|
||||
background: linear-gradient(to top right, #2488FA, #79BAFF);
|
||||
}
|
||||
|
||||
.gb-rectified-rate {
|
||||
background: linear-gradient(to top right, #2AD192, #8DF0C9);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<ChartCard margin="0 0 30rpx 0" title="教育培训">
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts type="area" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
|
||||
</view>
|
||||
</ChartCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChartCard from '@/components/chartCard.vue'
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
import {
|
||||
onReady
|
||||
} from '@dcloudio/uni-app'
|
||||
|
||||
const opts = ref({
|
||||
padding: [15, 15, 0, 15],
|
||||
enableScroll: false,
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
rotateLabel: true,
|
||||
rotateAngle: -30,
|
||||
fontSize: 10
|
||||
},
|
||||
yAxis: {
|
||||
gridType: "dash",
|
||||
dashLength: 2
|
||||
},
|
||||
extra: {
|
||||
tooltip: {
|
||||
showBox: false
|
||||
},
|
||||
area: {
|
||||
type: "curve",
|
||||
opacity: 0.2,
|
||||
addLine: true,
|
||||
width: 2,
|
||||
gradient: true,
|
||||
activeType: "hollow"
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const chartData = ref({})
|
||||
|
||||
const handleTap = (e) => {
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
|
||||
onReady(() => {
|
||||
let res = {
|
||||
categories: ["专项培训", "特种作业\n培训", "三级安全\n教育培训", "安全技术\n交底"],
|
||||
series: [{
|
||||
data: [302265, 70770, 399175, 14851]
|
||||
}]
|
||||
};
|
||||
chartData.value = JSON.parse(JSON.stringify(res));
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.charts-box {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<ChartCard margin="0 0 30rpx 0" title="应急管理数据" >
|
||||
<view class="emergencyCard">
|
||||
<qiun-data-charts type="column" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
|
||||
</view>
|
||||
</ChartCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChartCard from '@/components/chartCard.vue'
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
import {
|
||||
onReady
|
||||
} from '@dcloudio/uni-app'
|
||||
|
||||
const opts = ref({
|
||||
padding: [15, 15, 0, 5],
|
||||
enableScroll: false,
|
||||
legend: {show: false},
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
rotateLabel: true,
|
||||
fontSize: 10,
|
||||
rotateAngle: -30
|
||||
},
|
||||
yAxis: {
|
||||
data: [{
|
||||
min: 0
|
||||
}]
|
||||
},
|
||||
extra: {
|
||||
column: {
|
||||
type: "group",
|
||||
width: 20,
|
||||
activeBgColor: "#000000",
|
||||
activeBgOpacity: 0.08
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const chartData = ref({})
|
||||
|
||||
const handleTap = (e) => {
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
|
||||
onReady(() => {
|
||||
let res = {
|
||||
categories: ["应急预案", "专项预案", "现场处置\n预案", "演练次数", "参演人数"],
|
||||
series: [{
|
||||
data: [35, 36, 31, 33, 13],
|
||||
color: '#eef82f'
|
||||
}],
|
||||
formatter: function(value,index,series,opts){
|
||||
console.log(value)
|
||||
console.log(index)
|
||||
console.log(series)
|
||||
console.log(opts)
|
||||
}
|
||||
};
|
||||
chartData.value = JSON.parse(JSON.stringify(res));
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.emergencyCard {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
|
||||
<ChartCard :loading="loading" margin="0 0 30rpx 0" title="组织机构人员">
|
||||
<view class="organizer">
|
||||
<view class="row u-flex u-padding-20 u-margin-bottom-20">
|
||||
<view class="row_li u-flex u-row-center"><text class="organizer-lab">集团总人数</text><text
|
||||
class="organizer_num">13273</text></view>
|
||||
<view class="row_li u-flex u-row-center"><text class="organizer-lab">总监</text><text
|
||||
class="organizer_num">13273</text></view>
|
||||
<view class="row_li u-flex u-row-center"><text class="organizer-lab">专职</text><text
|
||||
class="organizer_num">13273</text></view>
|
||||
<view class="row_li u-flex u-row-center"><text class="organizer-lab">企业</text><text
|
||||
class="organizer_num">13273</text></view>
|
||||
</view>
|
||||
|
||||
<view class="organizer-tit">分支机构</view>
|
||||
<view class="row u-flex u-padding-20 u-margin-bottom-20">
|
||||
<view class="row_li u-flex u-row-center"><text class="organizer-lab">总监</text><text
|
||||
class="organizer_num">13273</text></view>
|
||||
<view class="row_li u-flex u-row-center"><text class="organizer-lab">专职</text><text
|
||||
class="organizer_num">13273</text></view>
|
||||
</view>
|
||||
<view class="organizer-tit">注安师</view>
|
||||
<view class="row u-flex u-padding-20 u-margin-bottom-20">
|
||||
<view class="row_li u-flex u-row-center"><text class="organizer-lab">在岗职业</text><text
|
||||
class="organizer_num">13273</text></view>
|
||||
</view>
|
||||
<view class="organizer-tit">项目人数</view>
|
||||
<view class="row u-flex u-padding-20 u-margin-bottom-20">
|
||||
<view class="row_li u-flex u-row-center"><text class="organizer-lab">总监</text><text
|
||||
class="organizer_num">13273</text></view>
|
||||
<view class="row_li u-flex u-row-center"><text class="organizer-lab">专职</text><text
|
||||
class="organizer_num">13273</text></view>
|
||||
<view class="row_li u-flex u-row-center"><text class="organizer-lab">安全监护</text><text
|
||||
class="organizer_num">13273</text></view>
|
||||
</view>
|
||||
<view class="organizer-tit">三类人员</view>
|
||||
<view class="row u-flex u-padding-20">
|
||||
<view class="row_li u-flex u-row-center"><text class="organizer-lab">A证</text><text
|
||||
class="organizer_num">13273</text></view>
|
||||
<view class="row_li u-flex u-row-center"><text class="organizer-lab">B证</text><text
|
||||
class="organizer_num">13273</text></view>
|
||||
<view class="row_li u-flex u-row-center"><text class="organizer-lab">C证</text><text
|
||||
class="organizer_num">13273</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</ChartCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from 'vue'
|
||||
import ChartCard from '@/components/chartCard.vue'
|
||||
|
||||
const loading = ref(false)
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.organizer {
|
||||
&-tit {
|
||||
color: #2573cb;
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
background-color: #F7FBFE;
|
||||
padding: 12rpx 20rpx 0;
|
||||
}
|
||||
|
||||
&-lab {
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
&_num {
|
||||
color: #333333;
|
||||
font-size: 28rpx;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.row {
|
||||
background-color: #F7FBFE;
|
||||
|
||||
&_li {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<ChartCard :loading="loading" margin="30rpx 0 0 0" padding="20rpx 10rpx 80rpx 10rpx"
|
||||
bg-color="linear-gradient(#1e5ca3, #3094ff)">
|
||||
<view class="project">
|
||||
<view class="project-col" @click="handleSkip">
|
||||
<text class="project-col-num">1024</text>
|
||||
<text class="project-col-lab u-margin-top-10">在建项目</text>
|
||||
</view>
|
||||
<view class="project-col">
|
||||
<text class="project-col-num">1024</text>
|
||||
<text class="project-col-lab u-margin-top-10">停工项目</text>
|
||||
</view>
|
||||
<view class="project-col">
|
||||
<text class="project-col-num">1024111</text>
|
||||
<text class="project-col-lab u-margin-top-10">参建人数</text>
|
||||
</view>
|
||||
<view class="project-col">
|
||||
<text class="project-col-num">1024</text>
|
||||
<text class="project-col-lab u-margin-top-10">在施危大工程</text>
|
||||
</view>
|
||||
</view>
|
||||
</ChartCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
import ChartCard from '@/components/chartCard.vue'
|
||||
const loading = ref(false)
|
||||
|
||||
const handleSkip = ()=>{
|
||||
uni.navigateTo({
|
||||
url: `/pages/penetrate/project`
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.project {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 25%);
|
||||
|
||||
&-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&-num {
|
||||
text-align: center;
|
||||
overflow-wrap: break-word;
|
||||
width: 100%;
|
||||
color: #ffffff;
|
||||
font-size: 40rpx;
|
||||
|
||||
}
|
||||
|
||||
&-lab {
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<ChartCard margin="0 0 30rpx 0" title="风险分级管控" >
|
||||
<view class="rish-ranking">
|
||||
<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
|
||||
</view>
|
||||
</ChartCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChartCard from '@/components/chartCard.vue'
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
import {
|
||||
onReady, onShow
|
||||
} from '@dcloudio/uni-app'
|
||||
|
||||
const opts = ref({
|
||||
color: ["#EE6666", "#EF893B","#EFCB3B","#3B8CEF"],
|
||||
padding: [5, 5, 5, 5],
|
||||
enableScroll: false,
|
||||
legend: {
|
||||
lineHeight:20,
|
||||
fontSize: 10,
|
||||
itemGap: 20
|
||||
},
|
||||
extra: {
|
||||
pie: {
|
||||
activeOpacity: 0.5,
|
||||
activeRadius: 10,
|
||||
offsetAngle: 0,
|
||||
labelWidth: 15,
|
||||
border: true,
|
||||
borderWidth: 3,
|
||||
borderColor: "#FFFFFF"
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const chartData = ref({})
|
||||
|
||||
const handleTap = (e) => {
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
|
||||
onReady(() => {
|
||||
let res = {
|
||||
series: [{
|
||||
data: [{
|
||||
"name": "重大风险",
|
||||
"value": 50,
|
||||
"labelText": "重大风险:50"
|
||||
}, {
|
||||
"name": "较大风险",
|
||||
"value": 30,
|
||||
"labelText": "较大风险:30"
|
||||
}, {
|
||||
"name": "一般风险",
|
||||
"value": 20,
|
||||
"labelText": "一般风险:20"
|
||||
}, {
|
||||
"name": "低风险",
|
||||
"value": 8,
|
||||
"labelText": "低风险:8"
|
||||
}]
|
||||
}]
|
||||
};
|
||||
chartData.value = JSON.parse(JSON.stringify(res));
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.rish-ranking {
|
||||
width: 100%;
|
||||
height: 480rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<ChartCard margin="0 0 30rpx 0" title="安全工时">
|
||||
<view class="safe-hours">
|
||||
<text>9024145</text><text>万</text>
|
||||
</view>
|
||||
</ChartCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChartCard from '@/components/chartCard.vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.safe-hours {
|
||||
padding: 0 40rpx 0 120rpx;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
|
||||
>text {
|
||||
font-weight: 700;
|
||||
font-size: 52rpx;
|
||||
background: linear-gradient(180deg, #2573cb, #50c2ff);
|
||||
-webkit-background-clip: text;
|
||||
/* 兼容Safari浏览器 */
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
/* 文字透明，显示背景渐变 */
|
||||
letter-spacing: 10rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
|
||||
<ChartCard margin="0 0 30rpx 0" title="施工机具设备" >
|
||||
<view class="special-equip u-flex">
|
||||
<view class="special-equip-box u-flex u-row-center">
|
||||
<view class="special-equip-box-icon"> <u-icon name="ziyuanshiyongtongji" color="#e28ea3" custom-prefix="custom-icon" size="60" ></u-icon></view>
|
||||
<view class="special-equip-box-row u-padding-left-20">
|
||||
<text class="special-equip-box-row-num">9000个</text>
|
||||
<text class="special-equip-box-row-lab">在用个数</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="special-equip-box u-flex u-row-center">
|
||||
<view class="special-equip-box-icon"> <u-icon name="tezhongshebei" color="#3bdae2" custom-prefix="custom-icon" size="60" ></u-icon></view>
|
||||
<view class="special-equip-box-row u-padding-left-20">
|
||||
<text class="special-equip-box-row-num">9000个</text>
|
||||
<text class="special-equip-box-row-lab">特种设备</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</ChartCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChartCard from '@/components/chartCard.vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.special-equip{
|
||||
padding: 20rpx 0;
|
||||
&-box{
|
||||
flex: 1;
|
||||
&-row{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
&-lab{
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
&-num{
|
||||
color: #333333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<ChartCard margin="0 0 30rpx 0" title="高风险作业许可" >
|
||||
<view class="work u-flex">
|
||||
<view class="work-box u-flex u-row-center">
|
||||
<view class="work-box-icon"> <u-icon name="xukezheng" color="#8CEEFF" custom-prefix="custom-icon" size="60" ></u-icon></view>
|
||||
<view class="work-box-row u-padding-left-20">
|
||||
<text class="work-box-row-num">9000个</text>
|
||||
<text class="work-box-row-lab">许可</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="work-box u-flex u-row-center">
|
||||
<view class="work-box-icon"> <u-icon name="guanbi" color="#FFEB3B" custom-prefix="custom-icon" size="60" ></u-icon></view>
|
||||
<view class="work-box-row u-padding-left-20">
|
||||
<text class="work-box-row-num">9000个</text>
|
||||
<text class="work-box-row-lab">关闭</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</ChartCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChartCard from '@/components/chartCard.vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.work{
|
||||
padding: 20rpx 0;
|
||||
&-box{
|
||||
flex: 1;
|
||||
&-row{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
&-lab{
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
&-num{
|
||||
color: #333333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<view class="u-wrap u-padding-30">
|
||||
<CardModule title="督查检查" :show-tit-line="true" margin=" 0 0 30rpx 0">
|
||||
<u-grid :col="4" :border="false">
|
||||
<u-grid-item>
|
||||
<u-icon name="photo" :size="46"></u-icon>
|
||||
<view class="grid-text">图片</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item>
|
||||
<u-icon name="lock" :size="46"></u-icon>
|
||||
<view class="grid-text">锁头</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item>
|
||||
<u-icon name="hourglass" :size="46"></u-icon>
|
||||
<view class="grid-text">沙漏</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item>
|
||||
<u-icon name="lock" :size="46"></u-icon>
|
||||
<view class="grid-text">锁头</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item>
|
||||
<u-icon name="hourglass" :size="46"></u-icon>
|
||||
<view class="grid-text">沙漏</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</CardModule>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import CardModule from '@/components/chartCard.vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-wrap {
|
||||
.u-section {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<view class="custom-wrap">
|
||||
|
||||
<u-transition :show="current === 0" name="slide-right">
|
||||
<Board v-if="current === 0" />
|
||||
</u-transition>
|
||||
<u-transition :show="current === 1" name="slide-right">
|
||||
<FunModule v-if="current === 1" />
|
||||
</u-transition>
|
||||
<u-transition :show="current === 2" name="slide-right">
|
||||
<About v-if="current === 2" />
|
||||
</u-transition>
|
||||
<u-tabbar :hideTabBar="false" v-model="current" active-color="var(--u-type-primary)" mid-button-size="60"
|
||||
:list="list" :mid-button="false"></u-tabbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
|
||||
/* 加载TabBar组件
|
||||
-------------------------------------------------------------*/
|
||||
import Board from './board/index.vue'
|
||||
import About from './about/index.vue'
|
||||
import FunModule from './fun/index.vue'
|
||||
// 定义响应式数据
|
||||
const list = ref([{
|
||||
iconPath: "home",
|
||||
selectedIconPath: "home-fill",
|
||||
text: "首页",
|
||||
isDot: false,
|
||||
customIcon: false,
|
||||
},
|
||||
{
|
||||
iconPath: "grid",
|
||||
selectedIconPath: "grid-fill",
|
||||
text: "功能",
|
||||
midButton: true,
|
||||
customIcon: false,
|
||||
},
|
||||
{
|
||||
iconPath: "account",
|
||||
selectedIconPath: "account-fill",
|
||||
text: "我的",
|
||||
isDot: false,
|
||||
customIcon: false,
|
||||
},
|
||||
])
|
||||
|
||||
const current = ref(2)
|
||||
|
||||
watch(current, (val) => {
|
||||
switch (val) {
|
||||
case 0:
|
||||
uni.setNavigationBarTitle({
|
||||
title: '首页'
|
||||
});
|
||||
break
|
||||
case 1:
|
||||
uni.setNavigationBarTitle({
|
||||
title: '功能'
|
||||
});
|
||||
break
|
||||
case 2:
|
||||
uni.setNavigationBarTitle({
|
||||
title: '我的'
|
||||
});
|
||||
break
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<view class="u-wrap">
|
||||
<u-sticky>
|
||||
<!-- 只能有一个根元素 -->
|
||||
<view class="sticky">
|
||||
<u-search v-model="keyword" placeholder="请输入单位名称" :show-action="false" ></u-search>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<ListCol v-for="(item, idx) in list" :data="item" :column='column' label-width="160" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
import ListCol from '@/components/ListCol.vue'
|
||||
|
||||
const keyword = ref("")
|
||||
const column = ref([{
|
||||
name: '单位名称',
|
||||
value: 'unitName',
|
||||
type: 'string',
|
||||
}, {
|
||||
name: '在建项目数',
|
||||
value: 'inProject',
|
||||
type: 'string',
|
||||
}, {
|
||||
name: '停工项目数',
|
||||
value: 'stopProject',
|
||||
type: 'string',
|
||||
}])
|
||||
|
||||
const list = ref([{
|
||||
unitName: '天辰',
|
||||
inProject: 20,
|
||||
stopProject: 5
|
||||
}, {
|
||||
unitName: '赛鼎',
|
||||
inProject: 20,
|
||||
stopProject: 5
|
||||
}])
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.sticky{
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user