From d5ed7f0fb88ccc83950acc9936aa7c9c3ca242e0 Mon Sep 17 00:00:00 2001
From: D <3066417822@qq.com>
Date: Sun, 3 Dec 2023 15:44:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=81=A2=E5=A4=8D=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index.vue | 186 ++++++++++++++------------------------------
 1 file changed, 60 insertions(+), 126 deletions(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index 07b1842..c839312 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,141 +1,75 @@
 <template>
-  <view style="height: 200rpx;background-color: skyblue;"></view>
-  <view>
-    <u--form labelPosition="left" :model="form" :rules="rules" ref="form1" :labelWidth="120"
-      :labelStyle="{ paddingLeft: '40rpx' }">
-      <u-form-item label="姓名" prop="name" borderBottom required>
-        <u--input v-model="form.name" border="none" placeholder="请输入姓名" />
-      </u-form-item>
-
-      <u-form-item label="性别" prop="sex" borderBottom @click="showSex = true">
-        <u--input v-model="form.sex" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"
-          suffixIcon="arrow-right" />
-      </u-form-item>
-
-      <u-form-item label="年龄" prop="age" borderBottom required>
-        <u--input v-model="form.age" border="none" placeholder="请输入年龄" />
-      </u-form-item>
-
-      <u-form-item label="手机号" prop="phone" borderBottom required>
-        <u--input v-model="form.phone" border="none" placeholder="请输入手机号" />
-      </u-form-item>
-
-      <u-form-item label="服务单位" prop="service" borderBottom required>
-        <u--input v-model="form.service" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"
-          suffixIcon="arrow-right" />
-      </u-form-item>
-
-      <u-form-item label="从业年数" prop="years" borderBottom required>
-        <u--input v-model="form.years" border="none" placeholder="请输入从业年数" />
-      </u-form-item>
-
-      <u-form-item label="维修专长" prop="profession" borderBottom required>
-        <view @click="showSex = true">
-          <u--input disabled disabledColor="#ffffff" placeholder="添加" border="none" prefixIcon="plus-circle" />
-        </view>
-      </u-form-item>
-
-      <u-form-item label="服务地区" prop="region" borderBottom required>
-        <view @click="show.region = true">
-          <u--input disabled disabledColor="#ffffff" placeholder="添加" border="none" prefixIcon="plus-circle" />
-        </view>
-      </u-form-item>
-
-      <u-form-item label="居住地址" prop="address" borderBottom required>
-        <u--input v-model="form.address" border="none" placeholder="请输入居住地址" />
-      </u-form-item>
-
-      <u-form-item label="身份证号" prop="id_number" borderBottom required>
-        <u--input v-model="form.id_number" border="none" placeholder="请输入身份证号" />
-      </u-form-item>
-
-      <u-form-item label="支付宝账户" prop="alipay" borderBottom required>
-        <u--input v-model="form.alipay" border="none" placeholder="请输入支付宝账户" />
-      </u-form-item>
-
-      <u-form-item label="身份证上传" prop="id_card" borderBottom required>
-        <u--input v-model="form.id_card" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"
-          suffixIcon="arrow-right" />
-      </u-form-item>
-
-      <u-form-item label="人脸识别" prop="face" borderBottom required>
-        <u--input v-model="form.face" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"
-          suffixIcon="arrow-right" />
-      </u-form-item>
-
-      <u-form-item label="技能证书上传" prop="skill" borderBottom>
-        <u--input v-model="form.skill" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"
-          suffixIcon="arrow-right" />
-      </u-form-item>
-    </u--form>
-    <u-action-sheet :show="show.sex" :actions="options.sex" title="请选择性别" @close="show.sex = false" @select="sexSelect" />
-    <u-action-sheet :show="show.unit" :actions="options.unit" title="请选择单位" @close="show.unit = false"
-      @select="unitSelect" />
-    <u-city-select v-model="show.region" @city-change="citySelect" />
+  <view class="content">
+    <image class="logo" src="@/static/logo.png"></image>
+    <view class="text-area">
+      <text class="title">Hello RuoYi-Vue</text>
+    </view>
+    <view class="text-area">
+      <up-text type="primary" text="uview-plus"></up-text>
+    </view>
+    <view class="charts-box">
+      <qiun-data-charts type="column" :chartData="chartData" />
+    </view>
   </view>
 </template>
 
 <script setup>
-import { reactive } from 'vue';
 import { ref, onMounted } from 'vue';
 
-const form = reactive({
-  name: '',
-  sex: '',
-  age: '',
-  phone: '',
-  service: '',
-  years: '',
-  profession: '',
-  region: '',
-  address: '',
-  id_number: '',
-  alipay: '',
-  id_card: '',
-  face: '',
-  skill: ''
-})
-const rules = reactive({
+const chartData = ref({});
+
+onMounted(() => { getServerData() });
+
+function getServerData() {
+  // 模拟从服务器获取数据时的延时
+  setTimeout(() => {
+    let res = {
+      categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
+      series: [
+        {
+          name: '目标值',
+          data: [35, 36, 31, 33, 13, 34],
+        },
+        {
+          name: '完成量',
+          data: [18, 27, 21, 24, 6, 28],
+        },
+      ],
+    };
+    chartData.value = JSON.parse(JSON.stringify(res));
+  }, 500);
+}
+</script>
 
-})
-const show = reactive({
-  sex: false,
-  unit: false,
-  region: false
-})
-const options = reactive({
-  sex: [{ name: '男' }, { name: '女' }],
-  unit: [
-    { name: "济南产晏太阳能有限公司" },
-    { name: "济南一休太阳能有限公司" },
-    { name: "济南荣源太阳能有限公司" },
-    { name: "济南力瑞新能能源科技有限公司" },
-    { name: "济南东狮设备安装有限公司" }
-  ],
-  profession: [
-    { name: "普通太阳能" },
-    { name: "壁挂太阳能" },
-    { name: "分体式" },
-    { name: "工程" },
-    { name: "空气能" },
-    { name: "电热水器" },
-  ]
-})
-function sexSelect(e) {
-  form.sex = e.name
+<style scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
-function unitSelect(e) {
-  form.unit = e.name
+
+.logo {
+  height: 200rpx;
+  width: 200rpx;
+  margin-top: 200rpx;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 50rpx;
 }
-function citySelect(e) {
-  form.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
-  //  e.province.value + '-' + e.city.value + '-' + e.area.value;
+
+.text-area {
+  display: flex;
+  justify-content: center;
 }
 
-</script>
+.title {
+  font-size: 36rpx;
+  color: #8f8f94;
+}
 
-<style scoped lang="scss">
-:deep(.u-form-item__body__left__content__required) {
-  margin-left: 30rpx;
+.charts-box {
+  width: 100%;
+  height: 300px;
 }
 </style>