1、前端页面工具模块节假日功能实现

2、前端页面工具模块mm图片实现
2022-01-20 21:12:13 +08:00 · 2022-01-20 21:12:13 +08:00 · 66675bcc87
parent 5da5b5d93b
commit 66675bcc87
6 changed files with 335 additions and 2 deletions
--- a/ruoyi-ui/src/api/business/openapi/apitools.js
+++ b/ruoyi-ui/src/api/business/openapi/apitools.js
@ -0,0 +1,27 @@
+import request from '@/utils/request'
+
+//获取节假日信息
+export function getHoliday() {
+  return request({
+    url: '/openapi/apitools/holiday',
+    method: 'get',
+  })
+}
+
+
+//获取mm图片信息
+export function getBeautyPicture() {
+  return request({
+    url: '/openapi/apitools/beautypicture',
+    method: 'get',
+  })
+}
+
+
+//获取历史今天信息
+export function getHistoryToday() {
+  return request({
+    url: '/openapi/apitools/historytoday',
+    method: 'get',
+  })
+}
--- a/ruoyi-ui/src/views/business/tools/apitools/index.vue
+++ b/ruoyi-ui/src/views/business/tools/apitools/index.vue
@ -1,13 +1,294 @@
 <template>
+  <div>
+    <el-row>
+      <el-col :span="24">
+        <div class="top_col">
+          <span style="cursor: crosshair">小工具</span>
+        </div>
+      </el-col>
+    </el-row>

+    <el-row>
+      <el-col :span="24">
+        <div class="table_col">
+          <div>
+            <el-form label-width="80px" label-position="right">
+              <el-form-item label="节假日" label-width="auto">
+                <el-popover
+                  placement="bottom"
+                  width="400"
+                  v-model="holidayVisible">
+
+                  <div v-for="data in holidayData" v-loading="loading1">
+                    <span>&nbsp;{{ data.holidayName }}&nbsp;</span>
+                    <span>&nbsp;------&nbsp;</span>
+                    <span>{{ data.returnDate }}</span>
+                    <span>&nbsp;------&nbsp;</span>
+                    <span>还剩&nbsp;<span style="color: red">{{ data.residueDays }}</span>&nbsp;天</span>
+                    <el-divider><i class="el-icon-chat-round"></i></el-divider>
+                  </div>
+                  <el-button type="primary" icon="el-icon-search" size="mini" @click="getHoliday()" slot="reference">
+                    搜索
+                  </el-button>
+                </el-popover>
+              </el-form-item>
+            </el-form>
+          </div>
+          <div>
+            <el-form label-width="80px" label-position="right">
+              <el-form-item label="MM图片" label-width="auto">
+
+                <el-popover
+                  placement="bottom"
+                  width="988"
+                  v-model="beautyPictureVisible">
+                  <el-image v-for="data in BeautyPictureData" v-loading="loading2"
+                            style="width: 192px; height: 108px"
+                            :src="data.imageUrl"
+                            :preview-src-list="pictureList">
+                  </el-image>
+                  <el-button type="primary" icon="el-icon-search" size="mini" @click="getBeautyPicture()"
+                             slot="reference">搜索
+                  </el-button>
+                </el-popover>
+
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <div>
+            <el-form label-width="80px" label-position="right">
+              <el-form-item label="历史今天" label-width="auto">
+
+                <el-popover
+                  placement="bottom"
+                  width="988"
+                  v-model="historyTodayVisible">
+
+                  <el-button type="primary" icon="el-icon-search" @click="getHistoryToday()" size="mini"
+                             slot="reference">搜索
+                  </el-button>
+
+                </el-popover>
+
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+
+        <div class="table_col2">
+          <el-form :inline="true" class="">
+            <el-form-item label="身份证查询" label-width="100px">
+              <el-input placeholder="请输入身份证"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary">搜索</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row>
+      <el-col :span="24">
+        <div class="top_col">
+          <span style="cursor: crosshair">实用工具</span>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row>
+      <el-col :span="24">
+        <div class="table2_col">
+
+          <div class="table2_col_div">
+            <el-form :inline="true" class="">
+              <el-form-item label="手机归属地" label-width="100px">
+                <el-input placeholder="请输入手机号码"></el-input>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary">搜索</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <div class="table2_col_div">
+            <el-form :inline="true" class="">
+              <el-form-item label="实时天气" label-width="100px">
+                <el-input placeholder="请输入城市名称"></el-input>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary">搜索</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <div class="table2_col_div">
+            <el-form :inline="true" class="">
+              <el-form-item label="预报天气" label-width="100px">
+                <el-input placeholder="请输入城市名称"></el-input>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary">搜索</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <div class="table2_col_div">
+            <el-form :inline="true" class="">
+              <el-form-item label="垃圾分类" label-width="100px">
+                <el-input placeholder="请输入垃圾名称"></el-input>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary">搜索</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <div class="table2_col_div">
+            <el-form :inline="true" class="">
+              <el-form-item label="简繁转换" label-width="100px">
+                <el-input placeholder="请输入简体中文"></el-input>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary">搜索</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <div class="table2_col_div">
+            <el-form :inline="true" class="">
+              <el-form-item label="汉语字典" label-width="100px">
+                <el-input placeholder="请输入单个中文"></el-input>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary">搜索</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+
+  </div>
 </template>

 <script>
