看板
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user