Compare commits
No commits in common. "8fa1f6e1fe126b9ebe352641bff0406b6a14a1d2" and "ea072afc8a2d5bb9c2af65b46a77a247d433b4d0" have entirely different histories.
8fa1f6e1fe
...
ea072afc8a
@ -7,8 +7,6 @@ import { baseUrlHost } from '../baseUrlHost';
|
|||||||
*
|
*
|
||||||
* 登录api接口集合
|
* 登录api接口集合
|
||||||
* @method getlogList 获取日志列表
|
* @method getlogList 获取日志列表
|
||||||
* @method getaiabilityList 获取统计AI能力列表
|
|
||||||
* @method getbaseUserList 获取统计基础信息列表
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export function logApi() {
|
export function logApi() {
|
||||||
@ -20,18 +18,5 @@ export function logApi() {
|
|||||||
params,
|
params,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getabilityList: (params:object) => {
|
|
||||||
return request({
|
|
||||||
url: baseUrlHost + '/acLog/AiAbility',
|
|
||||||
method: 'get',
|
|
||||||
params,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
getbaseUserList: () => {
|
|
||||||
return request({
|
|
||||||
url: baseUrlHost + '/acLog/basicInformation',
|
|
||||||
method: 'get',
|
|
||||||
});
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
:xs="24"
|
:xs="24"
|
||||||
:sm="12"
|
:sm="12"
|
||||||
:md="12"
|
:md="12"
|
||||||
:lg="8"
|
:lg="6"
|
||||||
:xl="6"
|
:xl="6"
|
||||||
v-for="(v, k) in state.homeOne"
|
v-for="(v, k) in state.homeOne"
|
||||||
:key="k"
|
:key="k"
|
||||||
@ -15,7 +15,7 @@
|
|||||||
<div class="flex-margin flex w100" :class="` home-one-animation${k}`">
|
<div class="flex-margin flex w100" :class="` home-one-animation${k}`">
|
||||||
<div class="flex-auto">
|
<div class="flex-auto">
|
||||||
<span class="font30">{{ v.num1 }}</span>
|
<span class="font30">{{ v.num1 }}</span>
|
||||||
<!-- <span class="ml5 font16" :style="{ color: v.color1 }">{{ v.num2 }}%</span> -->
|
<span class="ml5 font16" :style="{ color: v.color1 }">{{ v.num2 }}%</span>
|
||||||
<div class="mt10">{{ v.num3 }}</div>
|
<div class="mt10">{{ v.num3 }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="home-card-item-icon flex" :style="{ background: `var(${v.color2})` }">
|
<div class="home-card-item-icon flex" :style="{ background: `var(${v.color2})` }">
|
||||||
@ -25,29 +25,40 @@
|
|||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row :gutter="15" class="home-card-two mb15" >
|
<el-row :gutter="15" class="home-card-two mb15">
|
||||||
<el-col
|
<el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16">
|
||||||
:xs="24"
|
|
||||||
:sm="24"
|
|
||||||
:md="24"
|
|
||||||
:lg="24"
|
|
||||||
:xl="20"
|
|
||||||
>
|
|
||||||
<div class="home-card-item">
|
<div class="home-card-item">
|
||||||
<!-- 添加日期范围选择框 -->
|
<div style="height: 100%" ref="homeLineRef"></div>
|
||||||
<div class="date-picker-container">
|
</div>
|
||||||
<el-date-picker
|
</el-col>
|
||||||
v-model="dateRange"
|
<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8" class="home-media">
|
||||||
type="datetimerange"
|
<div class="home-card-item">
|
||||||
range-separator="至"
|
<div style="height: 100%" ref="homePieRef"></div>
|
||||||
start-placeholder="开始时间"
|
</div>
|
||||||
end-placeholder="结束时间"
|
</el-col>
|
||||||
format="YYYY-MM-DD HH:mm:ss"
|
</el-row>
|
||||||
value-format="YYYY-MM-DD HH:mm:ss"
|
<el-row :gutter="15" class="home-card-three">
|
||||||
@change="handleDateChange"
|
<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8">
|
||||||
/>
|
<div class="home-card-item">
|
||||||
|
<div class="home-card-item-title">快捷导航工具</div>
|
||||||
|
<div class="home-monitor">
|
||||||
|
<div class="flex-warp">
|
||||||
|
<div class="flex-warp-item" v-for="(v, k) in state.homeThree" :key="k">
|
||||||
|
<div class="flex-warp-item-box" :class="`home-animation${k}`">
|
||||||
|
<div class="flex-margin">
|
||||||
|
<i :class="v.icon" :style="{ color: v.iconColor }"></i>
|
||||||
|
<span class="pl5">{{ v.label }}</span>
|
||||||
|
<div class="mt10">{{ v.value }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="height: 100%; width: 100%" ref="homeBarRef"></div>
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16" class="home-media">
|
||||||
|
<div class="home-card-item">
|
||||||
|
<div style="height: 100%" ref="homeBarRef"></div>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@ -60,16 +71,11 @@ import * as echarts from 'echarts';
|
|||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||||
import { logApi } from '/@/api/log';
|
|
||||||
|
|
||||||
const logapi = logApi();
|
|
||||||
|
|
||||||
// 定义变量内容
|
// 定义变量内容
|
||||||
const homeLineRef = ref();
|
const homeLineRef = ref();
|
||||||
const homePieRef = ref();
|
const homePieRef = ref();
|
||||||
const homeBarRef = ref();
|
const homeBarRef = ref();
|
||||||
const dateRange = ref('');
|
|
||||||
const defaultTime1 = new Date(2000, 1, 1, 0, 0, 0) // '12:00:00'
|
|
||||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||||
const storesThemeConfig = useThemeConfig();
|
const storesThemeConfig = useThemeConfig();
|
||||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||||
@ -82,42 +88,42 @@ const state = reactive({
|
|||||||
dispose: [null, '', undefined],
|
dispose: [null, '', undefined],
|
||||||
} as any,
|
} as any,
|
||||||
homeOne: [
|
homeOne: [
|
||||||
// {
|
{
|
||||||
// num1: '125,12',
|
num1: '125,12',
|
||||||
// num2: '-12.32',
|
num2: '-12.32',
|
||||||
// num3: '订单统计信息',
|
num3: '订单统计信息',
|
||||||
// num4: 'fa fa-meetup',
|
num4: 'fa fa-meetup',
|
||||||
// color1: '#FF6462',
|
color1: '#FF6462',
|
||||||
// color2: '--next-color-primary-lighter',
|
color2: '--next-color-primary-lighter',
|
||||||
// color3: '--el-color-primary',
|
color3: '--el-color-primary',
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// num1: '653,33',
|
num1: '653,33',
|
||||||
// num2: '+42.32',
|
num2: '+42.32',
|
||||||
// num3: '月度计划信息',
|
num3: '月度计划信息',
|
||||||
// num4: 'iconfont icon-ditu',
|
num4: 'iconfont icon-ditu',
|
||||||
// color1: '#6690F9',
|
color1: '#6690F9',
|
||||||
// color2: '--next-color-success-lighter',
|
color2: '--next-color-success-lighter',
|
||||||
// color3: '--el-color-success',
|
color3: '--el-color-success',
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// num1: '125,65',
|
num1: '125,65',
|
||||||
// num2: '+17.32',
|
num2: '+17.32',
|
||||||
// num3: '年度计划信息',
|
num3: '年度计划信息',
|
||||||
// num4: 'iconfont icon-zaosheng',
|
num4: 'iconfont icon-zaosheng',
|
||||||
// color1: '#6690F9',
|
color1: '#6690F9',
|
||||||
// color2: '--next-color-warning-lighter',
|
color2: '--next-color-warning-lighter',
|
||||||
// color3: '--el-color-warning',
|
color3: '--el-color-warning',
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// num1: '520,43',
|
num1: '520,43',
|
||||||
// num2: '-10.01',
|
num2: '-10.01',
|
||||||
// num3: '访问统计信息',
|
num3: '访问统计信息',
|
||||||
// num4: 'fa fa-github-alt',
|
num4: 'fa fa-github-alt',
|
||||||
// color1: '#FF6462',
|
color1: '#FF6462',
|
||||||
// color2: '--next-color-danger-lighter',
|
color2: '--next-color-danger-lighter',
|
||||||
// color3: '--el-color-danger',
|
color3: '--el-color-danger',
|
||||||
// },
|
},
|
||||||
],
|
],
|
||||||
homeThree: [
|
homeThree: [
|
||||||
{
|
{
|
||||||
@ -183,47 +189,6 @@ const state = reactive({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const getList = async() =>{
|
|
||||||
try{
|
|
||||||
const res = await logapi.getbaseUserList();
|
|
||||||
if (res?.success) {
|
|
||||||
const data = res.data;
|
|
||||||
// 动态构建 homeOne 数组
|
|
||||||
state.homeOne = [
|
|
||||||
{
|
|
||||||
num1: data.userTotalCount,
|
|
||||||
// num2: "12.32", // 示例百分比变化值
|
|
||||||
num3: "总用户数",
|
|
||||||
color1: '#FF6462',
|
|
||||||
color2: '--next-color-primary-lighter',
|
|
||||||
color3: '--el-color-primary',
|
|
||||||
num4: "iconfont icon-zaosheng", // 示例图标类
|
|
||||||
},
|
|
||||||
{
|
|
||||||
num1: data.userTodayCount,
|
|
||||||
// num2: "42.32", // 示例百分比变化值
|
|
||||||
num3: "今日用户数",
|
|
||||||
color1: '#6690F9',
|
|
||||||
color2: '--next-color-success-lighter',
|
|
||||||
color3: '--el-color-success',
|
|
||||||
num4: "iconfont icon-ditu",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
num1: data.homeviewCount,
|
|
||||||
// num2: "17.32", // 示例百分比变化值
|
|
||||||
num3: "首页浏览数",
|
|
||||||
color1: '#6690F9',
|
|
||||||
color2: '--next-color-warning-lighter',
|
|
||||||
color3: '--el-color-warning',
|
|
||||||
num4: "iconfont icon-zaosheng",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
}
|
|
||||||
}catch(error){
|
|
||||||
console.error(error)
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 折线图
|
// 折线图
|
||||||
const initLineChart = () => {
|
const initLineChart = () => {
|
||||||
if (!state.global.dispose.some((b: any) => b === state.global.homeChartOne)) state.global.homeChartOne.dispose();
|
if (!state.global.dispose.some((b: any) => b === state.global.homeChartOne)) state.global.homeChartOne.dispose();
|
||||||
@ -391,93 +356,136 @@ const initPieChart = () => {
|
|||||||
state.global.homeChartTwo.setOption(option);
|
state.global.homeChartTwo.setOption(option);
|
||||||
state.myCharts.push(state.global.homeChartTwo);
|
state.myCharts.push(state.global.homeChartTwo);
|
||||||
};
|
};
|
||||||
|
|
||||||
//获取柱状图的数据
|
|
||||||
const fetchChartData = async (start?: string, end?: string) => {
|
|
||||||
try {
|
|
||||||
const params = start && end ? { start, end } : {}; // 参数
|
|
||||||
const response = await logapi.getabilityList(params); // 调用接口获取数据
|
|
||||||
if (response && response.data) {
|
|
||||||
initBarChart(response.data); // 调用图表初始化函数并传入数据
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('获取柱状图数据失败:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 处理日期范围变化
|
|
||||||
const handleDateChange = () => {
|
|
||||||
if (dateRange.value.length === 2) {
|
|
||||||
const [start, end] = dateRange.value; // 已是 yyyy-MM-dd HH:mm:ss 格式
|
|
||||||
fetchChartData(start, end); // 将选择后的日期范围传递给图表数据接口
|
|
||||||
} else {
|
|
||||||
fetchChartData(); // 日期范围清空时的操作
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 柱状图
|
// 柱状图
|
||||||
const initBarChart = (data:any = []) => {
|
const initBarChart = () => {
|
||||||
if (!state.global.dispose.some((b) => b === state.global.homeCharThree))
|
if (!state.global.dispose.some((b: any) => b === state.global.homeCharThree)) state.global.homeCharThree.dispose();
|
||||||
state.global.homeCharThree.dispose();
|
state.global.homeCharThree = markRaw(echarts.init(homeBarRef.value, state.charts.theme));
|
||||||
|
const option = {
|
||||||
state.global.homeCharThree = markRaw(echarts.init(homeBarRef.value, state.charts.theme));
|
backgroundColor: state.charts.bgColor,
|
||||||
|
title: {
|
||||||
const abilities = data.length ? data.map((item) => item.ability) : ['无数据'];
|
text: '地热开发利用',
|
||||||
const numbers = data.length ? data.map((item) => item.num) : [0];
|
x: 'left',
|
||||||
|
textStyle: { fontSize: '15', color: state.charts.color },
|
||||||
const option = {
|
},
|
||||||
backgroundColor: state.charts.bgColor,
|
tooltip: { trigger: 'axis' },
|
||||||
title: {
|
legend: { data: ['供温', '回温', '压力值(Mpa)'], right: 0 },
|
||||||
text: 'AI能力使用统计',
|
grid: { top: 70, right: 80, bottom: 30, left: 80 },
|
||||||
x: 'left',
|
xAxis: [
|
||||||
textStyle: { fontSize: '15', color: state.charts.color },
|
{
|
||||||
},
|
type: 'category',
|
||||||
tooltip: { trigger: 'axis' },
|
data: ['1km', '2km', '3km', '4km', '5km', '6km'],
|
||||||
grid: { top: 100, right: 30, bottom: 100, left: 50 },
|
boundaryGap: true,
|
||||||
xAxis: [
|
axisTick: { show: false },
|
||||||
{
|
},
|
||||||
type: 'category',
|
],
|
||||||
data: abilities,
|
yAxis: [
|
||||||
axisTick: { show: false },
|
{
|
||||||
axisLabel: {
|
name: '供回温度(℃）',
|
||||||
color: state.charts.color,
|
nameLocation: 'middle',
|
||||||
interval: 0,
|
nameTextStyle: { padding: [3, 4, 50, 6] },
|
||||||
rotate: 30,
|
splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
|
||||||
},
|
axisLine: { show: false },
|
||||||
axisLine: {
|
axisTick: { show: false },
|
||||||
lineStyle: { color: state.charts.color },
|
axisLabel: { color: state.charts.color, formatter: '{value} ' },
|
||||||
},
|
},
|
||||||
},
|
{
|
||||||
],
|
name: '压力值(Mpa)',
|
||||||
yAxis: [
|
nameLocation: 'middle',
|
||||||
{
|
nameTextStyle: { padding: [50, 4, 5, 6] },
|
||||||
type: 'value',
|
splitLine: { show: false },
|
||||||
name: '使用次数',
|
axisLine: { show: false },
|
||||||
nameTextStyle: { padding: [0, 0, 10, 0] },
|
axisTick: { show: false },
|
||||||
splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
|
axisLabel: { color: state.charts.color, formatter: '{value} ' },
|
||||||
axisLine: { show: false },
|
},
|
||||||
axisTick: { show: false },
|
],
|
||||||
axisLabel: { color: state.charts.color, formatter: '{value}' },
|
series: [
|
||||||
},
|
{
|
||||||
],
|
name: '供温',
|
||||||
series: [
|
type: 'line',
|
||||||
{
|
smooth: true,
|
||||||
name: '使用次数',
|
showSymbol: true,
|
||||||
type: data.length ? 'bar' : 'line', // 无数据时显示为一条线
|
// 矢量画五角星
|
||||||
barWidth: '40%',
|
symbol: 'path://M150 0 L80 175 L250 75 L50 75 L220 175 Z',
|
||||||
itemStyle: {
|
symbolSize: 12,
|
||||||
color: data.length ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
yAxisIndex: 0,
|
||||||
{ offset: 0, color: 'rgba(108,80,243,0.8)' },
|
areaStyle: {
|
||||||
{ offset: 1, color: 'rgba(108,80,243,0.3)' },
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
]) : undefined, // 符合bar和line样式
|
{ offset: 0, color: 'rgba(250,180,101,0.3)' },
|
||||||
borderRadius: [5, 5, 0, 0],
|
{ offset: 1, color: 'rgba(250,180,101,0)' },
|
||||||
},
|
]),
|
||||||
data: numbers,
|
shadowColor: 'rgba(250,180,101,0.2)',
|
||||||
},
|
shadowBlur: 20,
|
||||||
],
|
},
|
||||||
};
|
itemStyle: { color: '#FF8000' },
|
||||||
state.global.homeCharThree.setOption(option);
|
// data中可以使用对象，value代表相应的值，另外可加入自定义的属性
|
||||||
state.myCharts.push(state.global.homeCharThree);
|
data: [
|
||||||
|
{ value: 1, stationName: 's1' },
|
||||||
|
{ value: 3, stationName: 's2' },
|
||||||
|
{ value: 4, stationName: 's3' },
|
||||||
|
{ value: 9, stationName: 's4' },
|
||||||
|
{ value: 3, stationName: 's5' },
|
||||||
|
{ value: 2, stationName: 's6' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '回温',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
showSymbol: true,
|
||||||
|
symbol: 'emptyCircle',
|
||||||
|
symbolSize: 12,
|
||||||
|
yAxisIndex: 0,
|
||||||
|
areaStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
[
|
||||||
|
{ offset: 0, color: 'rgba(199, 237, 250,0.5)' },
|
||||||
|
{ offset: 1, color: 'rgba(199, 237, 250,0.2)' },
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#3bbc86',
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 31, stationName: 's1' },
|
||||||
|
{ value: 36, stationName: 's2' },
|
||||||
|
{ value: 54, stationName: 's3' },
|
||||||
|
{ value: 24, stationName: 's4' },
|
||||||
|
{ value: 73, stationName: 's5' },
|
||||||
|
{ value: 22, stationName: 's6' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '压力值(Mpa)',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 30,
|
||||||
|
yAxisIndex: 1,
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: 'rgba(108,80,243,0.3)' },
|
||||||
|
{ offset: 1, color: 'rgba(108,80,243,0)' },
|
||||||
|
]),
|
||||||
|
//柱状图圆角
|
||||||
|
borderRadius: [30, 30, 0, 0],
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 11, stationName: 's1' },
|
||||||
|
{ value: 34, stationName: 's2' },
|
||||||
|
{ value: 54, stationName: 's3' },
|
||||||
|
{ value: 39, stationName: 's4' },
|
||||||
|
{ value: 63, stationName: 's5' },
|
||||||
|
{ value: 24, stationName: 's6' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
state.global.homeCharThree.setOption(option);
|
||||||
|
state.myCharts.push(state.global.homeCharThree);
|
||||||
};
|
};
|
||||||
// 批量设置 echarts resize
|
// 批量设置 echarts resize
|
||||||
const initEchartsResizeFun = () => {
|
const initEchartsResizeFun = () => {
|
||||||
@ -496,8 +504,6 @@ const initEchartsResize = () => {
|
|||||||
// 页面加载时
|
// 页面加载时
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initEchartsResize();
|
initEchartsResize();
|
||||||
getList();
|
|
||||||
fetchChartData(); // 初始加载无参数调用
|
|
||||||
});
|
});
|
||||||
// 由于页面缓存原因，keep-alive
|
// 由于页面缓存原因，keep-alive
|
||||||
onActivated(() => {
|
onActivated(() => {
|
||||||
@ -545,7 +551,7 @@ $homeNavLengh: 8;
|
|||||||
.home-card-three {
|
.home-card-three {
|
||||||
.home-card-item {
|
.home-card-item {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: 130px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
transition: all ease 0.3s;
|
transition: all ease 0.3s;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
@ -587,7 +593,7 @@ $homeNavLengh: 8;
|
|||||||
.home-card-two,
|
.home-card-two,
|
||||||
.home-card-three {
|
.home-card-three {
|
||||||
.home-card-item {
|
.home-card-item {
|
||||||
height: 600px;
|
height: 400px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
.home-monitor {
|
.home-monitor {
|
||||||
@ -624,15 +630,4 @@ $homeNavLengh: 8;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-picker-container {
|
|
||||||
margin-bottom: 10px; /* 添加与标题的间距 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-title {
|
|
||||||
margin-bottom: 0px; /* 标题与图表之间的间距 */
|
|
||||||
font-size: 16px; /* 可调整为合适大小 */
|
|
||||||
font-weight: bold; /* 字体加粗，增强可读性 */
|
|
||||||
color: var(--el-text-color-primary);
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@ -40,12 +40,12 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col> -->
|
</el-col> -->
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||||
<el-form-item label="手机号" >
|
<el-form-item label="手机号" prop="phone">
|
||||||
<el-input v-model="state.ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
|
<el-input v-model="state.ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||||
<el-form-item label="邮箱" >
|
<el-form-item label="邮箱" prop="mail">
|
||||||
<el-input v-model="state.ruleForm.mail" placeholder="请输入" clearable></el-input>
|
<el-input v-model="state.ruleForm.mail" placeholder="请输入" clearable></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
@ -123,8 +123,8 @@ const state = reactive({
|
|||||||
rules:{
|
rules:{
|
||||||
username:{ required: true, message: '请输入账户名称', trigger:'blur'},
|
username:{ required: true, message: '请输入账户名称', trigger:'blur'},
|
||||||
acgroup:{ required: true, message: '请选择关联角色', trigger:'change'},
|
acgroup:{ required: true, message: '请选择关联角色', trigger:'change'},
|
||||||
// phone:{ required: true, message: '请输入手机号', trigger:'blur'},
|
phone:{ required: true, message: '请输入手机号', trigger:'blur'},
|
||||||
// mail:{ required: true, message: '请输入邮箱', trigger:'blur'},
|
mail:{ required: true, message: '请输入邮箱', trigger:'blur'},
|
||||||
password:{ required: true, message: '请输入账户密码', trigger:'blur'},
|
password:{ required: true, message: '请输入账户密码', trigger:'blur'},
|
||||||
},
|
},
|
||||||
// deptData: [] as DeptTreeType[], // 部门数据
|
// deptData: [] as DeptTreeType[], // 部门数据
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user