添加首页搜索按钮,添加到翻译页的登录校验

main
lizhong 2 years ago
parent 9fbf2bcb7d
commit d37541d1ad

@ -0,0 +1,16 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="CssUnknownProperty" enabled="true" level="WARNING" enabled_by_default="true">
<option name="myCustomPropertiesEnabled" value="true" />
<option name="myIgnoreVendorSpecificProperties" value="false" />
<option name="myCustomPropertiesList">
<value>
<list size="1">
<item index="0" class="java.lang.String" itemvalue="marginleft" />
</list>
</value>
</option>
</inspection_tool>
</profile>
</component>

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

@ -0,0 +1,152 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="AutoImportSettings">
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager">
<list default="true" id="dc5c5f4b-3a26-4616-b023-f4f048553ff8" name="Changes" comment="">
<change afterPath="$PROJECT_DIR$/middleware/auth.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/assets/style/public.scss" beforeDir="false" afterPath="$PROJECT_DIR$/assets/style/public.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/components/Header/Index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/components/Header/Index.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/composables/useUserInfo.ts" beforeDir="false" afterPath="$PROJECT_DIR$/composables/useUserInfo.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/layouts/tabLayout.vue" beforeDir="false" afterPath="$PROJECT_DIR$/layouts/tabLayout.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/nuxt.config.ts" beforeDir="false" afterPath="$PROJECT_DIR$/nuxt.config.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/pages/comment.vue" beforeDir="false" afterPath="$PROJECT_DIR$/pages/comment.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/pages/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/pages/index.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/pages/translate.vue" beforeDir="false" afterPath="$PROJECT_DIR$/pages/translate.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/pages/warning.vue" beforeDir="false" afterPath="$PROJECT_DIR$/pages/warning.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/utils/http.ts" beforeDir="false" afterPath="$PROJECT_DIR$/utils/http.ts" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="FileTemplateManagerImpl">
<option name="RECENT_TEMPLATES">
<list>
<option value="vue3" />
<option value="Vue Single File Component" />
<option value="TypeScript File" />
</list>
</option>
</component>
<component name="MarkdownSettingsMigration">
<option name="stateVersion" value="1" />
</component>
<component name="ProblemsViewState">
<option name="selectedTabId" value="CurrentFile" />
</component>
<component name="ProjectId" id="2MjTN74LI0n1OsXZwajBOlsAacO" />
<component name="ProjectViewState">
<option name="autoscrollToSource" value="true" />
<option name="compactDirectories" value="true" />
<option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" />
<option name="sortByType" value="true" />
</component>
<component name="PropertiesComponent">{
&quot;keyToString&quot;: {
&quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
&quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
&quot;WebServerToolWindowFactoryState&quot;: &quot;true&quot;,
&quot;WebServerToolWindowPanel.toolwindow.highlight.mappings&quot;: &quot;true&quot;,
&quot;WebServerToolWindowPanel.toolwindow.highlight.symlinks&quot;: &quot;true&quot;,
&quot;WebServerToolWindowPanel.toolwindow.show.date&quot;: &quot;false&quot;,
&quot;WebServerToolWindowPanel.toolwindow.show.permissions&quot;: &quot;false&quot;,
&quot;WebServerToolWindowPanel.toolwindow.show.size&quot;: &quot;false&quot;,
&quot;last_opened_file_path&quot;: &quot;/Users/lizhong/Desktop/workspace/ReptileFront/reptileFront_nuxt/assets/images&quot;,
&quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
&quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
&quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
&quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
&quot;nodejs_package_manager_path&quot;: &quot;yarn&quot;,
&quot;settings.editor.selected.configurable&quot;: &quot;reference.settings.ide.settings.file-colors&quot;,
&quot;ts.external.directory.path&quot;: &quot;/Applications/WebStorm.app/Contents/plugins/javascript-impl/jsLanguageServicesImpl/external&quot;,
&quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
}
}</component>
<component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/assets/images" />
<recent name="$PROJECT_DIR$/pages" />
<recent name="$PROJECT_DIR$/api" />
<recent name="$PROJECT_DIR$" />
<recent name="$PROJECT_DIR$/src/assets/images" />
</key>
<key name="MoveFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/pages" />
<recent name="$PROJECT_DIR$/pages/case" />
<recent name="$PROJECT_DIR$/composables" />
<recent name="$PROJECT_DIR$" />
<recent name="$PROJECT_DIR$/src/assets" />
</key>
</component>
<component name="RunManager" selected="npm.generate">
<configuration name="build" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
<package-json value="$PROJECT_DIR$/package.json" />
<command value="run" />
<scripts>
<script value="build" />
</scripts>
<node-interpreter value="project" />
<envs />
<method v="2" />
</configuration>
<configuration name="dev" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
<package-json value="$PROJECT_DIR$/package.json" />
<command value="run" />
<scripts>
<script value="dev" />
</scripts>
<node-interpreter value="project" />
<envs />
<method v="2" />
</configuration>
<configuration name="generate" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
<package-json value="$PROJECT_DIR$/package.json" />
<command value="run" />
<scripts>
<script value="generate" />
</scripts>
<node-interpreter value="project" />
<envs />
<method v="2" />
</configuration>
<recent_temporary>
<list>
<item itemvalue="npm.generate" />
<item itemvalue="npm.dev" />
<item itemvalue="npm.build" />
</list>
</recent_temporary>
</component>
<component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
<component name="TaskManager">
<task active="true" id="Default" summary="Default task">
<changelist id="dc5c5f4b-3a26-4616-b023-f4f048553ff8" name="Changes" comment="" />
<created>1678279948733</created>
<option name="number" value="Default" />
<option name="presentableId" value="Default" />
<updated>1678279948733</updated>
<workItem from="1678279949799" duration="13481000" />
<workItem from="1678294815425" duration="48333000" />
<workItem from="1678438152030" duration="8000" />
<workItem from="1678438167690" duration="42000" />
<workItem from="1678438231436" duration="25025000" />
<workItem from="1678713468939" duration="2210000" />
<workItem from="1678803633686" duration="12386000" />
<workItem from="1679292964552" duration="641000" />
<workItem from="1679313612567" duration="917000" />
<workItem from="1679622933773" duration="4483000" />
<workItem from="1679887069532" duration="713000" />
<workItem from="1679913811172" duration="1597000" />
<workItem from="1680008447811" duration="223000" />
<workItem from="1680009330616" duration="7707000" />
</task>
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
<option name="version" value="3" />
</component>
</project>

