2026.3.26

使用ucharts图表，兼容app
每个图表组件添加:canvas2d="false"
加载方法改成onMounted

pages/index/board/index.vue

@@ -1,11 +1,11 @@
 <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)">
+			<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)">
+			<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>
@@ -13,36 +13,59 @@
 		<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" />
+				<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 />
+				<!-- QC活动 -->
 				<QCActivity />
+				<!-- 施工方案 -->
 				<ConstructionScheme />
+				<!-- 图纸会审/技术交底 -->
 				<ReviewAndBriefing />
+				<!-- 安全隐患排查治理 -->
 				<QmsInspect />
+				<!-- 质量验收数据 -->
 				<AcceptanceData />
+				<!-- 焊接数据 -->
 				<WeldingData />
 			</view>
 		</u-transition>
@@ -50,48 +73,44 @@
 </template>
 
 <script setup>
-	import {
-		defineAsyncComponent,
-		ref
-	} from 'vue';
+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'
+// 安全
+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 safeComponent = ref([2, 1, 3, 4, 5, 6, 7, 8, 9, 10]);
 
-	const tabIndx = ref(0)
+const tabIndx = ref(0);
 
-	const handleChangeTab = (idx) => {
-		tabIndx.value = idx
-	}
+const handleChangeTab = (idx) => {
+	tabIndx.value = idx;
+};
 </script>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>

pages/index/board/qms/QCActivity.vue

@@ -1,7 +1,7 @@
 <template>
 	<ChartCard margin="30rpx 0 0 0" title="QC活动">
 		<view class="inspection ">
-			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
+			<qiun-data-charts type="column" :canvas2d="false" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
 		</view>
 	</ChartCard>
 </template>
@@ -9,11 +9,8 @@
 <script setup>
 	import ChartCard from '@/components/chartCard.vue'
 	import {
-		ref
+		ref,onMounted
 	} from 'vue';