+
+import {getHoliday, getHistoryToday, getBeautyPicture} from "@/api/business/openapi/apitools";
+
 export default {
-  name: "Apitools"
+  name: "Apitools",
+
+  data() {
+    return {
+      //--------------获取的数据--------------------
+      holidayData: [],
+      BeautyPictureData: [],
+      pictureList: [],   //单独存放图片路径
+      historyTodayData: [],
+
+
+      //------------控制弹出显示隐藏-----------------
+      holidayVisible: false,
+      beautyPictureVisible: false,
+      historyTodayVisible: false,
+
+
+      //遮罩层
+      loading1: false,
+      loading2: false,
+
+
+    }
+  },
+
+  created() {
+
+  },
+
+  methods: {
+    //获取历史今天数据信息
+    getHistoryToday() {
+      getHistoryToday().then(res => {
+        this.historyTodayData = res.data
+      })
+    },
+
+    //获取节假日信息
+    getHoliday() {
+      this.loading1 = true
+      getHoliday().then(res => {
+        this.loading1 = false
+        this.holidayData = res.data
+      });
+    },
+
+    //获取mm图片信息
+    getBeautyPicture() {
+      this.loading2 = true
+      this.pictureList = []
+      getBeautyPicture().then(res => {
+        this.loading2 = false
+        this.BeautyPictureData = res.data
+        //单独把图片放入数组
+        res.data.forEach(data => {
+          this.pictureList.push(data.imageUrl)
+        })
+      })
+    },
+
+  }
+
 }
 </script>

 <style scoped>