@ -5,6 +5,9 @@
margin: 0 auto;
max-width: 1940px;
}
body{
overflow-y: hidden;
}
// =================================
// ==============scrollbar==========

@ -4,30 +4,46 @@
<ApplicationAppLogo/>
<el-menu
:default-active="$route.meta.parentPath || $route.path"
class="el-menu-demo"
mode="horizontal"
:ellipsis="false"
router
>
<el-menu-item @click="handleChange(item)" v-for="item in routes" :index="item.path"
<el-menu-item @click="handleChange(item)" v-for="item in routes" :index="item.path"
:key="item.path">{{ item.name }}
</el-menu-item>
</el-menu>
<div class="login-action-wrap">
<div class="login-action-wrap flex items-center">
<el-popover popper-class="search-popper" v-if="activeRoute === '/'" placement="bottom-end" :width="434" trigger="click">
<template #reference>
<el-icon>
<el-icon-search />
</el-icon>
</template>
<div>
<el-input
v-model="keyword"
placeholder="请输入关键字"
:suffix-icon="ElIconSearch"
/>
</div>
</el-popover>
<el-divider v-if="activeRoute === '/'" direction="vertical" style="border-left: 1px solid #000"/>
<div class="login-btn cursor-pointer" v-if="!token" @click="setLoginVisible(true)"></div>
<el-dropdown popper-class="login-popper" @command="handleCommand" v-else trigger="click">
<div class="el-dropdown-link text-xl" style="line-height: 100px;">
{{ userInfo.mobile }}
<el-icon class="el-icon--right"><ElIconCaretBottom/></el-icon>
</div>
{{ userInfo.mobile }}
<el-icon class="el-icon--right">
<ElIconCaretBottom/>
</el-icon>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="0">OCR识别</el-dropdown-item>
<el-dropdown-item command="1">优化翻译</el-dropdown-item>
<el-dropdown-item command="2">翻译文本</el-dropdown-item>
<el-dropdown-item command="3">翻译文件</el-dropdown-item>
<el-dropdown-item command="4">退出登录</el-dropdown-item>
<el-dropdown-item command="4">OCR识别</el-dropdown-item>
<el-dropdown-item command="3">优化翻译</el-dropdown-item>
<el-dropdown-item command="1">翻译文本</el-dropdown-item>
<el-dropdown-item command="2">翻译文件</el-dropdown-item>
<el-dropdown-item command="5">退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
@ -50,9 +66,9 @@ const store = useAppStore()
const {setLoginVisible, setInfo, setToken} = useUserInfo()
const token = computed(() => useUserInfo().$state.token);
const userInfo = ref()
function handleCommand(command:string) {
if (command === '4') {
const keyword = ref('')
function handleCommand(command: string) {
if (command === '5') {
ElMessageBox.confirm(
'确定要退出登录吗?',
'提示',
@ -73,11 +89,18 @@ function handleCommand(command:string) {
message: '已取消退出登录',
})
})
}else {
router.push({
path: '/translate',
query:{
type: command
}
})
}
}
watchEffect(()=>{
watchEffect(() => {
console.log('useUserInfo().$state.info>>>>>>> header', useUserInfo().$state.info)
userInfo.value = useUserInfo().$state.info;
})
@ -90,9 +113,9 @@ function handleChange(val: any) {
store.setHomeBanner(false)
} else {
store.setMenuTheme('light')
if(val.meta.hasOwnProperty('homeBanner') && val.meta.homeBanner){
if (val.meta.hasOwnProperty('homeBanner') && val.meta.homeBanner) {
store.setHomeBanner(true)
}else{
} else {
store.setHomeBanner(false)
}
}
@ -105,9 +128,9 @@ watch(() => route, (val) => {
store.setHomeBanner(false)
} else {
store.setMenuTheme('light')
if(val.meta.hasOwnProperty('homeBanner') && val.meta.homeBanner){
if (val.meta.hasOwnProperty('homeBanner') && val.meta.homeBanner) {
store.setHomeBanner(true)
}else{
} else {
store.setHomeBanner(false)
}
}
@ -129,6 +152,7 @@ $prefix-cls: '#{$name-prefix}-header-wrap';
.el-menu-item {
border-bottom: unset;
padding: 0 17px;
//font-size: 20px;
transition: font-size .5s;
background-color: unset;
@ -189,9 +213,7 @@ $prefix-cls: '#{$name-prefix}-header-wrap';
font-weight: 400;
//@apply ;
}
.login-action-wrap {
padding-right: 30px;
}
.is-host {
* {
color: $white;
@ -199,12 +221,15 @@ $prefix-cls: '#{$name-prefix}-header-wrap';
}
</style>
<style lang="scss">
.login-popper {
.login-popper.el-dropdown__popper.el-popper {
border-radius: 8px;
box-shadow: 0 2px 11px 4px rgba(202, 202, 202, 0.5);
.el-dropdown-menu {
@apply shadow-2xl;
@apply shadow-2xl;
padding: 0 0;
}
.el-dropdown-menu__item {
width: 176px;
padding: 20px 0;
@ -212,7 +237,7 @@ $prefix-cls: '#{$name-prefix}-header-wrap';
line-height: 1;
//border-bottom: 1px solid #eee;
@apply text-base block relative;
&:after{
&:after {
content: '';
position: absolute;
height: 1px;
@ -221,9 +246,47 @@ $prefix-cls: '#{$name-prefix}-header-wrap';
right: 12px;
bottom: 0;
}
&:last-of-type:after {
height: 0;
}
}
.el-popper__arrow {
@apply hidden;
}
}
.search-popper.el-popper {
margin-top: 20px;
padding: 0;
background: unset;
border-radius: 30px;
height: 56px;
border: none;
.el-popper__arrow {
display: none;
}
.el-input {
height: 100%;
margin: 0;
border-radius: 30px;
font-size: 20px;
}
.el-input__wrapper {
padding: 0 30px;
height: 56px;
border-radius: 30px;
border: none;
box-shadow: unset;
.el-input__inner {
height: 56px;
box-shadow: unset;
line-height: 56px;
}
.el-icon {
color: #134A9B;
}
}
}
</style>

@ -5,12 +5,14 @@ export interface UserState {
token: string;
info: any;
loginVisible: boolean;
redirect: any
}
const useUserInfo = defineStore('user', {
state: (): UserState => ({
token: '',
info: {},
loginVisible: false,
redirect: {}
}),
actions: {
@ -20,21 +22,26 @@ const useUserInfo = defineStore('user', {
setInfo(info: any):void {
this.info = info;
},
setLoginVisible(val: boolean):void {
setLoginVisible(val: boolean, redirect?: {} | boolean):void {
this.loginVisible = val;
if (redirect) {
this.redirect = redirect;
}else {
this.redirect = false;
}
},
async login(data: any, redirect?: string){
async login(data: any){
const { commonApi } = useApi()
const res = await commonApi.login(data);
// this.setInfo(res.data)
// this.setToken(res.data.token)
// this.setLoginVisible(false)
this.token = res.data.userinfo.token;
this.loginVisible = false
this.info = res.data.userinfo
if(redirect) {
useRouter().push(redirect)
if(this.redirect) {
useRouter().push(this.redirect)
this.redirect = false;
}else {
location.reload()
}
return res;
}
@ -42,6 +49,7 @@ const useUserInfo = defineStore('user', {
},
getters:{
getLoginVisible:(state)=> state.loginVisible,
getToken:(state)=> state.token,
},
persist: process.client && {
storage: localStorage,

@ -1,8 +1,10 @@
<template>
<Header />
<BannerSearch v-if="store.getMenuTheme === 'dark'&&store.getHomeBanner == false" />
<BannerSimple :title="store.getBannerTitle" v-else-if="store.getMenuTheme === 'light'&&store.getHomeBanner == false" />
<BannerHomeBanner v-else></BannerHomeBanner>
<template v-if="!route.meta.hiddenBanner">
<BannerSearch v-if="store.getMenuTheme === 'dark'&&store.getHomeBanner == false" />
<BannerSimple :title="store.getBannerTitle" v-else-if="store.getMenuTheme === 'light'&&store.getHomeBanner == false" />
<BannerHomeBanner v-else></BannerHomeBanner>
</template>
<!-- <div :style="`transition:margin .2s;height: 500px;background-color: tan;margin-top: ${store.getMenuTheme === 'dark' ? '-100px': 0}`"></div>-->
<slot />
<Footer />
@ -13,7 +15,7 @@
<script setup>
const store = useAppStore()
const route = useRoute()
const loginStatus = ref(useUserInfo().getLoginVisible)
watchEffect(()=>{

@ -0,0 +1,16 @@
import {
defineNuxtRouteMiddleware,
navigateTo,
} from "#app";
// import useUserStore from "@/store/user.store";
export default defineNuxtRouteMiddleware((to, form) => {
const { getToken,setLoginVisible } = useUserInfo();
console.log(getToken, 'getToken')
if (!getToken) {
setLoginVisible(true)
}else {
setLoginVisible(false)
}
});

@ -11,7 +11,8 @@ export default defineNuxtConfig({
'@element-plus/nuxt',
],
plugins:[
{src: '~~/plugins/persits', mode: 'client'}
{src: '~~/plugins/persits', mode: 'client'},
// {src: '~~/plugins/router.js', mode: 'client'},
],
// routeRules: {
// "/": { static: true }, // ssr

@ -86,7 +86,7 @@
</div>
</template>
<script setup>
<script setup lang="ts">
import {randomUUID} from '~~/utils';
definePageMeta({
name: '通报评议',
@ -147,7 +147,7 @@ console.log('_tabs[0].children[0].id>>>', tabs.value[0].children[0].id);
function handleChange(data) {
current.value = data;
setBannerTitle(data.title);
setBannerTitle(data.name);
}
handleChange(tabs.value[0].children[0]);

@ -1,7 +1,7 @@
<template>
<div class="mai-ocr-wrap flex justify-center">
<div class="mai-ocr-item flex" @click="goTranslate">OCR</div>
<div class="mai-ocr-item flex"></div>
<div class="mai-ocr-item flex cursor-pointer" @click="goTranslate(4)">OCR</div>
<div class="mai-ocr-item flex cursor-pointer" @click="goTranslate(2)"></div>
</div>
<div :class="classList.news">
<CommonTitle title="热门资讯"/>
@ -141,6 +141,9 @@ definePageMeta({
homeBanner:true,
order: 1,
})
useHead({
title:'首页'
})
const hotInformLoading = ref(true)
const hotTbtLoading = ref(true)
const hotRuleLoading = ref(true)
@ -149,9 +152,7 @@ const {prefixCls: prefixNews} = useDesign('news-wrap');
const {prefixCls: prefixInform} = useDesign('inform-wrap');
const {prefixCls: prefixRule} = useDesign('rule-wrap');
const {prefixCls: prefixCase} = useDesign('case-wrap');
useHead({
title:'首页'
})
const {getToken, setLoginVisible} = useUserInfo()
const classList = reactive({
news: [`${prefixNews} mai-section`],
inform: [`${prefixInform} mai-section`],
@ -199,13 +200,23 @@ function changeCurrentData(data: InformationDto) {
newsHilight.value = Object.assign({}, data);
newsHilight.value.image = import.meta.env.VITE_GLOB_ORIGIN + newsHilight.value.image
}
function goTranslate(){
// router.push({
// path:'/translate',
// query:{
// a:1
// }
// })
function goTranslate(type: number){
if (!getToken) {
setLoginVisible(true, {
path:'/translate',
query: {
type: type
}
})
}else {
setLoginVisible(false, false)
router.push({
path:'/translate',
query: {
type: type
}
})
}
}
getData()

@ -1,13 +1,14 @@
<template>
<div class="wrap">
<el-radio-group fill="#022950" v-model="radio1">
<el-radio-group fill="#022950" v-model="radio1" @change="changeTranslate">
<el-radio-button :label="1" size="large" @click="reset" border>翻译文本</el-radio-button>
<el-radio-button :label="2" size="large" @click="reset" border>翻译文件</el-radio-button>
<el-radio-button :label="3" size="large" @click="reset" border>优化翻译</el-radio-button>
<el-radio-button :label="4" size="large" @click="reset" border>OCR识别</el-radio-button>
</el-radio-group>
<div class="change-wrap" >
<el-select v-model="value" class="m-2" popper-class="popper" @click="selectClick1" placeholder="请选择语言" size="large">
<div class="change-wrap">
<el-select v-model="value" class="m-2" popper-class="popper" @click="selectClick1"
placeholder="请选择语言" size="large">
<el-option
v-for="item in options"
:key="item.value"
@ -15,35 +16,38 @@
:value="item.value"/>
</el-select>
<img src="../assets/images/zhuanhuan.png" alt="">
<el-select v-model="value2" class="m-2" popper-class="popper" @click="selectClick2" placeholder="请选择语言" size="large">
<el-select v-model="value2" class="m-2" popper-class="popper" @click="selectClick2"
placeholder="请选择语言" size="large">
<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
<el-button v-if="radio1==1||radio1==3" @click="translate"></el-button>
<el-button v-if="radio1==4||radio1==2" @click="translate2"></el-button>
<div class="select_wrap" v-if="xiala" ref="tanchuang1">
<el-button v-if="radio1==1||radio1==3" @click="translate"></el-button>
<el-button v-if="radio1==4||radio1==2" @click="translate2"></el-button>
<div class="select_wrap" v-if="currentLangModalStatus" ref="tanchuang1">
<el-input placeholder="搜索语言"></el-input>
<div class="hr"></div>
<div class="language_wrap">
<el-scrollbar class="scrollbar">
<div class="language_box" v-for="(value,key,index) in language" :key="index">
<div class="firstWord">{{key}}</div>
<span class="language" v-for="(item2,index) in value" @click="selectLanguage(item2)" :key="index">{{item2.name}}</span>
<div class="firstWord">{{ key }}</div>
<span class="language" v-for="(item2,index) in value" @click="selectLanguage(item2)"
:key="index">{{ item2.name }}</span>
</div>
</el-scrollbar>
</div>
</div>
<div class="select_wrap" v-if="xiala2" ref="tanchuang2">
<div class="select_wrap" v-if="targetLangModalStatus" ref="tanchuang2">
<el-input placeholder="搜索语言"></el-input>
<div class="hr"></div>
<div class="language_wrap">
<el-scrollbar class="scrollbar">
<div class="language_box" v-for="(value,key,index) in language" :key="index">
<div class="firstWord">{{key}}</div>
<span class="language" v-for="(item2,index) in value" @click="selectLanguage2(item2)" :key="index">{{item2.name}}</span>
<div class="firstWord">{{ key }}</div>
<span class="language" v-for="(item2,index) in value" @click="selectLanguage2(item2)"
:key="index">{{ item2.name }}</span>
</div>
</el-scrollbar>
</div>
@ -51,45 +55,46 @@
</div>
<div class="import-wrap">
<div class="importBox1">
<span class="importTitle" v-if="radio1==1||radio1==3">{{value||''}}</span>
<span class="importTitle" v-if="radio1==1||radio1==3">{{ value || '' }}</span>
<span class="importTitle" v-if="radio1==2||radio1==4"></span>
<el-input
v-if="radio1==1||radio1==3"
v-if="radio1==1||radio1==3"
v-model="textarea"
:rows="2"
type="textarea"
placeholder="输入翻译"/>
<el-upload
<el-upload
v-if="radio1==2||radio1==4"
ref="upload"
class="upload-demo"
drag
limit="1"
:before-upload="brforeUpload"
:on-change="uploadChange"
:on-success="uploadSuccess"
:on-error="uploadError"
action="/api/common/upload">
<img style="width:64px;height:64px;marginLeft:45px" src="../assets/images/fileIcon.png" alt="">
<div class="el-upload__text">
点击文件上传
class="upload-demo"
drag
limit="1"
:before-upload="beforeUpload"
:on-change="uploadChange"
:on-success="uploadSuccess"
:on-error="uploadError"
action="/api/common/upload">
<img style="width:64px;height:64px;marginLeft:45px" src="../assets/images/fileIcon.png"
alt="">
<div class="el-upload__text">
点击文件上传
</div>
<div class="el-upload__text2">
支持扩展名XMLTXTDOCDOCXPDF或JPG格式
</div>
<!-- <template #tip>
<div class="el-upload__tip">
jpg/png files with a size less than 500kb
</div>
<div class="el-upload__text2">
支持扩展名XMLTXTDOCDOCXPDF或JPG格式
</div>
<!-- <template #tip>
<div class="el-upload__tip">
jpg/png files with a size less than 500kb
</div>
</template> -->
</el-upload>
</template> -->
</el-upload>
</div>
<!-- <div class="importBox3" v-if="radio1==2||radio1==3">
<el-button class="button1">英语</el-button>
<el-button class="button2" @click="translate2"></el-button>
</div> -->
<div class="importBox2">
<span class="importTitle">{{value2||'英语(美式)'}}</span>
<span class="importTitle">{{ value2 || '英语(美式)' }}</span>
<el-input
v-model="textarea2"
:rows="2"
@ -105,7 +110,8 @@
<el-row>
<el-col :span="9">
<el-form-item label="选择日期">
<el-date-picker type="daterange" v-model="searchData.selecttime" placeholder="请选择日期"/>
<el-date-picker type="daterange" v-model="searchData.selecttime"
placeholder="请选择日期"/>
</el-form-item>
</el-col>
<el-col :span="9">
@ -120,7 +126,7 @@
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-table v-loading="loading" size="large" border :data="content" :empty-text="'暂无数据'"
:header-cell-style="{background: '#f5f5f5', color:'#333333'}">
@ -153,36 +159,45 @@
</template>
<script lang="ts" setup>
import dayjs from "dayjs";
import { onClickOutside } from "@vueuse/core"
import { genFileId } from 'element-plus'
import {onClickOutside} from "@vueuse/core"
definePageMeta({
name: '翻译',
hidden: true,
hiddenBanner: true,
middleware: ['auth']
})
const {prefixCls} = useDesign('mai-wrap');
const router = useRouter()
const route = useRoute()
const {translateApi} = useApi()
const textarea = ref('')
const textarea2 = ref('')
const xiala = ref(false)
const xiala2 = ref(false)
const currentLangModalStatus = ref(false)
const targetLangModalStatus = ref(false)
// const textarea2 = ref('')
const radio1 = ref(1)
const radio1 = ref(route.query?.type ?? 1)
const {setTotal, current, total, setCurrentPage, limit, pagesRef} = usePagination(1, 6, 0)
const currentTab = ref({});
let language = reactive({})
const options = reactive([
{value:'zh',lable:'中文(简体)'},
{value:"en",lable:'英文'},
{value: 'zh', lable: '中文(简体)'},
{value: "en", lable: '英文'},
])
const options2 = reactive([
{value:'zh',lable:'中文(简体)'},
{value:"en",lable:'英文'},
{value: 'zh', lable: '中文(简体)'},
{value: "en", lable: '英文'},
])
const value2 = ref('')
const value = ref('')
const abbreviation1 = ref('')
const abbreviation2 = ref('en')
const searchData = ref({
selecttime:'',
name:''
selecttime: '',
name: ''
})
const loading = ref(true);
const content = ref([]);
@ -192,57 +207,50 @@ const upload = ref()
const fileUrl = ref('')
definePageMeta({
name: '翻译',
hidden:true,
// headerHost: false,
// homeBanner:true,
// order: 1,
watchEffect(()=>{
radio1.value = route.query?.type ?? 1;
})
// const props = defineProps(['title']);
const {prefixCls} = useDesign('mai-wrap');
// watch(radio1, ()=>{
// value.value = ''
// value2.value = ''
// abbreviation1.value = ''
// abbreviation2.value = ''
// textarea.value = ''
// textarea2.value = ''
// })
function brforeUpload(file:any){
function changeTranslate(val: any){
router.replace({
path:route.path,
query: {
type: val
}
})
}
function beforeUpload(file: any) {
console.log(file)
}
function uploadChange(){
function uploadChange() {
}
function uploadSuccess(response:any){
function uploadSuccess(response: any) {
ElMessage.success(response.msg)
console.log(typeof response.data.url)
fileUrl.value = response.data.url
}
function uploadError(response:any){
function uploadError(response: any) {
ElMessage.error(response.msg)
}
// function handleExceed(files:any){
// upload.value!.clearFiles()
// const file = files[0]
// file.uid = genFileId()
// upload.value!.handleStart(file)
// }
function resetData(flag: boolean = true) {
searchData.value = {
selecttime:'',
name:''
selecttime: '',
name: ''
}
flag && getList(currentTab.value)
}
function goYouHua(){
function goYouHua() {
radio1.value = 3
}
function reset(){
function reset() {
value.value = ''
value2.value = ''
abbreviation1.value = ''
@ -250,6 +258,7 @@ function reset(){
textarea.value = ''
textarea2.value = ''
}
function onChangePage(val: number) {
setCurrentPage(val)
getList(currentTab.value)
@ -257,49 +266,64 @@ function onChangePage(val: number) {
function selectClick1() {
// debugger
xiala.value = !xiala.value
currentLangModalStatus.value = !currentLangModalStatus.value
}
function selectClick2() {
xiala2.value = !xiala2.value
targetLangModalStatus.value = !targetLangModalStatus.value
}
function selectLanguage(item:any) {
function selectLanguage(item: any) {
console.log(item)
if(xiala.value){
if (currentLangModalStatus.value) {
value.value = item.name
abbreviation1.value = item.abbreviation
xiala.value = false
currentLangModalStatus.value = false
}
}
function selectLanguage2(item:any) {
function selectLanguage2(item: any) {
console.log(item)
if(xiala2.value){
if (targetLangModalStatus.value) {
value2.value = item.name
abbreviation2.value = item.abbreviation
xiala2.value = false
targetLangModalStatus.value = false
}
}
async function translate() {
if(radio1.value==1){
const {data:data} = await translateApi.translateText({content:textarea.value,source:abbreviation1.value,target:abbreviation2.value})
if (radio1.value == 1) {
const {data: data} = await translateApi.translateText({
content: textarea.value,
source: abbreviation1.value,
target: abbreviation2.value
})
textarea2.value = data
}
if(radio1.value==3){
const {data:data} = await translateApi.translateOptimizeText({content:textarea.value,source:abbreviation1.value,target:abbreviation2.value})
if (radio1.value == 3) {
const {data: data} = await translateApi.translateOptimizeText({
content: textarea.value,
source: abbreviation1.value,
target: abbreviation2.value
})
textarea2.value = data
}
// console.log(data)
}
async function translate2() {
const {data:data} = await translateApi.translateFile({file:fileUrl.value,source:abbreviation1.value,target:abbreviation2.value})
const {data: data} = await translateApi.translateFile({
file: fileUrl.value,
source: abbreviation1.value,
target: abbreviation2.value
})
// console.log(data)
// textarea2.value = data
}
async function allLanguage() {
const {data:data} = await translateApi.getAllLanguage({})
const {data: data} = await translateApi.getAllLanguage({})
language = data
}
@ -308,9 +332,9 @@ async function getList(data: any) {
loading.value = true;
const searchParams = {
...searchData.value,
start_date:'',
start_date: '',
end_date: '',
type:0
type: 0
}
if (searchData.value.selecttime) {
searchParams.start_date = dayjs(searchData.value.selecttime[1]).format('YYYY-DD-MM hh:mm:ss')
@ -318,7 +342,7 @@ async function getList(data: any) {
// @ts-ignore
delete searchParams.selecttime;
}
searchParams.type = radio1.value
searchParams.type = radio1.value as number
const {data: listDatas} = await translateApi.getTranslateList({
...searchParams,
page: current.value,
@ -331,73 +355,82 @@ async function getList(data: any) {
}
}
onClickOutside(tanchuang1, ()=>{
xiala.value = false
onClickOutside(tanchuang1, () => {
currentLangModalStatus.value = false
})
onClickOutside(tanchuang2, ()=>{
xiala2.value = false
})
getList(currentTab.value)
allLanguage()
})
onClickOutside(tanchuang2, () => {
targetLangModalStatus.value = false
})
getList(currentTab.value)
allLanguage()
</script>
<style lang="scss">
.popper{
.popper {
display: none !important;
}
</style>
<style lang="scss" scoped>
.wrap{
padding: 0 244px;
* {
--el-color-primary: #022950
}
.wrap {
padding: 0 244px 50px 244px;
background-color: #EEF1F9;
padding-bottom: 50px;
}
.el-radio-group{
.el-radio-group {
margin-top: 42px;
margin-bottom: 76px;
}
.el-radio-button{
.el-radio-button {
border-radius: 16px;
margin-right:12px ;
margin-right: 12px;
border: 0px;
outline: none;
width: 218px;
height: 61px;
}
::v-deep .el-radio-button__inner{
width: 218px;
height: 61px;
border: 0px;
outline: none;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
border-radius: 16px !important;
}
::v-deep .el-input__wrapper{
width: 218px;
height: 61px;
background: #FFFFFF;
border-radius: 16px;
border-color:#ffffff ;
:deep(.el-radio-button__inner) {
width: 218px;
height: 61px;
border: 0px;
outline: none;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-weight: 400;
color: #333333;
border-radius: 16px !important;
}
::v-deep .el-input__inner{
text-align: center;
:deep(.el-input__wrapper) {
width: 218px;
height: 61px;
background: #FFFFFF;
border-radius: 16px;
border-color: #ffffff;
}
.change-wrap{
:deep(.el-input__inner) {
//text-align: center;
}
.change-wrap {
display: flex;
align-items: center;
margin-bottom: 24px;
position: relative;
::v-deep .el-input__wrapper{
:deep(.el-input__wrapper) {
font-size: 20px !important;
}
.el-button{
.el-button {
width: 218px;
height: 61px;
background: #022950;
@ -406,13 +439,15 @@ async function getList(data: any) {
font-size: 20px;
margin-left: 24px;
}
img{
img {
width: 55px;
height: 44px;
margin: 0 28px 0 34px;
}
}
::v-deep .el-textarea__inner{
:deep(.el-textarea__inner) {
width: 100%;
height: 239px;
border-radius: 16px;
@ -420,63 +455,73 @@ async function getList(data: any) {
padding-top: 17px;
padding-left: 37px;
}
.el-textarea{
.el-textarea {
border-radius: 16px;
margin-top: 17px;
font-size: 36px;
}
.import-wrap{
.import-wrap {
display: flex;
justify-content: center;
// align-items: center;
.importBox1{
.importBox1 {
flex: 1;
margin-right: 32px;
}
.importBox3{
.importBox3 {
flex: 0.25;
margin-right: 22px;
.el-button{
.el-button {
width: 150px;
height: 55px;
margin: 0;
border-radius: 8px;
font-size: 20px;
}
.button1{
.button1 {
margin-bottom: 24px;
color: #BABABA;
background-color: #fff;
}
.button2{
.button2 {
color: #fff;
background-color: #022950;
}
}
.importBox2{
.importBox2 {
flex: 1;
}
}
.importTitle{
.importTitle {
width: 120px;
height: 28px;
font-size: 20px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 28px;
margin-left: 10px;
}
.el-select{
height: 28px;
font-size: 20px;
font-weight: 400;
color: #333333;
line-height: 28px;
margin-left: 10px;
}
.el-select {
margin: 0;
}
.jilu-wrap{
.jilu-wrap {
display: flex;
justify-content: space-between;
font-size: 20px;
margin-top: 30px;
.jilu{
.jilu {
display: flex;
justify-content: center;
align-items: center;
@ -485,47 +530,56 @@ margin-left: 10px;
background: #E8EBF5;
border-radius: 16px;
color: #333333;
img{
img {
width: 20px;
height: 20px;
margin-right: 12px;
}
}
.first{
.first {
color: #E60B0B;
cursor: pointer;
}
}
.yangliu-mai-wrap-content{
.yangliu-mai-wrap-content {
margin: 30px 0 0 0;
width: 100%;
}
// .dynamicInfo {
// margin-top: 0;
// padding-bottom: 100px;
// }
::v-deep .el-table__inner-wrapper{
:deep(.el-table__inner-wrapper) {
font-size: 20px;
}
::v-deep .el-table__header-wrapper{
}
:deep(.el-table__header-wrapper) {
height: 80px;
}
::v-deep .el-table__header{
:deep(.el-table__header) {
height: 80px;
}
::v-deep .el-table__empty-block{
:deep(.el-table__empty-block) {
height: 300px !important;
}
:deep(.el-form) {
margin-bottom: 43px;
.el-form-item__label {
height: 60px;
line-height: 60px !important;
padding-right: 16px;
@apply text-xl;
}
.el-input__wrapper {
border-radius: 10px;
height: 60px;
@ -534,106 +588,120 @@ margin-left: 10px;
background-color: #ffffff;
@apply text-xl;
}
.el-icon {
font-size: 20px;
}
.el-range-input {
font-size: 20px;
}
.el-button {
width: 150px;
height: 60px;
box-shadow: unset;
@apply text-xl rounded-xl;
&--primary{
&--primary {
background-color: #022950;
}
}
}
::v-deep .el-upload{
:deep(.el-upload) {
margin-top: 17px;
border-radius: 16px;
border-radius: 16px;
}
::v-deep .el-upload-dragger{
:deep(.el-upload-dragger) {
height: 239px;
border-radius: 16px;
border-radius: 16px;
}
::v-deep .el-upload{
:deep(.el-upload) {
height: 239px;
border-radius: 16px;
}
.el-upload__text{
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
line-height: 22px;
margin-bottom: 49px;
display: flex;
justify-content: center;
align-items: center;
}
.el-upload__text2{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 20px;
display: flex;
justify-content: center;
align-items: center;
}
::v-deep .el-table__cell {
padding: 26px 0 !important;
}
.select_wrap{
border-radius: 16px;
}
.el-upload__text {
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
line-height: 22px;
margin-bottom: 49px;
display: flex;
justify-content: center;
align-items: center;
}
.el-upload__text2 {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 20px;
display: flex;
justify-content: center;
align-items: center;
}
:deep(.el-table__cell) {
padding: 26px 0 !important;
}
.select_wrap {
width: 100%;
// width: 1436px;
padding-left: 32px;
padding-right: 40px;
height: 774px;
background: #FFFFFF;
box-shadow: 0px 0px 22px 7px rgba(224,224,224,0.5);
box-shadow: 0px 0px 22px 7px rgba(224, 224, 224, 0.5);
border-radius: 16px;
position: absolute;
top: 65px;
left: 0;
z-index: 100;
::v-deep .el-input__inner {
:deep(.el-input__inner) {
text-align: left;
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #CACACA;
}
.hr{
.hr {
width: 100%;
height: 1px;
background: #D8D8D8;
}
.scrollbar{
::v-deep .el-scrollbar__bar{
.scrollbar {
:deep(.el-scrollbar__bar) {
width: 13px !important;
border-radius: 6.5px !important;
}
}
.language_wrap{
.language_wrap {
height: 698px;
overflow-y: auto;
padding-bottom: 64px;
.language_box{
.language_box {
padding: 0 5px;
.firstWord{
.firstWord {
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
margin-top: 24px;
}
.language{
.language {
font-size: 20px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
margin-top: 20px;
@ -644,10 +712,11 @@ align-items: center;
}
}
}
::v-deep .el-input__wrapper {
:deep(.el-input__wrapper) {
border: none !important;
box-shadow: none !important;
// padding: 0px; //
}
</style>
</style>

@ -35,6 +35,7 @@
:pages="pagesRef"
@change="onChangePage"
/>
<!-- OnCl-->
</div>
</div>
</template>
@ -43,7 +44,7 @@
import dayjs from "dayjs";
import {randomUUID} from '~~/utils';
import {onClickOutside} from "@vueuse/core";
definePageMeta({
name: '预警信息',
headerHost: true,
@ -53,6 +54,9 @@ useHead({
title:'预警信息'
})
onClickOutside(ref, ()=>{
})
const { warningApi } = useApi()
const {prefixCls} = useDesign('mai-wrap');
const {setTotal, current, total, setCurrentPage, limit, pagesRef} = usePagination(1, 4, 0)

@ -27,6 +27,7 @@ function transform(error: any) {
}
}
console.log($fetch)
/**
* api
* @param { String } url

Loading…
Cancel
Save