-	import {
-		onReady
-	} from '@dcloudio/uni-app'
 
 	const opts = ref({
 		padding: [15, 15, 0, 5],
@@ -46,7 +43,7 @@
 	}
 
 
-	onReady(() => {
+	onMounted(() => {
 		let res = {
 			categories: ["省部级奖\n项", "集团级奖\n项", "企业级奖\n项"],
 			series: [{

pages/index/board/qms/acceptanceData.vue

@@ -1,10 +1,10 @@
 <template>
 	<ChartCard margin="30rpx 0 0 0" title="质量验收数据">
 		<view class="ys">
-			<qiun-data-charts type="mix" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
+			<qiun-data-charts type="mix" :canvas2d="false" :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" />
+			<qiun-data-charts type="mix" :canvas2d="false" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
 		</view>
 	</ChartCard>
 </template>
@@ -12,12 +12,9 @@
 <script setup>
 	import ChartCard from '@/components/chartCard.vue'
 	import {
-		ref
+		ref,onMounted
 	} 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],
@@ -65,7 +62,7 @@
 	}
 
 
-	onReady(() => {
+	onMounted(() => {
 		let res = {
 		categories: ["关键工序验收", "特殊工程验收", "隐藏工程验收"],
 		series: [{

pages/index/board/qms/constructionScheme.vue

@@ -1,7 +1,7 @@
 <template>
 	<ChartCard margin="30rpx 0 0 0" title="施工方案">
 		<view class="inspection ">
-			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
+			<qiun-data-charts type="column" :canvas2d="false" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
 		</view>
 	</ChartCard>
 </template>
@@ -9,11 +9,8 @@
 <script setup>
 	import ChartCard from '@/components/chartCard.vue'
 	import {
-		ref
+		ref,onMounted
 	} from 'vue';
-	import {
-		onReady
-	} from '@dcloudio/uni-app'
 
 	const opts = ref({
 		padding: [15, 15, 0, 5],
@@ -47,7 +44,7 @@
 	}
 
 
-	onReady(() => {
+	onMounted(() => {
 		let res = {
 			categories: ["总数", "项目审批数", "企业审批数"],
 			series: [{

pages/index/board/qms/highQuality.vue

@@ -1,7 +1,7 @@
 <template>
 	<ChartCard margin="30rpx 0 0 0" title="优质工程">
 		<view class="inspection ">
-			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
+			<qiun-data-charts type="column" :canvas2d="false" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
 		</view>
 	</ChartCard>
 </template>
@@ -9,11 +9,8 @@
 <script setup>
 	import ChartCard from '@/components/chartCard.vue'
 	import {
-		ref
+		ref,onMounted
 	} from 'vue';
-	import {
-		onReady
-	} from '@dcloudio/uni-app'
 
 	const opts = ref({
 		padding: [15, 15, 0, 5],
@@ -48,7 +45,7 @@
 	}
 
 
-	onReady(() => {
+	onMounted(() => {
 		let res = {
 			categories: ["国家级鲁\n班奖", "国家级国\n优奖", "省部级奖\n项", "市级奖项"],
 			series: [{

pages/index/board/qms/inspectionRecord.vue

@@ -1,7 +1,7 @@
 <template>
 	<ChartCard margin="30rpx 0 0 0" title="报验记录">
 		<view class="inspection ">
-			<qiun-data-charts type="mix" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
+			<qiun-data-charts type="mix" :opts="opts" :canvas2d="false" :chartData="chartData" @getIndex="handleTap" />
 		</view>
 	</ChartCard>
 </template>
@@ -9,11 +9,8 @@
 <script setup>
 	import ChartCard from '@/components/chartCard.vue'
 	import {
-		ref
+		ref,onMounted
 	} from 'vue';
-	import {
-		onReady
-	} from '@dcloudio/uni-app'
 
 	const opts = ref({
 		padding: [15, 15, 0, 15],
@@ -62,7 +59,7 @@
 	}
 
 
-	onReady(() => {
+	onMounted(() => {
 		let res = {
 			categories: ["设材报验数", "机具报验数", "人员报验数"],
 			series: [

pages/index/board/qms/projectItemCard.vue

@@ -1,7 +1,7 @@
 <template>
 	<ChartCard margin="30rpx 0 0 0" title="工程划分">
 		<view class="inspection ">
-			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
+			<qiun-data-charts type="column" :canvas2d="false" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
 		</view>
 	</ChartCard>
 </template>
@@ -9,11 +9,8 @@
 <script setup>
 	import ChartCard from '@/components/chartCard.vue'
 	import {
-		ref
+		ref,onMounted
 	} from 'vue';
-	import {
-		onReady
-	} from '@dcloudio/uni-app'
 
 	const opts = ref({
 		padding: [15, 15, 0, 5],
@@ -45,7 +42,7 @@
 	}
 
 
-	onReady(() => {
+	onMounted(() => {
 		let res = {
 			categories: ["单位工程数", "分部工程数", "分项工程数"],
 			series: [{

pages/index/board/safe/bigCrisisCard.vue

@@ -1,7 +1,7 @@
 <template>
 	<ChartCard margin="0 0 30rpx 0" title="危大工程管控数据">
 		<view class="big-crisis">
-			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
+			<qiun-data-charts type="column" :opts="opts" :canvas2d="false" :chartData="chartData" @getIndex="handleTap" />
 		</view>
 	</ChartCard>
 </template>
@@ -9,12 +9,8 @@
 <script setup>
 	import ChartCard from '@/components/chartCard.vue'
 	import {
-		ref
+		ref,onMounted
 	} from 'vue';
-	import {
-		onReady
-	} from '@dcloudio/uni-app'
-
 	const opts = ref({
 		padding: [15, 15, 0, 5],
 		enableScroll: false,
@@ -46,7 +42,7 @@
 	}
 
 
-	onReady(() => {
+	onMounted(() => {
 		let res = {
 			categories: ["未开始", "进行中", "已完成", "培训人次", "作业人次"],
 			series: [{

pages/index/board/safe/educationCard.vue

@@ -1,72 +1,68 @@
 <template>
 	<ChartCard margin="0 0 30rpx 0" title="教育培训">
 		<view class="charts-box">
-			<qiun-data-charts type="area" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
+			<qiun-data-charts type="area" :opts="opts" :canvas2d="false"  :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'
+import ChartCard from '@/components/chartCard.vue';
+import { ref ,onMounted} from 'vue';
 
-	const opts = ref({
-		padding: [15, 15, 0, 15],
-		enableScroll: false,
-		legend: {
-			show: false
+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
 		},
-		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"
-			}
+		area: {
+			type: 'curve',
+			opacity: 0.2,
+			addLine: true,
+			width: 2,
+			gradient: true,
+			activeType: 'hollow'
 		}
-	})
-
-	const chartData = ref({})
-
-	const handleTap = (e) => {
-		console.log(e)
 	}
+});
 
+const chartData = ref({});
 
-	onReady(() => {
-		let res = {
-			categories: ["专项培训", "特种作业\n培训", "三级安全\n教育培训", "安全技术\n交底"],
-			series: [{
+const handleTap = (e) => {
+	console.log(e);
+};
+
+onMounted(() => {
+	let res = {
+		categories: ['专项培训', '特种作业\n培训', '三级安全\n教育培训', '安全技术\n交底'],
+		series: [
+			{
 				data: [302265, 70770, 399175, 14851]
-			}]
-		};
-		chartData.value = JSON.parse(JSON.stringify(res));
-	})
+			}
+		]
+	};
+	chartData.value = JSON.parse(JSON.stringify(res));
+});
 </script>
 
 <style scoped>
-	.charts-box {
-		width: 100%;
-		height: 400rpx;
-	}
-</style>
+.charts-box {
+	width: 100%;
+	height: 400rpx;
+}
+</style>

pages/index/board/safe/emergencyCard.vue

@@ -1,7 +1,7 @@
 <template>
 	<ChartCard  margin="0 0 30rpx 0" title="应急管理数据" >
 		<view class="emergencyCard">
-			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
+			<qiun-data-charts type="column" :opts="opts" :canvas2d="false" :chartData="chartData" @getIndex="handleTap" />
 		</view>
 	</ChartCard>
 </template>
@@ -9,11 +9,8 @@
 <script setup>
 	import ChartCard from '@/components/chartCard.vue'
 	import {
-		ref
+		ref,onMounted
 	} from 'vue';
-	import {
-		onReady
-	} from '@dcloudio/uni-app'
 	
 	const opts = ref({
 		padding: [15, 15, 0, 5],
@@ -47,7 +44,7 @@
 	}
 	
 	
-	onReady(() => {
+	onMounted(() => {
 		let res = {
 			categories: ["应急预案", "专项预案", "现场处置\n预案", "演练次数", "参演人数"],
 			series: [{

pages/index/board/safe/riskRankingCard.vue

@@ -1,7 +1,7 @@
 <template>
 	<ChartCard  margin="0 0 30rpx 0" title="风险分级管控" >
 	<view class="rish-ranking">
-		<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
+		<qiun-data-charts type="pie" :opts="opts" :canvas2d="false" :chartData="chartData" />
 	</view>
 	</ChartCard>
 </template>
@@ -9,7 +9,7 @@
 <script setup>
 	import ChartCard from '@/components/chartCard.vue'
 	import {
-		ref
+		ref,onMounted
 	} from 'vue';
 	import {
 		onReady, onShow
@@ -44,7 +44,7 @@
 	}
 
 
-	onReady(() => {
+	onMounted(() => {
 		let res = {
 			series: [{
 				data: [{

pages/index/index.vue

@@ -50,7 +50,7 @@
 		},
 	])
 
-	const current = ref(2)
+	const current = ref(0)
 
 	watch(current, (val) => {
 		switch (val) {