+.top_col {
+  height: 40px;
+  margin: 10px 10px;
+  background-color: #bfcbd9;
+  line-height: 40px;
+  padding-left: 20px;
+  border-radius: 17px;
+  font-size: 13px;
+}
+
+.table_col {
+  height: 120px;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  width: 64.5%;
+  float: left;
+}
+
+.table_col2 {
+  width: 35.5%;
+  float: left;
+  height: 120px;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.table_col div {
+  float: left;
+  width: 200px;
+}
+
+
+.table2_col {
+  height: 135px;
+  padding: 20px;
+}
+
+
+.table2_col_div {
+  float: left;
+  width: 33%;
+}
+

 </style>
--- a/xjs-business/xjs-business-openapi/src/main/java/com/xjs/apitools/controller/ApiToolsController.java
+++ b/xjs-business/xjs-business-openapi/src/main/java/com/xjs/apitools/controller/ApiToolsController.java
@ -58,6 +58,7 @@ public class ApiToolsController {
    @GetMapping("nowweather/{city}")
    @ApiOperation("获取实时天气信息")
    @Log(title = "获取实时天气")
+    @RequiresPermissions("open:apitools:nowweather")
    public R<ApiNowWeather> getNowWeatherApiData(@PathVariable("city") String city) {
        return R.ok(apiToolsService.getNowWeather(city));
    }
@ -65,6 +66,7 @@ public class ApiToolsController {
    @GetMapping("forecastweather/{city}")
    @ApiOperation("获取预报天气信息")
    @Log(title = "获取预报天气")
+    @RequiresPermissions("open:apitools:forecastweather")
    public R<ApiForecastWeather> getForecastWeatherApiData(@PathVariable("city") String city) {
        return R.ok(apiToolsService.getForecastWeather(city));
    }
@ -73,6 +75,7 @@ public class ApiToolsController {
    @GetMapping("garbagesorting/{name}")
    @ApiOperation("获取垃圾分类信息")
    @Log(title = "获取垃圾分类")
+    @RequiresPermissions("open:apitools:garbagesorting")
    public R<ApiGarbageSorting> getGarbageSortingApiData(@PathVariable("name") String name) {
        return R.ok(apiToolsService.getGarbageSorting(name));
    }
@ -80,6 +83,7 @@ public class ApiToolsController {
    @GetMapping("beautypicture")
    @ApiOperation("获取mm图片信息")
    @Log(title = "获取mm图片分类")
+    @RequiresPermissions("open:apitools:beautypicture")
    public R<List<ApiBeautyPicture>> getBeautyPictureApiData() {
        return R.ok(apiToolsService.getBeautyPictureList());
    }
@ -87,6 +91,7 @@ public class ApiToolsController {
    @GetMapping("historytoday")
    @ApiOperation("获取历史今天信息")
    @Log(title = "获取历史今天")
+    @RequiresPermissions("open:apitools:historytoday")
    public R<List<ApiHistoryToday>> getHistoryTodayApiData() {
        return R.ok(apiToolsService.getHistoryTodayList());
    }
@ -94,6 +99,7 @@ public class ApiToolsController {
    @GetMapping("simplecomplex/{content}")
    @ApiOperation("获取简繁转换信息")
    @Log(title = "获取简繁转换")
+    @RequiresPermissions("open:apitools:simplecomplex")
    public R<ApiSimpleComplex> getSimpleComplexApiData(@PathVariable("content") String content) {
        boolean b = ChineseUtils.checkNameChese(content);
        if (b) {
@ -107,6 +113,7 @@ public class ApiToolsController {
    @GetMapping("chinesedict/{content}")
    @ApiOperation("获取汉语字典信息")
    @Log(title = "获取汉语字典")
+    @RequiresPermissions("open:apitools:chinesedict")
    public R<ApiChineseDict> getChineseDictApiData(@PathVariable("content") String content) {
        boolean b1 = ChineseUtils.checkNameChese(content);
        if (b1 && content.length() == 1) {
@ -120,6 +127,7 @@ public class ApiToolsController {
    @GetMapping("idcardquery/{idcard}")
    @ApiOperation("获取身份证信息")
    @Log(title = "获取身份证信息")
+    @RequiresPermissions("open:apitools:idcardquery")
    public R<ApiIdcardQuery> getIdcardQueryApiData(@PathVariable("idcard") String idcard) {
        boolean id15 = Pattern.matches(IDCARD_15_REGEX, idcard);
        boolean id18 = Pattern.matches(IDCARD_18_REGEX, idcard);
--- a/xjs-business/xjs-business-openapi/src/main/java/com/xjs/apitools/domain/ApiHistoryToday.java
+++ b/xjs-business/xjs-business-openapi/src/main/java/com/xjs/apitools/domain/ApiHistoryToday.java
@ -59,7 +59,7 @@ public class ApiHistoryToday implements Serializable {
        } catch (NumberFormatException e) {
            e.printStackTrace();
        }
-        return this.year + "-" + m + "-" + this.day;
+        return this.year + "年" + m + "月" + this.day+"日";

    }

--- a/xjs-business/xjs-business-openapi/src/main/java/com/xjs/apitools/domain/ApiHoliday.java
+++ b/xjs-business/xjs-business-openapi/src/main/java/com/xjs/apitools/domain/ApiHoliday.java
@ -39,4 +39,10 @@ public class ApiHoliday implements Serializable {
     * 是否是农历节日
     */
    private Boolean lunarHoliday;
+
+
+    /**
+     * 最后返回的日期(可能是公历可能是农历)
+     */
+    private String returnDate;
 }
--- a/xjs-business/xjs-business-openapi/src/main/java/com/xjs/apitools/service/impl/ApiToolsServiceImpl.java
+++ b/xjs-business/xjs-business-openapi/src/main/java/com/xjs/apitools/service/impl/ApiToolsServiceImpl.java
@ -1,6 +1,9 @@
 package com.xjs.apitools.service.impl;

 import cn.hutool.core.collection.CollUtil;
+import cn.hutool.core.date.ChineseDate;
+import cn.hutool.core.date.DateTime;
+import cn.hutool.core.date.DateUtil;
 import com.ruoyi.common.core.utils.StringUtils;
 import com.xjs.apitools.domain.*;
 import com.xjs.apitools.factory.ApiToolsFactory;
@ -94,6 +97,14 @@ public class ApiToolsServiceImpl implements ApiToolsService {
        Optional.ofNullable(apiHolidayList).orElseThrow(ApiException::new);
        List<ApiHoliday> collect = apiHolidayList.stream().map(holidayFactory -> {
            if (holidayFactory.getResidueDays() >= 0) {
+                if (holidayFactory.getLunarHoliday()) {
+                    //是农历
+                    DateTime lunarDate = DateUtil.parseDate(holidayFactory.getLunarDate());
+                    ChineseDate chineseDate = new ChineseDate(lunarDate.toJdkDate());
+                    holidayFactory.setReturnDate(chineseDate.toString());
+                }else {
+                    holidayFactory.setReturnDate(holidayFactory.getDate());
+                }
                return holidayFactory;
            } else {
                return null;