sqys/sqys_xcx.git

			@@ -1,6 +1,94 @@
			<template>
			<view>

			<u-navbar placeholder bgColor="#1171E0FF" leftIconColor="white" :autoBack="true">
			<template slot="center">
			<view style="color: white;">数据看板</view>
			</template>
			</u-navbar>
			<view class="donw-box"></view>
			<view class="page-main">
			<view class="box">
			<view class="title">
			<text>基础信息</text>
			</view>
			<view class="grid-box">
			<view class="grid-item">
			<view class="label">企业总数</view>
			<view>5,400</view>
			</view>
			<view class="grid-item">
			<view class="label">执法单位</view>
			<view>5,400</view>
			</view>
			<view class="grid-item">
			<view class="label">执法人员</view>
			<view>5,400</view>
			</view>
			<view class="grid-item">
			<view class="label">执法申请</view>
			<view>5,400</view>
			</view>
			<view class="grid-item">
			<view class="label">已审批</view>
			<view>5,400</view>
			</view>
			<view class="grid-item">
			<view class="label">已结束</view>
			<view>5,400</view>
			</view>
			</view>
			</view>
			<view class="box">
			<view class="title set-flex-content-between set-flex">
			<text>执法单位执法次数</text>
			<u-icon name="calendar" size="24"></u-icon>
			</view>
			<view class="number">
			<view class="date">2024-04-05 <text class="margin-text">至</text> 2024-06-14</view>
			<view class="progress-box">
			<qiun-data-charts key="11" type="bar" :opts="opts" :chartData="chartData" />
			</view>
			</view>
			</view>
			<view class="box">
			<view class="title set-flex-content-between set-flex">
			<text>企业被执法次数排行</text>
			<u-icon name="calendar" size="24"></u-icon>
			</view>
			<view class="number">
			<view class="date" style="margin-bottom: 36rpx;">2024-04-05 <text class="margin-text">至</text> 2024-06-14</view>
			<view class="list-box">
			<view class="list-item" v-for="(item,index) in listData" :key="index">
			<view class="width-set">
			<text style="margin-right: 10rpx;">{{index+1}}</text>
			<text class="company u-line-1">北京东方盈联科技有限公司</text>
			</view>
			<text class="value">54</text>
			</view>
			<view class="look-more">
			<text>查看更多</text>
			<u-icon name="arrow-right" color="#7E8596"></u-icon>
			</view>
			</view>
			</view>
			</view>
			<view class="box">
			<view class="title set-flex-content-between set-flex">
			<text>执法类型占比</text>
			<u-icon name="calendar" size="24"></u-icon>
			</view>
			<view class="number">
			<view class="date">2024-04-05 <text class="margin-text">至</text> 2024-06-14</view>
			<view class="progress-box">
			<qiun-data-charts
			type="rose"
			key="22"
			:opts="opts1"
			:chartData="chartData1"
			/> </view>
			</view>
			</view>
			</view>
			</view>
			</template>

			@@ -8,15 +96,126 @@
			export default {
			data() {
			return {

			listData: [
			{
			name: '北京东方盈联科技有限公司',
			value: 54
			},
			{
			name: '北京东方盈联科技有限公司',
			value: 54
			},
			{
			name: '北京东方盈联科技有限公司',
			value: 54
			},
			{
			name: '北京东方盈联科技有限公司',
			value: 54
			}
			],
			chartData: {},
			//您可以通过修改 config-ucharts.js 文件中下标为 ['bar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
			opts: {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
			"#ea7ccc"
			],
			padding: [15, 30, 0, 5],
			enableScroll: false,
			legend: {
			show: false
			},
			xAxis: {
			boundaryGap: "justify",
			disableGrid: false,
			min: 0,
			axisLine: false,
			max: 40
			},
			yAxis: {},
			extra: {
			bar: {
			type: "group",
			width: 10,
			meterBorde: 1,
			meterFillColor: "#FFFFFF",
			activeBgColor: "#000000",
			activeBgOpacity: 0.08,
			linearType: "custom",
			barBorderCircle: true,
			seriesGap: 2,
			categoryGap: 2
			}
			}
			},
			chartData1: {},
			opts1: {
			color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
			padding: [5,5,5,5],
			enableScroll: false,
			legend: {
			show: true,
			position: "left",
			lineHeight: 25
			},
			extra: {
			rose: {
			type: "area",
			minRadius: 50,
			activeOpacity: 0.5,
			activeRadius: 10,
			offsetAngle: 0,
			labelWidth: 15,
			border: false,
			borderWidth: 2,
			borderColor: "#FFFFFF"
			}
			}
			}
			}
			},
			onReady() {
			this.getServerData();
			this.getServerData1()
			},
			methods: {

			getServerData() {
			//模拟从服务器获取数据时的延时
			setTimeout(() => {
			//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			let res = {
			categories: ["工商管理局", "城市管理局", "城市管理局", "城市管理局", "城市管理局", "城市管理局"],
			series: [{
			name: "目标值",
			data: [35, 36, 31, 33, 13, 34]
			}
			]
			};
			this.chartData = JSON.parse(JSON.stringify(res));
			}, 500);
			},
			getServerData1() {
			//模拟从服务器获取数据时的延时
			setTimeout(() => {
			//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			let res = {
			series: [
			{
			data: [{"name":"一班","value":50},{"name":"二班","value":30},{"name":"三班","value":20},{"name":"四班","value":18},{"name":"五班","value":8}]
			}
			]
			};
			this.chartData1 = JSON.parse(JSON.stringify(res));
			}, 500);
			},
			}
			}
			</script>

			<style>

			page {
			background-color: #F4F4F4FF;
			}
			</style>
			<style lang="scss" scoped>
			@import "./dataLook.scss";
			</style>