wwl
/
daikins
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

main
王文龙 2024-01-29 18:02:58 +08:00
parent 14fec77952
commit 4a4ac0c29f
37 changed files with 6944 additions and 4820 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components.d.ts vendored
View File

@ -37,6 +37,7 @@ declare module 'vue' {
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRow: typeof import('element-plus/es')['ElRow']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
@ -50,4 +51,7 @@ declare module 'vue' {
RouterView: typeof import('vue-router')['RouterView']
Search: typeof import('./src/components/search.vue')['default']
}
export interface ComponentCustomProperties {
vLoading: typeof import('element-plus/es')['ElLoadingDirective']
}
}

1
package.json
View File

@ -30,6 +30,7 @@
"pinia": "^2.0.32",
"swiper": "^9.3.2",
"tinymce": "^6.6.0",
"v-scale-screen": "^2.2.0",
"vue": "^3.2.47",
"vue-demi": "^0.14.5",
"vue-echarts": "^6.5.4",

167
src/App.vue
View File

@ -1,82 +1,127 @@
<script setup lang="ts">
import { RouterView } from "vue-router";
import { useFullscreen, useFavicon, useTitle } from "@vueuse/core";
import { RouterView } from 'vue-router'
import { useFullscreen, useFavicon, useTitle } from '@vueuse/core'
import zhCn from 'element-plus/dist/locale/zh-cn'
import FitScreen from "@fit-screen/vue";
import { NMessageProvider } from "naive-ui";
import { useUserStore } from "@/stores/modules/user";
import FitScreen from '@fit-screen/vue'
import { NMessageProvider } from 'naive-ui'
import { useUserStore } from '@/stores/modules/user'
import { NConfigProvider } from 'naive-ui'
import { zhCN as NZhCN, dateZhCN } from 'naive-ui'
import VScaleScreen from 'v-scale-screen'
import img from '@/assets/images/bg.jpg'
// 全屏
const fitscreenRef = ref<HTMLElement | null>(null);
const { toggle } = useFullscreen(fitscreenRef);
const fitscreenRef = ref<HTMLElement | null>(null)
const { toggle } = useFullscreen(fitscreenRef)
// console.log(RouterView)
provide("fullscreen", { toggle });
// const screenWidth = window.screen.width;
// const screenHeight = window.screen.height;
provide('fullscreen', { toggle })
// const screenWidth = window.screen.width
// const screenHeight = window.screen.height
// console.log('🚀 ~ screenWidth:', screenWidth)
// console.log('🚀 ~ screenHeight:', screenHeight)
const screenWidth = 1920
const screenHeight =1080
const store = useUserStore();
store.getUser();
console.log(screenWidth,screenHeight)
const route = useRoute(); // 获取当前的路由信息
const screenHeight = 1080
const store = useUserStore()
store.getUser()
// console.log(screenWidth, screenHeight)
const route = useRoute() // 获取当前的路由信息
const pageClass = computed(() => {
// console.log(route.name)
// if (navigator.userAgent.match(/iPad|Android Tablet/i)) {
// // 这是一个平板设备
// console.log("平板",navigator.userAgent)
// } else {
// // 这不是一个平板设备
// console.log("电脑")
// }
// 根据路由信息返回不同的页面类名
if (route.name === "Entry") {
return "bg-#fff"; // 假设关于页的类名为 page-about
}
else if(route.name==='DataBase'){
return 'bg-#fff'
}
else if (route.name === "ExternalLogin"||route.name === "Login") {
return "bg-#f3f3f3"; // 假设关于页的类名为 page-about
}
return "page"; // 默认类名
});
// console.log(route.name)
// if (navigator.userAgent.match(/iPad|Android Tablet/i)) {
// // 这是一个平板设备
// console.log("平板",navigator.userAgent)
// } else {
// // 这不是一个平板设备
// console.log("电脑")
// }
// 根据路由信息返回不同的页面类名
if (route.name === 'Entry') {
return 'bg-#fff' // 假设关于页的类名为 page-about
} else if (route.name === 'DataBase') {
return 'bg-#fff'
} else if (route.name === 'ExternalLogin' || route.name === 'Login') {
return 'bg-#f3f3f3' // 假设关于页的类名为 page-about
}
return 'page' // 默认类名
})
const pageStyle = computed(() => {
// 根据路由信息返回不同的页面样式
if (route.name === 'Entry') {
return { 'background-color': '#fff !important' } // 假设关于页的类名为 page-about
} else if (route.name === 'DataBase') {
return { 'background-color': '#fff !important' }
} else if (route.name === 'ExternalLogin' || route.name === 'Login') {
return { 'background-color': '#f3f3f3 !important' } // 假设关于页的类名为 page-about
}
return {
'background-image': `url(${img}) !important`,
'background-position': '0 0',
'background-repeat': 'no-repeat',
'background-size': 'cover'
} // 默认类名
})
const locale = computed(() => zhCn)
const scaleChange = ({
widthRatio,
heightRatio
}: {
widthRatio: number
heightRatio: number
}) => {
console.log('scaleChange', widthRatio, heightRatio)
}
const beforeCalculate = (scale) => {
console.log('🚀 ~ scale:', scale)
return false
}
// ref="fitscreenRef"
// :width="screenWidth"
// :height="screenHeight"
// mode="fit"
// :class="pageClass"
// executeMode="debounce"
// waitTime="300"
// @scaleChange="scaleChange"
// :beforeCalculate="beforeCalculate"
</script>
<template>
<NMessageProvider>
<FitScreen
ref="fitscreenRef"
:width="screenWidth"
:height="screenHeight"
mode="fit"
:class="pageClass"
>
<n-config-provider :locale="NZhCN" :date-locale="dateZhCN">
<el-config-provider :locale="locale">
<RouterView />
</el-config-provider>
</n-config-provider>
</FitScreen>
</NMessageProvider>
<NMessageProvider>
<VScaleScreen
ref="fitscreenRef"
:width="screenWidth"
:height="screenHeight"
mode="fit"
:box-style="pageStyle"
>
<!-- <div :class="pageClass"> -->
<n-config-provider :locale="NZhCN" :date-locale="dateZhCN">
<el-config-provider :locale="locale">
<RouterView />
</el-config-provider>
</n-config-provider>
<!-- </div> -->
</VScaleScreen>
</NMessageProvider>
</template>
<style scoped lang="less">
.page {
background-image: url('@/assets/images/bg.jpg');
background-position: 0 0;
background-repeat: no-repeat;
background-size: cover;
.fit-screen {
text-rendering: optimizeLegibility !important;
}
.pages{
background-color: #fff;
.page,
.v-screen-box {
// background-image: url('@/assets/images/bg.jpg') !important;
// background-position: 0 0;
// background-repeat: no-repeat;
// background-size: cover;
}
.pagess{
background-color: #f3f3f3;
.pages {
background-color: #fff;
}
.pagess {
background-color: #f3f3f3;
}
</style>

27
src/api/daikin/base.ts
View File

@ -1235,6 +1235,33 @@ export async function externalTimeStat(data: any) {
return http.post(`/moduleStat/externalTimeStat`, data)
}
/**
* 网站外部足迹 https://console-docs.apipost.cn/preview/9ac14c51f96ce4d8/75274687248efb1c?target_id=32575a43-0b66-4e39-a681-68ef295b2b37
*/
export async function userDetailExport(data: any) {
return http.post(`/moduleStat/userDetailExport`, data, {
responseType: 'blob'
})
}
/**
* 图表2-科室表格数据 https://console-docs.apipost.cn/preview/9ac14c51f96ce4d8/75274687248efb1c?target_id=32575a43-0b66-4e39-a681-68ef295b2b37
*/
export async function getDepartData(params: any) {
return http.get(`/moduleStat/getDepartData`, { params })
}
/**
* 图表1-饼状图统计数据 https://console-docs.apipost.cn/preview/9ac14c51f96ce4d8/75274687248efb1c?target_id=32575a43-0b66-4e39-a681-68ef295b2b37
*/
export async function getPieChartData(params: any) {
return http.get(`/moduleStat/getPieChartData`, { params })
}
/**
* 图表3-各科室柱状折线图 https://console-docs.apipost.cn/preview/9ac14c51f96ce4d8/75274687248efb1c?target_id=32575a43-0b66-4e39-a681-68ef295b2b37
*/
export async function getDepartChart(params: any) {
return http.get(`/moduleStat/getDepartChart`, { params })
}
/**
* csr供应商月份列表 https://console-docs.apipost.cn/preview/9ac14c51f96ce4d8/75274687248efb1c?target_id=5e2e22e5-fab5-4c46-8a93-8f0c3a3675cb
*/

BIN
src/assets/images/NEW.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/images/NEW2.gif Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/assets/images/dianhhh@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/images/fzqiet.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 501 KiB

BIN
src/assets/images/fzqiet2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 189 KiB

BIN
src/assets/images/wjqq@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

7
src/components/AppHeadUserInfo.vue
View File

@ -14,7 +14,6 @@ const userCode = ref(false)
async function getNoticeList() {
const { data } = await getAllNoticeList()
noticeData.value = data
console.log('🚀 ~ file: AppHeadUserInfo.vue:18 ~ data:', data)
}
onMounted(() => {
getNoticeList()
@ -22,9 +21,11 @@ onMounted(() => {
// console.log( flgs.value,flg)
})
watchEffect(() => {
// console.log( flgs.value,store.user.type)
// console.log( flgs.value,store.user.type, 'tech_service')
flgs.value = [1, 2, 3, 4].includes(store.user.type)
userCode.value = ['admin', 'tech_service'].includes(store.user.roleCode)
userCode.value = ['admin', 'tech_service', 'footprint_dandang'].includes(
store.user.roleCode
)
})
const options = [
{ label: '个人中心', key: 'ucenter' },

14
src/router/index.ts
View File

@ -1,11 +1,11 @@
import { createRouter, createWebHistory } from "vue-router";
import { createRouter, createWebHistory } from 'vue-router'
const NewsDetail = {
path: "/intelligence/:id",
meta: { title: "情报详情" },
name: "IntelligenceDetail",
component: () => import("@/views/home/intelligence/Detail.vue"),
};
path: '/intelligence/:id',
meta: { title: '情报详情' },
name: 'IntelligenceDetail',
component: () => import('@/views/home/intelligence/Detail.vue')
}
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
@ -548,4 +548,4 @@ const router = createRouter({
}
]
})
export default router;
export default router

272
src/utils/http.ts
View File

@ -1,26 +1,26 @@
import axios from 'axios'
// import type { AxiosRequestConfig } from 'axios';
import { token } from "@/stores/modules/user";
import { message } from "./message";
import router from '@/router';
import { token } from '@/stores/modules/user'
import { message } from './message'
import router from '@/router'
export const TOKEN_KEY = 'token'
declare module 'axios' {
export interface AxiosRequestConfig {
showLoading?: boolean
// [自定义属性声明]
}
export interface AxiosRequestConfig {
showLoading?: boolean
// [自定义属性声明]
}
}
// const { createMessage, createWarningModal } = useMessage()
// 创建axios实例
const service = axios.create({
// 服务接口请求
baseURL: "/test-api",
// 超时设置
timeout: 15000,
headers: { 'Content-Type': 'application/json;charset=utf-8;' },
showLoading: false
// 服务接口请求
baseURL: '/test-api',
// 超时设置
timeout: 15000,
headers: { 'Content-Type': 'application/json;charset=utf-8;' },
showLoading: false
})
// let loading: any;
@ -31,145 +31,143 @@ const service = axios.create({
let requestCount: number = 0
//显示loading
const showLoading = () => {
if (requestCount === 0) {
//加载中显示样式可以自行修改
// loading = ElLoading.service({
// text: "拼命加载中，请稍后...",
// background: 'rgba(0, 0, 0, 0.7)',
// spinner: 'el-icon-loading',
// })
message.loading('请求中...')
}
requestCount++
if (requestCount === 0) {
//加载中显示样式可以自行修改
// loading = ElLoading.service({
// text: "拼命加载中，请稍后...",
// background: 'rgba(0, 0, 0, 0.7)',
// spinner: 'el-icon-loading',
// })
message.loading('请求中...')
}
requestCount++
}
//隐藏loading
const hideLoading = () => {
requestCount--
if (requestCount == 0) {
// loading.close()
message.destroyAll()
}
requestCount--
if (requestCount == 0) {
// loading.close()
message.destroyAll()
}
}
// 请求拦截
service.interceptors.request.use(
(config) => {
// config.showLoading
if (config.showLoading) {
showLoading()
}
if (token) config.headers[TOKEN_KEY] = unref(token);
// if (getToken()) {
// // 是否需要设置 token放在请求头
// config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
// }
(config) => {
// config.showLoading
if (config.showLoading) {
showLoading()
}
if (token) config.headers[TOKEN_KEY] = unref(token)
// if (getToken()) {
// // 是否需要设置 token放在请求头
// config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
// }
// get请求映射params参数
if (config.method === 'get' && config.params) {
let url = config.url + '?'
for (const propName of Object.keys(config.params)) {
const value = config.params[propName]
const part = encodeURIComponent(propName) + '='
if (value !== null && typeof value !== 'undefined') {
// 对象处理
if (typeof value === 'object') {
for (const key of Object.keys(value)) {
const params = propName + '[' + key + ']'
const subPart = encodeURIComponent(params) + '='
url += subPart + encodeURIComponent(value[key]) + '&'
}
} else {
url += part + encodeURIComponent(value) + '&'
}
}
}
url = url.slice(0, -1)
config.params = {}
config.url = url
}
return config
},
(error) => {
// console.log(error)
Promise.reject(error)
}
// get请求映射params参数
if (config.method === 'get' && config.params) {
let url = config.url + '?'
for (const propName of Object.keys(config.params)) {
const value = config.params[propName]
const part = encodeURIComponent(propName) + '='
if (value !== null && typeof value !== 'undefined') {
// 对象处理
if (typeof value === 'object') {
for (const key of Object.keys(value)) {
const params = propName + '[' + key + ']'
const subPart = encodeURIComponent(params) + '='
url += subPart + encodeURIComponent(value[key]) + '&'
}
} else {
url += part + encodeURIComponent(value) + '&'
}
}
}
url = url.slice(0, -1)
config.params = {}
config.url = url
}
return config
},
(error) => {
// console.log(error)
Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
async (response: any) => {
// console.log('响应拦截器res', response)
// if (res.config.showLoading) {
// showLoading()
// }
hideLoading()
// 未设置状态码则默认成功状态
async (response: any) => {
// console.log('响应拦截器res', response)
// if (res.config.showLoading) {
// showLoading()
// }
hideLoading()
// 未设置状态码则默认成功状态
const { data, status } = response;
if (data instanceof Blob || data instanceof ArrayBuffer) {
if (response.headers["content-disposition"]) {
const fileName = response.headers["content-disposition"]
?.split(";")[1]
?.split("=")[1];
return {
data,
fileName,
};
}
else {
return Promise.reject("没有访问权限");
}
}
const { errCode, code, msg } = data || {};
const errMsg = data?.errMsg || data?.message || msg;
// console.log(11, code, errMsg)
if(code === 2000){
await router.push('/');
}
if (![0, 200].includes(code)) {
const { data, status } = response
if (data instanceof Blob || data instanceof ArrayBuffer) {
return {
data,
code: 200
}
if (response.headers['content-disposition']) {
const fileName = response.headers['content-disposition']
?.split(';')[1]
?.split('=')[1]
} else {
return Promise.reject('没有访问权限')
}
}
const { errCode, code, msg } = data || {}
const errMsg = data?.errMsg || data?.message || msg
// console.log(11, code, errMsg)
// if(errMsg==='用户未登录')
// { message.error(errMsg);}
// else if(errMsg==='密码不正确'){
// message.error(errMsg);
// }
// else if(errMsg==="账户信息查找为空"){
// message.error(errMsg);
// }
// else{ message.error("服务器升级维护中，请稍后重试！")}\
message.error(errMsg);
return Promise.reject(errMsg);
}
if (code === 2000) {
await router.push('/')
}
if (/^[4|5].*/.test(code || errCode || status)) {
// console.error('> axios(interceptors.response): ', errMsg);
message.error(errMsg);
// message.error("服务器访问过多，请稍后重试！");
// 处理未登录，token过期等 情况
// if (code !== 404 && /^[4].*/.test(code || errCode || status)) {
// await app.fedLogout();
// }
return Promise.reject(data);
}
return data;
},
(error) => {
// console.log('err' + error)
hideLoading()
let { message } = error
if (message == 'Network Error') {
message = '后端接口连接异常'
} else if (message.includes('timeout')) {
message = '系统接口请求超时'
} else if (message.includes('Request failed with status code')) {
message = '系统接口' + message.substr(message.length - 3) + '异常'
}
message.err("服务器升级维护中，请稍后重试！")
return Promise.reject(error)
}
if (![0, 200].includes(code)) {
// if(errMsg==='用户未登录')
// { message.error(errMsg);}
// else if(errMsg==='密码不正确'){
// message.error(errMsg);
// }
// else if(errMsg==="账户信息查找为空"){
// message.error(errMsg);
// }
// else{ message.error("服务器升级维护中，请稍后重试！")}\
message.error(errMsg)
return Promise.reject(errMsg)
}
if (/^[4|5].*/.test(code || errCode || status)) {
// console.error('> axios(interceptors.response): ', errMsg);
message.error(errMsg)
// message.error("服务器访问过多，请稍后重试！");
// 处理未登录，token过期等 情况
// if (code !== 404 && /^[4].*/.test(code || errCode || status)) {
// await app.fedLogout();
// }
return Promise.reject(data)
}
return data
},
(error) => {
// console.log('err' + error)
hideLoading()
let { message } = error
if (message == 'Network Error') {
message = '后端接口连接异常'
} else if (message.includes('timeout')) {
message = '系统接口请求超时'
} else if (message.includes('Request failed with status code')) {
message = '系统接口' + message.substr(message.length - 3) + '异常'
}
message.err('服务器升级维护中，请稍后重试！')
return Promise.reject(error)
}
)
export default service

13
src/utils/index.ts Normal file
View File

@ -0,0 +1,13 @@
import dayjs from 'dayjs'
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
dayjs.extend(isSameOrAfter)
// dayjs.extend(isBefore)
function isNotOneWeekAgo(date: any) {
if (!date) return false
const oneWeekAgo = dayjs().subtract(1, 'week')
// console.log('🚀 ~ oneWeekAgo:', oneWeekAgo.format('YYYY-MM-DD'))
return dayjs(date).isSameOrAfter(oneWeekAgo, 'day')
}
export { isNotOneWeekAgo }

144
src/views/company/index.vue
View File

@ -4,29 +4,79 @@ import HomeHead from '@/views/home/components/HomeHead.vue'
// import HomeHeadSearch from '@/views/home/components/HomeHeadSearch.vue'
import { useDate } from '@/views/home/hooks/useDate'
// import { NTimeline, NTimelineItem } from 'naive-ui'
import { useMessage } from 'naive-ui'
import { cateFileList } from '@/api/daikin/base'
const { day, week } = useDate()
const { push } = useRouter()
const array = ref<any[]>([
{ content1: '将扩大的机遇转为成果 更强更大地展翅飞翔', content2: 'ひろがるチャンスを 成果につなげ 強く大きく 羽ばたこう', year: '2023年' },
{ content1: '领先时代的变化 开创崭新的未来', content2: '', year: '2022年' },
{ content1: '以“重大变化”为契机 向新课题发起挑战', content2: '', year: '2021年' },
{ content1: '加速推进三个协创 决胜于变化的时代', content2: '', year: '2020年' },
{ content1: '以三个协创为轴心 人人迅速果断行动', content2: '', year: '2016年' },
{ content1: '突破壁垒 集中优势 不断挑战新课题', content2: '', year: '2018年' },
{ content1: '坚持以人为轴心，融合新的力量', content2: '集团上下齐心协力提升企业价值', year: '2017年' },
{ content1: '站稳脚跟 强化优势 大步迈进', content2: '', year: '2016年' },
{ content1: '创造未来，决胜于变化的时代', content2: '', year: '2015年' },
]);
{
content1: '将扩大的机遇转为成果 更强更大地展翅飞翔',
content2: 'ひろがるチャンスを 成果につなげ 強く大きく 羽ばたこう',
year: '2023年'
},
{ content1: '领先时代的变化 开创崭新的未来', content2: '', year: '2022年' },
{
content1: '以“重大变化”为契机 向新课题发起挑战',
content2: '',
year: '2021年'
},
{
content1: '加速推进三个协创 决胜于变化的时代',
content2: '',
year: '2020年'
},
{
content1: '以三个协创为轴心 人人迅速果断行动',
content2: '',
year: '2016年'
},
{
content1: '突破壁垒 集中优势 不断挑战新课题',
content2: '',
year: '2018年'
},
{
content1: '坚持以人为轴心，融合新的力量',
content2: '集团上下齐心协力提升企业价值',
year: '2017年'
},
{ content1: '站稳脚跟 强化优势 大步迈进', content2: '', year: '2016年' },
{ content1: '创造未来，决胜于变化的时代', content2: '', year: '2015年' }
])
const fileItem = ref<any>({})
const message = useMessage()
const getFile = async () => {
const { rows }: any = await cateFileList({
cateId: 261,
pageNum: 1,
pageSize: 100
})
fileItem.value = rows.find((item: any) => item.id == 1693) || {}
}
const goFile = () => {
const { isSelect, filePath } = fileItem.value
if (!isSelect || isSelect === 2) {
message.info('没有访问权限!')
return
}
if (!filePath) {
message.info('暂无文件')
}
window.open(filePath)
}
getFile()
</script>
<template>
<HomeHead class="top">
<template #content>
<!-- <HomeHeadSearch /> -->
</template>
</HomeHead>
<!-- <div class="h-full relative flex flex-col">
<HomeHead class="top">
<template #content>
<!-- <HomeHeadSearch /> -->
</template>
</HomeHead>
<!-- <div class="h-full relative flex flex-col">
<div class="font-600 flex items-end mt27px">
<div class="text-36px">集团方针</div>
<div class="text-18px ml40px mr25px">{{ day }}</div>
@ -46,41 +96,49 @@ const array = ref<any[]>([
</div>
</div>
</div> -->
<div class="mt30px mr20px flex w100%">
<img src="../../assets/images/fangz.png" class="w100%"/>
</div>
<div class="mt30px mr20px flex w100% relative">
<!-- <img src="../../assets/images/fangz.png" class="w100%"/> -->
<img src="../../assets/images/fzqiet.png" class="w100%" />
<div
class="absolute py10px left-1160px top-270px pb-0px z-100 text-20px text-#285FE9 flex justify-center items-center hover:border-b-1px hover:border-b-solid hover:border-b-#285FE9 hover:cursor-pointer"
@click="goFile"
>
<img src="../../assets/images/wjqq@2x.png" class="w18px h20px mr8px" />
2024年グループ年頭方针
</div>
</div>
</template>
<style scoped lang="less">
.top {
position: absolute;
right: 30px;
top: -92px;
position: absolute;
right: 30px;
top: -92px;
}
.g-wrapper {
border-radius: 18px;
border: 1px solid #E7EBF5;
box-shadow: inset 1px 2px 12px rgba(14, 86, 221, 0.32);
overflow: hidden;
border-radius: 18px;
border: 1px solid #e7ebf5;
box-shadow: inset 1px 2px 12px rgba(14, 86, 221, 0.32);
overflow: hidden;
.timeline {
font-size: 20px;
font-weight: bold;
color: #142142;
.timeline {
font-size: 20px;
font-weight: bold;
color: #142142;
.one {
position: relative;
.year{
left: -132px;
top: -14px;
color: #003CB7;
font-size: 26px;
font-weight: normal;
text-align: center;
line-height: 50px;
}
}
}
.one {
position: relative;
.year {
left: -132px;
top: -14px;
color: #003cb7;
font-size: 26px;
font-weight: normal;
text-align: center;
line-height: 50px;
}
}
}
}
</style>

14
src/views/extermal/ExternalHome.vue
View File

@ -589,6 +589,7 @@ const demandWithdraws = async (obj) => {
<img src="@/assets/images/logo.png" class="w197px h44px mt14px" />
</div>
<div
v-if="false"
class="beijing absolute flex left-[45%] translate-x-[-50%] top-11 text-[22px] items-center justify-center font-bold"
>
<img src="./images/laba@2x.png" class="w-[48px] h-[45px] mr-4" alt="" />
@ -633,8 +634,7 @@ const demandWithdraws = async (obj) => {
"
class="mr15px mt17px flex px5px pt6px"
@click="toList(7)"
>更多<el-icon>
<DArrowRight class="" /> </el-icon
>更多<el-icon> <DArrowRight class="" /> </el-icon
></span>
<div class="absolute right-25px top-20px">
@ -713,8 +713,7 @@ const demandWithdraws = async (obj) => {
"
class="mr15px mt2px flex px5px pt6px"
@click="toList(8)"
>更多<el-icon>
<DArrowRight class="" /> </el-icon
>更多<el-icon> <DArrowRight class="" /> </el-icon
></span>
</div>
@ -1252,10 +1251,9 @@ const demandWithdraws = async (obj) => {
alt=""
style="margin-right: 50px"
/>
<p
style="text-align: center; color: #dde5fd"
>暂无供方留言</p
>
<p style="text-align: center; color: #dde5fd">
暂无供方留言
</p>
</div>
<div
v-else

1620
src/views/home/Home.vue
View File

File diff suppressed because it is too large Load Diff

428
src/views/home/components/New.vue
View File

@ -1,26 +1,30 @@
<script setup lang="ts">
import { getArticlePage,report } from '@/api/daikin/base'
import { getArticlePage, report } from '@/api/daikin/base'
import { message } from '@/utils/message'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, Navigation, Pagination, A11y } from 'swiper'
import { NCarousel } from 'naive-ui';
import { NCarousel } from 'naive-ui'
const route = useRoute()
const { push } = useRouter()
const listData = ref<any[]>([])
async function getPageList() {
const { code } = report({ moduleCode:'App_Article' })
const { rows } = await getArticlePage({ pageNum: 1, pageSize: 10, type: 2, position: 'homePage' } as any);
// console.log(rows)
// for (let index = 0; index < 50; index++) {
listData.value.push(...rows)
// }
console.log(listData.value.length)
const { code } = report({ moduleCode: 'App_Article' })
const { rows } = await getArticlePage({
pageNum: 1,
pageSize: 10,
type: 2,
position: 'homePage'
} as any)
// console.log(rows)
// for (let index = 0; index < 50; index++) {
listData.value = rows
// }
console.log(listData.value.length)
}
onMounted(getPageList)
// console.log(listData)
// const toDetail2 =(n: { id: any; })=>{
@ -33,40 +37,82 @@ onMounted(getPageList)
// message.info("您没有权限查看！")
// }
// }
const toDetail2 = (n: any) => {
// console.log(n)
if (n.id === 0) return
if (n.isSelect === 1) {
push(`/intelligence/${n.type == 2 ? 'within' : 'outside'}/` + n.id)
} else {
message.error('没有访问权限')
}
}
const modules = [Autoplay, Pagination, Navigation, A11y]
</script>
<template>
<div class="card news cursor-pointer">
<div class="card_title" @click="push({ name: 'Intelligence' })">外部情报</div>
<div class="card_sub-title">责任者：调达研究院 研究企画T</div>
<div class="card_content">
<div class="news_card w-437px flex items-end gap-12px text-#fff/80">
<img src="@/assets/images/bg-card6-text.svg"
class="h26px absolute left-16px top-16px animate__animated animate__zoomIn animate__delay-2s animate__slower animate__repeat-2" />
<div class="news_card_item i1 flex-1 w0 h100px p10px pt56px flex flex-col justify-around">
<img src="@/assets/images/WATCHING@2x.png"
class="w41px h47px absolute left-40px top-25px animate__animated animate__infinite animate__heartBeat" />
<img src="@/assets/images/WATCHING2@2x.png" class="w80px left-10px top-10px" />
<!-- <p class="truncate" v-if="listData && Array.isArray(listData) && listData.length > 0" v-for="i in listData.slice(0,2)" :key="i" @click="toDetail2(i)">{{ i.title }}</p> -->
</div>
<div class="news_card_item i2 flex-1 w0 h120px p10px pt56px flex flex-col justify-around">
<img src="@/assets/images/ALARM@2x.png"
class="w61px h63px absolute left-28px top-30px animate__animated animate__infinite animate__fadeIn" />
<img src="@/assets/images/ALARM2@2x.png" class="w70px left-15px top-14px" />
<!-- <p class="truncate" v-if="listData && Array.isArray(listData) && listData.length > 2" v-for="i in listData.slice(2,4)" :key="i" @click="toDetail2(i)">{{ i.title }}</p> -->
</div>
<div class="news_card_item i3 w140px h160px p10px pt70px flex flex-col justify-around">
<img src="@/assets/images/WARNING@2x.png"
class="w82px h66px absolute left-30px top-45px animate__animated animate__infinite animate__flipOutY" />
<img src="@/assets/images//WARNING2@2x.png" class="w100px left-8px top-20px" />
<!-- <p class="truncate" v-if="listData && Array.isArray(listData) && listData.length > 4" v-for="i in listData.slice(4,7)" :key="i" @click="toDetail2(i)">{{ i.title }}</p> -->
</div>
</div>
<div class="card_title !pl0 !pt0" @click="push({ name: 'News' })">最新News</div>
<div class="font-16px h-100px overflow-y-auto mt10px">
<!-- <n-carousel direction="vertical" dot-placement="right" style="width: 100%; height: 100px" autoplay :interval="1200"
<div class="card news relative">
<div
class="card_title cursor-pointer hover:underline"
@click="push({ name: 'Intelligence' })"
>
外部情报
</div>
<div class="card_sub-title">责任者：调达研究院 研究企画T</div>
<div class="card_content px-20px pt-30px pb-0">
<div
class="news_card w-437px flex items-end gap-12px text-#fff/80 !absolute right--20% top--38% scale-50"
>
<img
src="@/assets/images/bg-card6-text.svg"
class="h26px absolute left-16px top-16px animate__animated animate__zoomIn animate__delay-2s animate__slower animate__repeat-2"
/>
<div
class="news_card_item i1 flex-1 w0 h100px p10px pt56px flex flex-col justify-around"
>
<img
src="@/assets/images/WATCHING@2x.png"
class="w41px h47px absolute left-40px top-25px animate__animated animate__infinite animate__heartBeat"
/>
<img
src="@/assets/images/WATCHING2@2x.png"
class="w80px left-10px top-10px"
/>
<!-- <p class="truncate" v-if="listData && Array.isArray(listData) && listData.length > 0" v-for="i in listData.slice(0,2)" :key="i" @click="toDetail2(i)">{{ i.title }}</p> -->
</div>
<div
class="news_card_item i2 flex-1 w0 h120px p10px pt56px flex flex-col justify-around"
>
<img
src="@/assets/images/ALARM@2x.png"
class="w61px h63px absolute left-28px top-30px animate__animated animate__infinite animate__fadeIn"
/>
<img
src="@/assets/images/ALARM2@2x.png"
class="w70px left-15px top-14px"
/>
<!-- <p class="truncate" v-if="listData && Array.isArray(listData) && listData.length > 2" v-for="i in listData.slice(2,4)" :key="i" @click="toDetail2(i)">{{ i.title }}</p> -->
</div>
<div
class="news_card_item i3 w140px h160px p10px pt70px flex flex-col justify-around"
>
<img
src="@/assets/images/WARNING@2x.png"
class="w82px h66px absolute left-30px top-45px animate__animated animate__infinite animate__flipOutY"
/>
<img
src="@/assets/images//WARNING2@2x.png"
class="w100px left-8px top-20px"
/>
<!-- <p class="truncate" v-if="listData && Array.isArray(listData) && listData.length > 4" v-for="i in listData.slice(4,7)" :key="i" @click="toDetail2(i)">{{ i.title }}</p> -->
</div>
</div>
<div
class="card_title !pl0 !pt0 cursor-pointer hover:underline"
@click="push({ name: 'News' })"
>
最新News
</div>
<div class="font-16px !h-230px overflow-y-auto mt10px">
<!-- <n-carousel direction="vertical" dot-placement="right" style="width: 100%; height: 100px" autoplay :interval="1200"
:slides-per-view="2" :space-between="0" :loop="false" mousewheel>
<div class="mt-10px" v-if="listData && Array.isArray(listData) && listData.length > 0" v-for="i in listData"
:key="i">
@ -77,178 +123,188 @@ const modules = [Autoplay, Pagination, Navigation, A11y]
</div>
</n-carousel> -->
<swiper id="swiperList2" v-if="listData" :slides-per-view="2"
:autoplay="{ delay: 1000, disableOnInteraction: false }" :speed="500" :space-between="0" :direction="'vertical'"
:scrollbar="{ draggable: false }" :loop="true" :modules="modules" style="height: 100px">
<swiper-slide v-for="(i, index) in listData" :key="index">
<div class="mt-10px" >
<div class="text-#142142 truncate text-16px">
<a :href="i.url" class="no-underline text-#142142">{{ i.title}}</a>
</div>
<div class="text-#808696 mt-8px text-14px">
<span>来源于: {{ i.source }}</span> &nbsp;&nbsp;&nbsp;<span>{{i.publishTime }}</span>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div>
</div>
<swiper
id="swiperList2"
v-if="listData"
:slides-per-view="4"
:autoplay="{ delay: 1000, disableOnInteraction: false }"
:speed="500"
:space-between="10"
:direction="'vertical'"
:scrollbar="{ draggable: false }"
:loop="true"
:modules="modules"
style="height: 230px"
>
<swiper-slide v-for="(i, index) in listData" :key="index">
<div class="mt-10px">
<div class="text-#142142 truncate text-16px">
<a
@click="toDetail2(i)"
:href="i.url"
class="no-underline text-#142142 cursor-pointer hover:underline"
>{{ i.title }}</a
>
</div>
<div class="text-#808696 mt-8px text-14px">
<span>来源于: {{ i.source }}</span> &nbsp;&nbsp;&nbsp;<span>{{
i.publishTime
}}</span>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div>
</div>
</template>
<style lang="less">
::-webkit-scrollbar {
width: 1px;
width: 1px;
}
.card {
// width: 480px;
// height: 428px;
width: 480px;
height: 395px;
border-radius: 18px;
overflow: hidden;
// width: 480px;
// height: 428px;
width: 480px;
height: 395px;
border-radius: 18px;
overflow: hidden;
background-color: #fff;
// border: 1px solid #e7ebf5;
box-shadow: 1px 2px 12px rgba(14, 86, 221, 0.32);
position: relative;
display: flex;
flex-direction: column;
position: relative;
background-color: #fff;
// border: 1px solid #e7ebf5;
box-shadow: 1px 2px 12px rgba(14, 86, 221, 0.32);
position: relative;
display: flex;
flex-direction: column;
position: relative;
&::after {
content: ' ';
background-image: url('@/assets/images/bg-card.svg');
pointer-events: none;
display: block;
width: 100%;
height: 127px;
background-size: cover;
position: absolute;
left: 0;
top: 0;
}
.card_title {
flex-shrink: 0;
font-size: 28px;
color: #142142;
padding: 20px;
padding-bottom: 0;
}
.card_sub-title {
color: rgba(128, 134, 150, 0.8);
font-size: 16px;
padding: 0 20px;
padding-bottom: 0;
margin-top: 10px;
}
&::after {
content: ' ';
background-image: url('@/assets/images/bg-card.svg');
pointer-events: none;
display: block;
width: 100%;
height: 127px;
background-size: cover;
position: absolute;
left: 0;
top: 0;
}
.card_title {
flex-shrink: 0;
font-size: 28px;
color: #142142;
padding: 20px;
padding-bottom: 0;
}
.card_sub-title {
color: rgba(128, 134, 150, 0.8);
font-size: 16px;
padding: 0 20px;
padding-bottom: 0;
margin-top: 10px;
}
}
.topics {
.item {
border-radius: 8px;
width: 210px;
height: 155px;
box-shadow: inset 1.4px 1.4px 0px 0px rgba(255, 255, 255, 0.004);
overflow: hidden;
.item {
border-radius: 8px;
width: 210px;
height: 155px;
box-shadow: inset 1.4px 1.4px 0px 0px rgba(255, 255, 255, 0.004);
overflow: hidden;
background-image: url('@/assets/images/bg-card4.svg');
background-position: -2px -2px;
background-repeat: no-repeat;
background-size: 215px 165px;
position: relative;
background-image: url('@/assets/images/bg-card4.svg');
background-position: -2px -2px;
background-repeat: no-repeat;
background-size: 215px 165px;
position: relative;
.item_title {
padding-left: 16px;
padding-top: 22px;
color: #002fa7;
position: relative;
// z-index: 9;
}
.item_title {
padding-left: 16px;
padding-top: 22px;
color: #002fa7;
position: relative;
// z-index: 9;
}
.item_sub-title {
color: rgba(128, 134, 150, 0.8);
font-size: 12px;
font-weight: normal;
padding: 0 16px;
padding-bottom: 0;
margin-top: 10px;
z-index: 9;
}
.item_sub-title {
color: rgba(128, 134, 150, 0.8);
font-size: 12px;
font-weight: normal;
padding: 0 16px;
padding-bottom: 0;
margin-top: 10px;
z-index: 9;
}
.item_img {
position: absolute;
bottom: -10px;
right: 0;
// z-index: 5;
transition: transform 0.3s;
.item_img {
position: absolute;
bottom: -10px;
right: 0;
// z-index: 5;
transition: transform 0.3s;
&:hover {
transform: scale(1.2);
}
}
}
&:hover {
transform: scale(1.2);
}
}
}
}
.news {
.card_content {
padding: 20px;
padding-top: 0;
}
.card_content {
// padding: 20px;
// padding-top: 0;
}
.news_card {
// width: 442px;
height: 180px;
padding: 16px;
font-size: 14px;
.news_card {
// width: 442px;
height: 180px;
padding: 16px;
font-size: 14px;
// background-image: url('./images/bg-card6.png');
background-repeat: no-repeat;
// background-position: 0 0;
// background-size: cover;
background-size: 100% 100%;
// background-image: url('./images/bg-card6.png');
background-repeat: no-repeat;
// background-position: 0 0;
// background-size: cover;
background-size: 100% 100%;
// border: 0px solid;
// // padding: 0;
// border-width: 4px;
// border-image-outset: 4px;
// // box-sizing: content-box;
// border: 0px solid;
// // padding: 0;
// border-width: 4px;
// border-image-outset: 4px;
// // box-sizing: content-box;
// border-image-source: url('@/assets/images/bg-card6.svg');
// border-image-slice: 4 4 4 4;
// border-image-repeat: round repeat;
// border-image-source: url('@/assets/images/bg-card6.svg');
// border-image-slice: 4 4 4 4;
// border-image-repeat: round repeat;
position: relative;
}
position: relative;
}
.news_card_item {
background-repeat: no-repeat;
background-size: cover;
position: relative;
border-radius: 10px;
background-position: 0 4px;
.news_card_item {
background-repeat: no-repeat;
background-size: cover;
position: relative;
border-radius: 10px;
background-position: 0 4px;
&.i1 {
background-image: url('@/assets/images/bg-card6-11.svg');
}
&.i1 {
background-image: url('@/assets/images/bg-card6-11.svg');
}
&.i2 {
background-image: url('@/assets/images/bg-card6-21.svg');
}
&.i2 {
background-image: url('@/assets/images/bg-card6-21.svg');
}
&.i3 {
background-image: url('@/assets/images/bg-card6-31.svg');
background-position: 0 10px;
}
}
&.i3 {
background-image: url('@/assets/images/bg-card6-31.svg');
background-position: 0 10px;
}
}
}
</style>
</style>

219
src/views/home/csr/CSRContent2.vue
View File

@ -6,7 +6,8 @@ import AppBlock from '@/components/AppBlock.vue'
import { NIcon, useMessage, NCarousel } from 'naive-ui'
import { ChevronBack, ChevronForward } from '@vicons/ionicons5'
import { ElCarousel, ElCarouselItem } from 'element-plus'
import { NPopover } from 'naive-ui'
import { NPopover } from 'naive-ui'
import { isNotOneWeekAgo } from '@/utils'
import { getFootprintList } from '@/api/daikin/base'
@ -64,11 +65,11 @@ onMounted(async () => {
// };
// });
// }
swiperList.value = rows
// if(rows.length>5 || rows.length < 3){
// }else{
// swiperList.value = [...rows,...rows]
// }
swiperList.value = rows
// if(rows.length>5 || rows.length < 3){
// }else{
// swiperList.value = [...rows,...rows]
// }
}
// 碳足迹
getZu(1)
@ -194,6 +195,15 @@ const handleVisitsScoll = () => {
}
}
}
const scroll = ({ scrollTop }: any) => {
const isAtBottom = scrollTop >= 400
if (isAtBottom) {
if (pageNum < maxMsgLingth) {
++pageNum
getZu(pageNum)
}
}
}
</script>
<template>
@ -232,24 +242,20 @@ const handleVisitsScoll = () => {
</div>
<AppBlock class="w-full h325px box !b-0" style="box-shadow: none">
<div class="w1200px px68px relative">
<div
class="swipe-nav nav-prev"
>
<div class="swipe-nav nav-prev">
<NIcon size="40" color="#537deb">
<ChevronBack />
</NIcon>
</div>
<div
class="swipe-nav nav-next"
>
<div class="swipe-nav nav-next">
<NIcon size="40" color="#537deb">
<ChevronForward />
</NIcon>
</div>
<!-- :slides-per-group="3" -->
<!-- :slides-per-group="3" -->
<!-- :autoplay="{delay: 3000, disableOnInteraction: false, pauseOnMouseEnter: true,stopOnLastSlide: false}" -->
<Swiper
ref="swipeRef"
:autoplay="{delay: 3000, disableOnInteraction: false, pauseOnMouseEnter: true,stopOnLastSlide: false}"
@swiper="setSwiperRef"
class="h325px"
:slides-per-view="3"
@ -262,28 +268,34 @@ const handleVisitsScoll = () => {
:loop="true"
:navigation="{
nextEl: '.nav-next',
prevEl: '.nav-prev',
prevEl: '.nav-prev'
}"
>
<template v-for="(i, index) in swiperList" :key="i">
<SwiperSlide >
<div
class="w340px h300px overflow-hidden bg-#F6F8FF mt10px relative rd-25px"
style="box-shadow: 0px 7px 12px 0px #e7e7e7"
>
<template v-for="(i, index) in swiperList" :key="index">
<SwiperSlide>
<div
class="!bg-gradient-to-r !from-#5C87F5/90 !to-#466CCD/70 text-#fff px20px py15px text-18px truncates"
class="w340px h300px overflow-hidden bg-#F6F8FF mt10px relative rd-25px"
style="box-shadow: 0px 7px 12px 0px #e7e7e7"
>
活动{{ index + 1 }}：
{{ i.title }}
<div
class="flex items-center !bg-gradient-to-r !from-#5C87F5/90 !to-#466CCD/70 text-#fff font-[500] font-bold px20px py15px text-18px truncates"
>
<img
v-if="isNotOneWeekAgo(i.createTime)"
src="@/assets/images/NEW.gif"
class="h-20px"
alt=""
/>
活动{{ index + 1 }}:
<span>{{ i.title }}</span>
<!-- <span class="float-right"><el-icon>
<!-- <span class="float-right"><el-icon>
<ArrowRightBold />
</el-icon></span> -->
</div>
</div>
<div class="overflow-hidden w-full h-196px z-10">
<!-- <el-carousel
<div class="overflow-hidden w-full h-206px z-10">
<!-- <el-carousel
autoplay
indicator-position="none"
arrow="never"
@ -300,64 +312,70 @@ const handleVisitsScoll = () => {
/>
</el-carousel-item>
</el-carousel> -->
<n-carousel
draggable
autoplay
trigger="hover"
mousewheel
effect="fade"
:interval="5000"
:loop="true"
>
<img
v-if="i.imgUrl"
v-for="ite in i.imgUrl"
:src="ite.url"
class="p10px w-full max-h-200px image-container overflow-hidden"
/>
</n-carousel>
</div>
<!-- <img :src="i.imgPath" class="p10px w-full max-h-180px rd-10px" @click="toDetail(i)" /> -->
<div
class="left-0 right-0 bottom-0 text-#000 text-left px16px py6px z-100"
>
<div class="max-w500px text-12px flex flex-col">
<div class="flex items-center">
<img
src="../../../assets/images/lvbiao@2x.png"
class="mr-5px"
/>
<n-popover trigger="hover" placement="top-start" >
<template #trigger>
<span
class="truncate text-16px"
@click="toDetail(i)"
> {{ i.filePath[0]?.originalFileName }}
</span>
</template>
<div class="text-18px leading-40px">
{{ i.filePath[0]?.originalFileName }}
</div>
</n-popover>
</div>
<div
v-if="i.filePath.length > 1"
title="查看更多"
@click="toDetail(i)"
class="cursor-pointer right--20px top-0px w60px pt-6px flex items-center ml-auto text-right"
style="
color: #4d7ee8;
text-align: center;
font-size: 14px;
"
<n-carousel
draggable
autoplay
trigger="hover"
mousewheel
effect="fade"
:interval="5000"
:loop="true"
class="overflow-hidden box-border"
>
更多<el-icon>
<DArrowRight class="" />
</el-icon>
</div>
<!-- <el-dropdown max-height="100px" @command="down">
<div
class="w-full h-200px overflow-hidden p10px"
v-if="i.imgUrl"
v-for="ite in i.imgUrl"
>
<img
:src="ite.url"
class="w-full max-h-200px image-container overflow-hidden"
/>
</div>
</n-carousel>
</div>
<!-- <img :src="i.imgPath" class="p10px w-full max-h-180px rd-10px" @click="toDetail(i)" /> -->
<div
class="absolute left-0 right-0 bottom-14px text-#000 text-18px text-left px16px py6px z-100 transition-none"
>
<div class="max-w500px text-16px flex flex-col">
<div class="flex items-center max-w-[84%]">
<img
src="../../../assets/images/lvbiao@2x.png"
class="mr-5px"
/>
<n-popover trigger="hover" placement="top-start">
<template #trigger>
<span
class="truncate text-18px !min-w-[auto]"
@click="toDetail(i)"
>
{{ i.filePath[0]?.originalFileName }}
</span>
</template>
<div class="text-18px leading-40px">
{{ i.filePath[0]?.originalFileName }}
</div>
</n-popover>
</div>
<div
v-if="i.filePath.length >= 1"
title="查看更多"
@click="toDetail(i)"
class="absolute cursor-pointer right--14px top-0px w60px pt-3px flex items-center ml-auto text-right"
style="
color: #4d7ee8;
text-align: center;
font-size: 16px;
"
>
更多<el-icon>
<DArrowRight class="" />
</el-icon>
</div>
<!-- <el-dropdown max-height="100px" @command="down">
<el-icon size="25">
<CaretBottom />
</el-icon>
@ -372,11 +390,11 @@ const handleVisitsScoll = () => {
</el-dropdown-menu>
</template>
</el-dropdown> -->
</div>
</div>
</div>
</div>
</SwiperSlide>
</template>
</SwiperSlide>
</template>
</Swiper>
</div>
</AppBlock>
@ -414,25 +432,42 @@ const handleVisitsScoll = () => {
>更多<el-icon> <DArrowRight class="" /> </el-icon
></span>
<!-- <div ref="msgScoll" class="px20px h280px cent_box overflow-y-scroll "> -->
<div ref="msgScoll" class="px20px h280px cent_box overflow-y-scroll">
<!-- <div
ref="msgScoll"
class="px20px h280px cent_box overflow-y-scroll"
> -->
<el-scrollbar
class="px20px"
ref=""
height="280px"
always
@scroll="scroll"
>
<!-- <div class="text-#808696 bg-#F4F8FF py10px rd-5px mt10px" v-for="(i, key) in dataList" :key="i"> -->
<div
class="text-#808696 bg-#F4F8FF py10px rd-5px mt10px"
v-for="(i, key) in dataList"
:key="i"
>
<div class="truncate2" @click="toDetail(i)">
<div class="truncate2 flex items-center" @click="toDetail(i)">
<span
class="text-#fff bg-#407DF1 px5px text-18px rounded-20px mr-5px inlineFlex"
>{{ ++key }}</span
>
<span class="text-18px">{{ i.title }}</span>
<span class="text-18px mr-2">{{ i.title }}</span>
<img
v-if="isNotOneWeekAgo(i.createTime)"
src="@/assets/images/NEW.gif"
class="h-20px"
alt=""
/>
</div>
<span class="absolute right-10px top-24px text-18px">{{
i.createTime
}}</span>
</div>
</div>
</el-scrollbar>
<!-- </div> -->
</div>
<div class="w-50% h-375px bg-#fff float-left ml-1%">
<div class="text-24px font-bold p20px">碳足迹平台</div>

694
src/views/home/csr/CSRContent23.vue
View File

@ -1,289 +1,493 @@
<script setup lang="ts">
// import {message} from '@/utils/message'
import {fetchCsrSupplier,fetchCsrSupplierList,fetchCsrSupplierTopList,fetchCsrSupplierTaskInfo} from '@/api/daikin/base'
import {
fetchCsrSupplier,
fetchCsrSupplierList,
fetchCsrSupplierTopList,
fetchCsrSupplierTaskInfo
} from '@/api/daikin/base'
const query = ref<any>({
year: '',
supplierName:''
year: '',
supplierName: ''
})
query.value.year = new Date().getFullYear() + ''
const calendar = [4,5,6,7,8,9,10,11,12,1,2,3]
const year = new Date().getFullYear()
const month = new Date().getMonth()
const jpMonth = (month < 3 ? year - 1 : year) + ''
query.value.year = jpMonth
const calendar = [4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2, 3]
const calendarShow = new Date().getMonth() + 1
const nowIndexMonth = calendar.indexOf(calendarShow)
const updateTime = ref('');
const updateTime = ref('')
const handleChange = () => {
getCsrSupplier()
getCsrSupplierList()
getCsrSupplier()
getCsrSupplierList()
}
const isDateDisabled = (date:any) => {
return date > new Date()
const isDateDisabled = (date: any) => {
return date > new Date()
}
const csrSupplier = ref<any>([])
const csrSupplierObj = ref<any>({});
const months = ['04','05','06','07','08','09','10','11','12','01','02','03']
const getCsrSupplier = ()=>{
months.forEach((item:any)=>{
csrSupplierObj.value[item] = {month:item}
})
const req = {...query.value}
fetchCsrSupplier(req).then(({data={}})=>{
const resData = Object.keys(data) || []
try {
csrSupplier.value = resData.length ? resData.map(key => {
const obj = data[key] || {}
const month = String(key).split('-')?.[1] || ''
Object.assign(csrSupplierObj.value[month], obj)
return {
key,
month,
data: obj,
}
}) : []
} catch (error) {
}
console.log("🚀 ~ file: CSRContent23.vue:50 ~ csrSupplierObj:", csrSupplierObj)
if(!csrSupplier.value.length) {
// message.warning('暂无数据')
csrSupplierObj.value = {}
}
})
const csrSupplierObj = ref<any>({})
const months = [
'04',
'05',
'06',
'07',
'08',
'09',
'10',
'11',
'12',
'01',
'02',
'03'
]
const loading = ref(false)
const getCsrSupplier = () => {
loading.value = true
months.forEach((item: any) => {
csrSupplierObj.value[item] = { month: item }
})
const req = { ...query.value }
fetchCsrSupplier(req).then(({ data = {} }) => {
const resData = Object.keys(data) || []
try {
csrSupplier.value = resData.length
? resData.map((key) => {
const obj = data[key] || {}
const month = String(key).split('-')?.[1] || ''
Object.assign(csrSupplierObj.value[month], obj)
return {
key,
month,
data: obj
}
})
: []
} catch (error) {}
console.log(
'🚀 ~ file: CSRContent23.vue:50 ~ csrSupplierObj:',
csrSupplierObj
)
if (!csrSupplier.value.length) {
// message.warning('暂无数据')
csrSupplierObj.value = {}
}
})
setTimeout(() => {
loading.value = false
}, 300)
}
const csrSupplierList = ref<any>([])
const selMonth = ref('')
const getCsrSupplierList = (index?:any) => {
const month = (index || index=== 0) ? query.value.year +'-'+ months[index] : ''
csrSupplierList.value = []
selMonth.value = ''
const req = {pageNum:1,pageSize:10,...query.value,month}
req.supplierName ? fetchCsrSupplierList(req).then((res : any)=>{
csrSupplierList.value = (res.rows || []).filter((item:any) => item.submitunCount > 0)
}) : fetchCsrSupplierTopList(req).then((res : any)=>{
csrSupplierList.value = (res.rows || []).filter((item:any) => item.submitunCount > 0)
});
selMonth.value = month ? +months[index] + '月' : ''
const getCsrSupplierList = (index?: any) => {
const month =
index || index === 0 ? query.value.year + '-' + months[index] : ''
csrSupplierList.value = []
selMonth.value = ''
const req = { pageNum: 1, pageSize: 10, ...query.value, month }
req.supplierName
? fetchCsrSupplierList(req).then((res: any) => {
csrSupplierList.value = (res.rows || []).filter(
(item: any) => item.submitunCount > 0
)
})
: fetchCsrSupplierTopList(req).then((res: any) => {
csrSupplierList.value = (res.rows || []).filter(
(item: any) => item.submitunCount > 0
)
})
selMonth.value = month ? +months[index] + '月' : ''
}
const getCsrSupplierTaskInfo = ()=>{
fetchCsrSupplierTaskInfo().then((res)=>{
updateTime.value = res.data?.updateTime
})
const getCsrSupplierTaskInfo = () => {
fetchCsrSupplierTaskInfo().then((res) => {
updateTime.value = res.data?.updateTime
})
}
const handleMonth = (index:number) => {
getCsrSupplierList(index)
const handleMonth = (index: number) => {
getCsrSupplierList(index)
}
getCsrSupplier()
getCsrSupplierList()
getCsrSupplierTaskInfo()
</script>
<template>
<div class="flex w-full rounded-18px">
<!-- <AppBlock> -->
<!-- <img src="./images/goudongxi2.png" class="w-full h-full" /> -->
<div class="relative overflow-hidden w-full bg-#f4f4f4 flex flex-wrap justify-between h-full rd-25px">
<div
v-if="false"
class="absolute flex flex-col w-full h-full z-100 top-0 left-0 text-center bg-red justify-center items-center"
style="background-color: rgba(255, 255, 255, 0.8)"
>
<img src="@/assets/images/chah.png" class="h-300px object-contain" />
<br />
<div class="text-#5683DB text-46px mt-10">【做成中,敬请期待】</div>
</div>
<div class="cards">
<div class="cards_title">供方月度碳排放数据提交情况</div>
<div class="!text-18px right-20 pt30px text-#4E7EE8 ">
<a href="https://procurement.daikin.net.cn/mingdao/portal/app/7abea528-f7b4-4437-84bb-6b6b169bad3d"
class="no-underline text-#4E7EE8 "><img src="./images/yuny@2x.png"
class="w25px mr5px mt--4px" /><span>明道云</span></a>
</div>
<div class="flex w-full h-80px p20px items-center mt10px">
<div>
<el-date-picker v-model="query.year" type="year" @change="handleChange" placeholder="" :disabled-date="isDateDisabled" :clearable="false" value-format="YYYY" />
</div>
<el-input v-model.trim="query.supplierName" class="w-50 m-2" placeholder="供方名" prefix-icon="Search" width="150px"/>
<el-button type="primary" @click="handleChange">查询</el-button>
</div>
<div class="w-full h-730px p20px">
<el-row :gutter="10" v-if="false">
<el-col :span="8"><div class="times" >
<div class="text-#fff text-18px font-bold absolute left-40% top-18px"><span class="text-30px">1</span>月</div>
<div class="bg-#fff w-120px absolute top-70px text-#A0C6B5 text-16px font-bold p10px left-15%">已提交：45</div>
<div class="bg-#fff w-120px absolute top-110px text-red text-16px font-bold p10px left-15%">未提交：100</div>
</div></el-col>
<el-col :span="8"><div class="time" >
<div class="text-#d3d2d2 text-18px font-bold absolute left-40% top-45%"><span class="text-60px">2</span>月</div>
</div></el-col>
<el-col :span="8"><div class="time">
<div class="text-#d3d2d2 text-18px font-bold absolute left-40% top-45%"><span class="text-60px">3</span>月</div>
</div></el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="8" v-for="(it,i) in months" :key="i">
<div :class=" i <= nowIndexMonth ? 'times' : 'time'" @click="handleMonth(i)" >
<div v-if="i > nowIndexMonth" class="text-#d3d2d2 text-18px font-bold absolute left-40% top-45%"><span class="text-60px">{{ +it }}</span>月</div>
<template v-if="i <= nowIndexMonth">
<div class="text-#fff text-18px font-bold absolute left-40% top-24px"><span class="text-24px">{{ +it }}</span>月</div>
<div class="bg-#fff w-140px absolute top-70px text-#A0C6B5 text-18px font-bold p10px left-10% rounded-xl">已提交：{{csrSupplierObj[it]?.submitedCount || 0 }}</div>
<div class="bg-#fff w-140px absolute top-110px text-red text-18px font-bold p10px left-10% rounded-xl">未提交：{{ csrSupplierObj[it]?.submitunCount || 0 }}</div>
</template>
</div>
</el-col>
<el-col :span="8" v-if="false"><div class="time" >
<div class="text-#d3d2d2 text-18px font-bold absolute left-38% top-45%"><span class="text-60px">5</span>月</div>
<template v-if="false">
<div class="bg-#fff w-120px absolute top-70px text-#A0C6B5 text-16px font-bold p10px left-15% rounded-xl">已提交：45</div>
<div class="bg-#fff w-120px absolute top-110px text-red text-16px font-bold p10px left-15% rounded-xl">未提交：100</div>
</template>
</div></el-col>
<el-col :span="8" v-if="false"><div class="time">
<div class="text-#d3d2d2 text-18px font-bold absolute left-38% top-45%"><span class="text-60px">6</span>月</div>
</div></el-col>
</el-row>
<el-row :gutter="10" v-if="false">
<el-col :span="8"><div class="time" >
<div class="text-#d3d2d2 text-18px font-bold absolute left-38% top-45%"><span class="text-60px">7</span>月</div>
</div></el-col>
<el-col :span="8"><div class="time" >
<div class="text-#d3d2d2 text-18px font-bold absolute left-38% top-45%"><span class="text-60px">8</span>月</div>
</div></el-col>
<el-col :span="8"><div class="times">
<!-- <div class="text-#d3d2d2 text-18px font-bold absolute left-38% top-45%"><span class="text-60px">9</span>月</div> -->
<div class="text-#fff text-18px font-bold absolute left-40% top-24px"><span class="text-24px">9</span>月</div>
<div class="bg-#fff w-140px absolute top-70px text-#A0C6B5 text-18px font-bold p10px left-10% rounded-xl">已提交：45</div>
<div class="bg-#fff w-140px absolute top-110px text-red text-18px font-bold p10px left-10% rounded-xl">未提交：100</div>
</div></el-col>
</el-row>
<el-row :gutter="10" v-if="false">
<el-col :span="8"><div class="time" >
<div class="text-#d3d2d2 text-18px font-bold absolute left-30% top-45%"><span class="text-60px">10</span>月</div>
</div></el-col>
<el-col :span="8"><div class="time" >
<div class="text-#d3d2d2 text-18px font-bold absolute left-30% top-45%"><span class="text-60px">11</span>月</div>
</div></el-col>
<el-col :span="8"><div class="time">
<div class="text-#d3d2d2 text-18px font-bold absolute left-30% top-45%"><span class="text-60px">12</span>月</div>
</div></el-col>
</el-row>
<el-row :gutter="10" v-if="false">
<el-col :span="8"><div class="time" >
<div class="text-#d3d2d2 text-18px font-bold absolute left-38% top-45%"><span class="text-60px">1</span>月</div>
<template v-if="false">
<div class="bg-#fff w-120px absolute top-70px text-#A0C6B5 text-16px font-bold p10px left-15%">已提交：45</div>
<div class="bg-#fff w-120px absolute top-110px text-red text-16px font-bold p10px left-15%">未提交：100</div>
</template>
</div></el-col>
<el-col :span="8"><div class="time" >
<div class="text-#d3d2d2 text-18px font-bold absolute left-38% top-45%"><span class="text-60px">2</span>月</div>
</div></el-col>
<el-col :span="8"><div class="time">
<div class="text-#d3d2d2 text-18px font-bold absolute left-38% top-45%"><span class="text-60px">3</span>月</div>
</div></el-col>
</el-row>
</div>
</div>
<div class="cards">
<div class="flex w-full rounded-18px">
<!-- <AppBlock> -->
<!-- <img src="./images/goudongxi2.png" class="w-full h-full" /> -->
<div
class="relative overflow-hidden w-full bg-#f4f4f4 flex flex-wrap justify-between h-full rd-25px"
>
<div class="cards">
<div class="cards_title">供方月度碳排放数据提交情况</div>
<div class="!text-18px right-20 pt30px text-#4E7EE8">
<a
href="https://procurement.daikin.net.cn/mingdao/portal/app/7abea528-f7b4-4437-84bb-6b6b169bad3d"
class="no-underline text-#4E7EE8"
><img src="./images/yuny@2x.png" class="w25px mr5px mt--4px" /><span
>明道云</span
></a
>
</div>
<div class="flex w-full h-80px p20px items-center mt10px">
<div>
<el-date-picker
v-model="query.year"
type="year"
@change="handleChange"
placeholder=""
:disabled-date="isDateDisabled"
:clearable="false"
value-format="YYYY"
/>
</div>
<el-input
v-model.trim="query.supplierName"
class="w-50 m-2"
placeholder="供方名"
prefix-icon="Search"
width="150px"
/>
<el-button type="primary" @click="handleChange">查询</el-button>
</div>
<div class="w-full h-730px p20px" v-loading="loading">
<el-row :gutter="10" v-if="false">
<el-col :span="8"
><div class="times">
<div
class="text-#fff text-18px font-bold absolute left-40% top-18px"
>
<span class="text-30px">1</span>月
</div>
<div
class="bg-#fff w-120px absolute top-70px text-#A0C6B5 text-16px font-bold p10px left-15%"
>
已提交：45
</div>
<div
class="bg-#fff w-120px absolute top-110px text-red text-16px font-bold p10px left-15%"
>
未提交：100
</div>
</div></el-col
>
<el-col :span="8"
><div class="time">
<div
class="text-#d3d2d2 text-18px font-bold absolute left-40% top-45%"
>
<span class="text-60px">2</span>月
</div>
</div></el-col
>
<el-col :span="8"
><div class="time">
<div
class="text-#d3d2d2 text-18px font-bold absolute left-40% top-45%"
>
<span class="text-60px">3</span>月
</div>
</div></el-col
>
</el-row>
<el-row :gutter="10">
<el-col :span="8" v-for="(it, i) in months" :key="i">
<div
v-show="!loading"
:class="
i <= nowIndexMonth && query.year == jpMonth ? 'times' : 'time'
"
@click="handleMonth(i)"
>
<div
v-if="i > nowIndexMonth || query.year != jpMonth"
class="text-#d3d2d2 text-18px font-bold absolute left-40% top-45%"
>
<span class="text-60px">{{ +it }}</span
>月
</div>
<template
v-if="
i <= nowIndexMonth &&
(query.year == jpMonth || !!csrSupplierObj[it])
"
>
<div
class="text-#fff text-18px font-bold absolute left-40% top-24px"
>
<span class="text-24px">{{ +it }}</span
>月
</div>
<div
class="bg-#fff w-140px absolute top-70px text-#A0C6B5 text-18px font-bold p10px left-10% rounded-xl"
>
已提交：{{ csrSupplierObj[it]?.submitedCount || 0 }}
</div>
<div
class="bg-#fff w-140px absolute top-110px text-red text-18px font-bold p10px left-10% rounded-xl"
>
未提交：{{ csrSupplierObj[it]?.submitunCount || 0 }}
</div>
</template>
</div>
</el-col>
<el-col :span="8" v-if="false"
><div class="time">
<div
class="text-#d3d2d2 text-18px font-bold absolute left-38% top-45%"
>
<span class="text-60px">5</span>月
</div>
<template v-if="false">
<div
class="bg-#fff w-120px absolute top-70px text-#A0C6B5 text-16px font-bold p10px left-15% rounded-xl"
>
已提交：45
</div>
<div
class="bg-#fff w-120px absolute top-110px text-red text-16px font-bold p10px left-15% rounded-xl"
>
未提交：100
</div>
</template>
</div></el-col
>
<el-col :span="8" v-if="false"
><div class="time">
<div
class="text-#d3d2d2 text-18px font-bold absolute left-38% top-45%"
>
<span class="text-60px">6</span>月
</div>
</div></el-col
>
</el-row>
<el-row :gutter="10" v-if="false">
<el-col :span="8"
><div class="time">
<div
class="text-#d3d2d2 text-18px font-bold absolute left-38% top-45%"
>
<span class="text-60px">7</span>月
</div>
</div></el-col
>
<el-col :span="8"
><div class="time">
<div
class="text-#d3d2d2 text-18px font-bold absolute left-38% top-45%"
>
<span class="text-60px">8</span>月
</div>
</div></el-col
>
<el-col :span="8"
><div class="times">
<!-- <div class="text-#d3d2d2 text-18px font-bold absolute left-38% top-45%"><span class="text-60px">9</span>月</div> -->
<div
class="text-#fff text-18px font-bold absolute left-40% top-24px"
>
<span class="text-24px">9</span>月
</div>
<div
class="bg-#fff w-140px absolute top-70px text-#A0C6B5 text-18px font-bold p10px left-10% rounded-xl"
>
已提交：45
</div>
<div
class="bg-#fff w-140px absolute top-110px text-red text-18px font-bold p10px left-10% rounded-xl"
>
未提交：100
</div>
</div></el-col
>
</el-row>
<el-row :gutter="10" v-if="false">
<el-col :span="8"
><div class="time">
<div
class="text-#d3d2d2 text-18px font-bold absolute left-30% top-45%"
>
<span class="text-60px">10</span>月
</div>
</div></el-col
>
<el-col :span="8"
><div class="time">
<div
class="text-#d3d2d2 text-18px font-bold absolute left-30% top-45%"
>
<span class="text-60px">11</span>月
</div>
</div></el-col
>
<el-col :span="8"
><div class="time">
<div
class="text-#d3d2d2 text-18px font-bold absolute left-30% top-45%"
>
<span class="text-60px">12</span>月
</div>
</div></el-col
>
</el-row>
<el-row :gutter="10" v-if="false">
<el-col :span="8"
><div class="time">
<div
class="text-#d3d2d2 text-18px font-bold absolute left-38% top-45%"
>
<span class="text-60px">1</span>月
</div>
<template v-if="false">
<div
class="bg-#fff w-120px absolute top-70px text-#A0C6B5 text-16px font-bold p10px left-15%"
>
已提交：45
</div>
<div
class="bg-#fff w-120px absolute top-110px text-red text-16px font-bold p10px left-15%"
>
未提交：100
</div>
</template>
</div></el-col
>
<el-col :span="8"
><div class="time">
<div
class="text-#d3d2d2 text-18px font-bold absolute left-38% top-45%"
>
<span class="text-60px">2</span>月
</div>
</div></el-col
>
<el-col :span="8"
><div class="time">
<div
class="text-#d3d2d2 text-18px font-bold absolute left-38% top-45%"
>
<span class="text-60px">3</span>月
</div>
</div></el-col
>
</el-row>
</div>
</div>
<div class="cards">
<div class="cards_title relative">
未提交供应商明细({{ query.year }}年{{ selMonth }})
</div>
<div
class="absolute top-24px !text-18px right-20px pt30px text-#4E7EE8"
>
<span class="text-#ababab">更新时间：{{ updateTime }}</span>
</div>
<div
ref="msgScoll"
class="px20px w-full h800px cent_box overflow-y-auto mt-12px"
>
<div
v-if="csrSupplierList?.length"
class="text-18px text-#808696 bg-#F4F8FF items-center flex py10px rd-5px mt10px"
v-for="(i, key) in csrSupplierList"
:key="key"
>
<div class="truncate2" @click="">
<span
class="text-#fff bg-#407DF1 px8px rounded-1/2 mr-5px inlineFlex"
>{{ ++key }}</span
>
<span>{{ i.supplierName }} </span>
</div>
<div class="min-w130px max-w130px text-#000">
{{ i.submitunCount }}次未提交
</div>
<!-- <div class="min-w150px max-w150px text-#000">{{++key}}月未提交</div> -->
<span class="absolute right-10px top-18px">
<!-- 暂不开发 12-03 -->
<!-- <el-button>提醒</el-button> -->
</span>
</div>
<div v-else class="py10px rd-5px mt100px">
<el-empty description="该月份下供应商全部提交" :image-size="300" />
</div>
</div>
</div>
</div>
<div class="cards_title relative">未提交供应商明细({{query.year}}年{{ selMonth }})</div>
<div class="absolute top-24px !text-18px right-20px pt30px text-#4E7EE8 ">
<span class="text-#ababab">更新时间：{{ updateTime }}</span>
</div>
<div ref="msgScoll" class="px20px w-full h800px cent_box overflow-y-auto mt-12px">
<div v-if=" csrSupplierList?.length" class=" text-18px text-#808696 bg-#F4F8FF items-center flex py10px rd-5px mt10px" v-for="(i, key) in csrSupplierList" :key="key">
<div class="truncate2" @click="">
<span class="text-#fff bg-#407DF1 px8px rounded-1/2 mr-5px inlineFlex">{{ ++key }}</span>
<span>{{i.supplierName}} </span>
</div>
<div class="min-w130px max-w130px text-#000">{{i.submitunCount}}次未提交</div>
<!-- <div class="min-w150px max-w150px text-#000">{{++key}}月未提交</div> -->
<span class="absolute right-10px top-18px">
<!-- 暂不开发 12-03 -->
<!-- <el-button>提醒</el-button> -->
</span>
</div>
<div v-else class="py10px rd-5px mt100px">
<el-empty description="该月份下供应商全部提交" :image-size="300" />
</div>
</div>
</div>
</div>
<!-- </AppBlock> -->
</div>
<!-- </AppBlock> -->
</div>
</template>
<style scoped lang="less">
.cards {
width: 49%;
height: 100%;
border-radius: 18px;
background-color: #ffffff;
box-shadow: 1px 2px 12px rgba(14, 86, 221, 0.32);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 49%;
height: 100%;
border-radius: 18px;
background-color: #ffffff;
box-shadow: 1px 2px 12px rgba(14, 86, 221, 0.32);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.time{
width: 175px;
height: 175px;
background: url('@/assets/images/A2@2x.png');
background-size: cover;
.time {
width: 175px;
height: 175px;
background: url('@/assets/images/A2@2x.png');
background-size: cover;
}
.times{
width: 175px;
height: 175px;
background: url('@/assets/images/A1@2x.png');
background-size: cover;
.times {
width: 175px;
height: 175px;
background: url('@/assets/images/A1@2x.png');
background-size: cover;
}
.cards_title {
flex-shrink: 0;
font-size: 26px;
color: #142142;
padding: 20px;
margin-left: 20px;
font-weight: bold;
padding-bottom: 0;
&::before {
content: " ";
display: block;
width: 8px;
height: 30px;
background-color: #003ab5;
flex-shrink: 0;
font-size: 26px;
color: #142142;
padding: 20px;
margin-left: 20px;
font-weight: bold;
padding-bottom: 0;
position: absolute;
left: 0;
}
&::before {
content: ' ';
display: block;
width: 8px;
height: 30px;
background-color: #003ab5;
position: absolute;
left: 0;
}
}
.truncate2 {
max-width:360px;
min-width:360px;
overflow: hidden;
padding: 5px 10px;
line-height: 30px;
text-overflow: ellipsis;
white-space: nowrap;
color: #142142;
cursor: pointer;
max-width: 360px;
min-width: 360px;
overflow: hidden;
padding: 5px 10px;
line-height: 30px;
text-overflow: ellipsis;
white-space: nowrap;
color: #142142;
cursor: pointer;
a {
text-decoration: none
}
a {
text-decoration: none;
}
}
:deep{
.el-empty__description > p{
font-size: 28px !important;
}
:deep {
.el-empty__description > p {
font-size: 28px !important;
}
}
</style>

1046
src/views/home/csr/modifyCSR2.vue
View File

File diff suppressed because it is too large Load Diff

48
src/views/home/database/Process.vue
View File

@ -16,7 +16,7 @@ import {
} from '@/api/daikin/base'
import { noticeld } from '@/stores/modules/noticeId'
import { databaseld } from '@/stores/modules/database'
import { NTag, useMessage, NModal } from 'naive-ui'
import { NTag, useMessage, NModal, NPopover } from 'naive-ui'
import { ArrowDown, Check, Close } from '@element-plus/icons-vue'
const store = noticeld()
const store2 = useUserStore()
@ -88,6 +88,10 @@ async function getPageList(cateId: any = database.database.id) {
const handleEditClick = async () => {
const row = { ...editObj.value }
if (!row) return
if (!row.cateId) {
message.error('所属类别不能为空！')
return
}
let url: any[] = []
if (row.fileList && row.fileList.length > 0) {
row.fileList.forEach((index: any) => {
@ -289,10 +293,17 @@ const CloseThiss = (data?: boolean) => {
// setUserList.value = []
}
const downloads = (data: any) => {
// downloadFile(data.filePath)
if (data && data.filePath) {
window.open(data.filePath)
// const arr = [1706, 1416, 1415, 1414, 1413, 1412, 1411, 1410, 1386, 1388, 1391]
const downloads = (data: any = {}) => {
const { fileCommon, filePath } = data
if ((fileCommon?.fileSize || 0) > 25 * 1024 * 1024) {
message.info('正在下载中，请稍等～')
downloadFile(filePath)
return
}
if (filePath) {
window.open(filePath)
// window.open("https://view.officeapps.live.com/op/view.aspx?src=" + encodeURIComponent(data.filePath))
} else {
message.info('没有可预览文件！')
@ -475,9 +486,29 @@ function getParentIds(id: number, list: any[] = tableData.value): any {
<!-- <el-button style="color: #000" @click="openUrl(row)"
>预览</el-button
> -->
<el-button style="color: #000" @click="downloads(row)"
>查看</el-button
>
<div class="inline-block">
<n-popover
trigger="hover"
placement="top-start"
v-if="(row.fileCommon?.fileSize || 0) > 25 * 1024 * 1024"
>
<template #trigger>
<el-button style="color: #000" @click="downloads(row)"
>查看</el-button
>
</template>
<span
>该文件超过25MB，无法进行预览，请点击 查看
进行下载！</span
>
</n-popover>
<el-button
v-else
style="color: #000"
@click="downloads(row)"
>查看</el-button
>
</div>
<el-dropdown
v-if="activeName === 1 && isDbReview"
trigger="click"
@ -508,6 +539,7 @@ function getParentIds(id: number, list: any[] = tableData.value): any {
<el-button
v-if="activeName > 2 && isDbUpload"
type="primary"
class="ml-16px"
@click="editClick(row)"
>
编辑</el-button

51
src/views/home/database/guize/index.vue
View File

@ -13,7 +13,10 @@ import {
fetchdbAuthGetInfo
} from '@/api/daikin/base'
import { useUserStore } from '@/stores/modules/user'
import { useMessage, NModal } from 'naive-ui'
import { useMessage, NModal, NPopover } from 'naive-ui'
import { isNotOneWeekAgo } from '@/utils'
// console.log('🚀 ~ isNotOneWeekAgo:', isNotOneWeekAgo('2024-1-16'))
const store: any = useUserStore()
const message = useMessage()
const userCode = ['admin', 'database_dandang'].includes(store.user.roleCode)
@ -75,17 +78,21 @@ async function getTree() {
// // message.error('下载文件出错：', error);
// }
// }
const arr = [1706, 1416, 1415, 1414, 1413, 1412, 1411, 1410, 1386, 1388, 1391]
async function downloads(row: any) {
console.log(row, '!!!!!!!!!!xiazai')
const { isSelect, filePath } = row
// console.log('xiazai', row)
const { isSelect, filePath, id, fileCommon } = row
if (isSelect === 2) {
message.info('没有访问权限')
return
}
// try{
// downloadFile(filePath)
// }catch(error){
// }
if (arr.includes(id) || (fileCommon?.fileSize || 0) > 25 * 1024 * 1024) {
try {
message.info('正在下载中，请稍等～')
downloadFile(filePath)
} catch (error) {}
}
// window.open(
// 'https://view.officeapps.live.com/op/view.aspx?src=' +
// encodeURIComponent(filePath)
@ -301,7 +308,15 @@ async function getAuth() {
<td
class="w20% h50px cursor-pointer overflow-hidden text-left pl25px truncate text-#000"
>
<span :title="it.title"> {{ it.title }}</span>
<div class="flex items-center truncate">
<img
v-if="isNotOneWeekAgo(it.createTime)"
src="@/assets/images/NEW.gif"
class="!h-20px !w-auto mr-2"
alt=""
/>
<span :title="it.title"> {{ it.title }}</span>
</div>
</td>
<td class="w20% h50px">{{ it.deptName }}</td>
<td class="w20% h50px">{{ it.parentDeptName }}</td>
@ -309,7 +324,25 @@ async function getAuth() {
<td class="w20% h50px">
<!-- <el-button style="color: #000;" @click="openUrl(it)">预览</el-button> -->
<!-- <el-button style="color: #000;" @click="downloads(it)">下载</el-button> -->
<el-button style="color: #000" @click="downloads(it)"
<n-popover
trigger="hover"
placement="top-start"
v-if="
arr.includes(it.id) ||
(it.fileCommon?.fileSize || 0) > 25 * 1024 * 1024
"
>
<template #trigger>
<el-button style="color: #000" @click="downloads(it)"
>查看</el-button
>
</template>
<span
>该文件超过25MB，无法进行预览，请点击 查看
进行下载！</span
>
</n-popover>
<el-button v-else style="color: #000" @click="downloads(it)"
>查看</el-button
>
</td>

95
src/views/home/database/index.vue
View File

@ -23,12 +23,17 @@ function menuHandler(menu: any, index: number) {
if (menu.childList && menu.childList.length > 0) {
activeItem.value = menu.childList[0].id
}
if (database.database.id == activeItem.value && onClic.value) {
onClic.value = false
} else {
onClic.value = !!menu.childList?.length
// onClic.value = !onClic.value
}
database.database.id = activeItem.value
goListPage()
}
function goChild(menu: any) {
activeItem.value = menu.id
console.log(menu.id)
database.database.id = menu.id
goListPage()
}
@ -52,17 +57,31 @@ async function getTree() {
// activeMenuKey.value = data[0].childList[0].id
// }
}
if (activeItem.value) {
const { topLevelItem, targetItem } = findItemById(data, activeItem.value)
if (topLevelItem && targetItem) {
const index = data.findIndex((i: any) => i.id === topLevelItem.id)
nextTick(() => {
onClic.value = true
menuHandler(topLevelItem, index === -1 ? 0 : index)
goChild(targetItem)
})
const { id } = route.query
if (id) {
const index = data.findIndex((i: any) => i.id == id)
if (index > -1) {
const item = data[index]
if (item) {
menuHandler(item, index)
// onClic.value = true
// titles.value = item.name
// activeMenuKey.value = item.id
// database.database.id = item.id
}
}
}
// if (activeItem.value) {
// const { topLevelItem, targetItem } = findItemById(data, activeItem.value)
// if (topLevelItem && targetItem) {
// const index = data.findIndex((i: any) => i.id === topLevelItem.id)
// nextTick(() => {
// onClic.value = true
// menuHandler(topLevelItem, index === -1 ? 0 : index)
// goChild(targetItem)
// })
// }
// }
}
getTree()
@ -100,7 +119,7 @@ function findItemById(
<div class="pt30px pb24px flex-1 pl20px bg-#fff">
<div
class="nav px36px py24px m10px mr0 rd-32px rd-r-0 flex flex-col text-#000 cursor-pointer"
class="nav px50px py24px m10px mr0 rd-32px rd-r-0 flex flex-col text-#000 cursor-pointer"
v-for="(m, index) in tableData"
:key="m.id"
:class="
@ -110,9 +129,9 @@ function findItemById(
>
<div
:class="activeMenuKey === m.id && 'onActive'"
class="flex"
@click="onClic = !onClic"
class="flex relative"
>
<!-- @click="!!m.childList?.length ? (onClic = !onClic) : ''" -->
<!-- <img v-if="activeMenuKey === m.id" :src="m.icon1" class="w22px h22px mr16px mt--5px" />
<img v-else :src="m.icon" class="w22px h22px mr16px mt--5px" /> -->
<!-- lujinli -->
@ -127,6 +146,12 @@ function findItemById(
/>
<CaretBottom v-else /> </el-icon
></span>
<img
v-if="m.isSelFlag == 1"
src="@/assets/images/NEW.gif"
class="!h-20px !w-auto absolute left-[-46px] top-[50%] translate-y-[-50%]"
alt=""
/>
</span>
</div>
@ -165,22 +190,31 @@ function findItemById(
@click.stop="goChild(ite)"
@click="activeItem = ite.id"
>
<n-popover trigger="hover" placement="top-start">
<template #trigger>
<span
class="text-18px flex childs font-900 truncate"
:class="activeItem === ite.id ? 'text-#002fa7' : ''"
>{{ ite.name }}</span
>
</template>
<div class="text-18px leading-40px">
{{ ite.name }}
</div>
</n-popover>
<div class="relative">
<n-popover trigger="hover" placement="top-start">
<template #trigger>
<span
class="text-18px flex childs font-900 truncate"
:class="activeItem === ite.id ? 'text-#002fa7' : ''"
>{{ ite.name }}</span
>
</template>
<div class="text-18px leading-40px">
{{ ite.name }}
</div>
</n-popover>
<img
@click="activeItem = ite.id"
v-if="ite.isSelFlag === 1 && !ite.childList?.length"
src="@/assets/images/NEW.gif"
class="!h-20px !w-auto mr-1 absolute left-[-46px] top-[50%] translate-y-[-50%]"
alt=""
/>
</div>
<div v-if="ite.childList && idx == index" class="pl10px">
<div
class="my20px py-10px pl10px text-#000"
class="my20px py-10px pl10px text-#000 relative"
v-for="(it, ind) in ite.childList"
:key="item.id"
@click.stop="goChild(it)"
@ -198,6 +232,13 @@ function findItemById(
{{ it.name }}
</div>
</n-popover>
<img
@click="activeItem = it.id"
v-if="it.isSelFlag == 1"
src="@/assets/images/NEW.gif"
class="!h-20px !w-auto mr-1 absolute left-[-36px] top-[50%] translate-y-[-50%]"
alt=""
/>
</div>
</div>
</div>
@ -285,7 +326,7 @@ function findItemById(
background-color: #e6ecff;
border-radius: 32px 0 0 32px;
padding: 24px 36px 24px 36px;
padding: 24px 36px 24px 50px;
}
}
}

39
src/views/home/database/modify.vue
View File

@ -272,7 +272,6 @@
<el-tab-pane label="权限管理" name="three" v-if="userCode">
<div class="h-52px">
<el-button
v-if="isDbReview || isDbUpload"
type="primary"
@click="handleAuthClick('add')"
class="mb-20px"
@ -400,7 +399,7 @@
width="180px"
>
<template #default="scope">
<div v-if="userCode">
<div>
<el-button
type="primary"
@click="handleAuthClick('edit', scope.row)"
@ -436,8 +435,8 @@
v-model:page-size="pageInfo.pageSize"
layout="prev, pager, next, jumper"
:total="pageInfo.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@size-change="getAuth"
@current-change="getAuth"
/>
</div>
</el-tab-pane>
@ -486,10 +485,10 @@
<el-form-item label="查看范围">
<el-button
class="button"
@click="getUser"
:type="userData ? 'success' : ''"
:icon="userData ? 'Check' : ''"
>{{ userData ? '已设置' : '设置' }}</el-button
@click="() => getUser(editB)"
:type="editB.userList?.length ? 'success' : ''"
:icon="editB.userList?.length ? 'Check' : ''"
>{{ editB.userList?.length ? '已设置' : '设置' }}</el-button
>
</el-form-item>
@ -530,7 +529,7 @@
<el-form-item label="上传人员" class="w-300px">
<el-button
class="button"
@click="getUser({ userList: uploadIds, key: 'uploadIds' })"
@click="() => getUser({ userList: uploadIds, key: 'uploadIds' })"
:type="authModel.uploadIds?.length ? 'success' : ''"
:icon="authModel.uploadIds?.length ? 'Check' : ''"
>{{ authModel.uploadIds?.length ? '已设置' : '设置' }}</el-button
@ -540,7 +539,7 @@
<el-form-item label="审核人员" class="w-300px">
<el-button
class="button"
@click="getUser({ userList: reviewIds, key: 'reviewIds' })"
@click="() => getUser({ userList: reviewIds, key: 'reviewIds' })"
:type="authModel.reviewIds?.length ? 'success' : ''"
:icon="authModel.reviewIds?.length ? 'Check' : ''"
>{{ authModel.reviewIds?.length ? '已设置' : '设置' }}</el-button
@ -746,7 +745,8 @@ async function addClickA(row: any) {
shomkA.value = false
getTree()
}
const editClickB = (edit: any, obj: any = {}) => {
const editClickB = (edit: any, data: any = {}) => {
const obj = JSON.parse(JSON.stringify(data))
if (edit === 'add' && obj && obj.id) {
editB.value = {
title: '',
@ -818,7 +818,6 @@ const deleteClickB = async (row: any) => {
getInfo('')
}
async function addClickB(row: any) {
console.log(row, deptId.value)
if (!row) return
let url: any[] = []
if (row.fileList && row.fileList.length > 0) {
@ -841,6 +840,10 @@ async function addClickB(row: any) {
})
row.userIdList = list
}
// if (row.userIdList?.length > 0) {
// row.userIdList = row.userIdList.join(',')
// }
// console.log('🚀 ~ row:', row)
if (!row.cateId) {
message.error('所属类别不能为空！')
return
@ -922,9 +925,11 @@ const handleChild = async (data: any) => {
console.log(data, 444)
const { showModal: show, multipleSelection } = data
showModal.value = unref(show) || false
let userIdList: any[] = []
multipleSelection.value.forEach((i: { userId: any }) => {
let userIdList: any[] = [],
userList: any = []
multipleSelection.value.forEach((i: { userId: any; nickName: string }) => {
userIdList.push(i.userId)
userList.push({ nickName: i.nickName, userId: i.userId })
})
if (authModel.value && selSetAuthKey.value) {
authModel.value[selSetAuthKey.value] = userIdList
@ -952,6 +957,7 @@ const handleChild = async (data: any) => {
console.log(flg.value)
}
editB.value.userIdList = userIdList
editB.value.userList = userList
if (userIdList.length > 0) {
userData.value = true
console.log(userIdList, 8888)
@ -1026,8 +1032,11 @@ const setReview = ref(false)
const hasReview = ref(false)
async function getAuth() {
if (!cateIds.value) return
const { pageSize, currentPage } = pageInfo
const { rows: data = [] }: any = await fetchdbAuthGetInfo({
cateId: cateIds.value
cateId: cateIds.value,
pageSize,
pageNum: currentPage
// type: 1
})
// 所有的上传者 和 审核者

1519
src/views/home/diffspace/Overview.vue
View File

File diff suppressed because it is too large Load Diff

1493
src/views/home/diffspace/fack.vue
View File

File diff suppressed because it is too large Load Diff

270
src/views/home/footprint/index.vue
View File

@ -8,12 +8,17 @@ import {
fetchPostList,
fetchmoduleStatInternalPage,
fetchInternalUserStat,
deptTree as fetchDeptTree
deptTree as fetchDeptTree,
userDetailExport,
getDepartData,
getPieChartData,
getDepartChart
} from '@/api/daikin/base'
import { formatDate } from '@/utils/format'
import { Chart1 } from './indexData'
import { Search } from '@element-plus/icons-vue'
import { NModal } from 'naive-ui'
import { Chart1, barEchart, pieEchart } from './indexData'
import { Search, Download } from '@element-plus/icons-vue'
import { NModal,useMessage } from 'naive-ui'
const message = useMessage()
const currentDate = new Date()
const currentDates = new Date()
const value1 = ref<[Date, Date]>([
@ -27,11 +32,11 @@ const states = reactive<any>({
})
const chartRef1 = ref()
const chartRef2 = ref()
const chartOption1 = ref({})
const chartOption1 = ref<any>({})
const chartOption2 = ref({})
const primary = ref(1)
const primarys = ref(2)
const activeName = ref('inside')
const activeName = ref('echart')
const pageInfo = reactive({
currentPage: 1,
pageSize: 10,
@ -66,6 +71,7 @@ const outDetail = ref([])
const postId = ref<any>([])
const nickName = ref()
const postList = ref<any>([])
const showEchart = ref(true)
const barOption = {
width: '100%',
height: '100%',
@ -128,11 +134,27 @@ const barOption = {
]
}
const itemDataList = ref<any>([])
const barChartRef = ref<any>(null)
const barChartOption = ref<any>({})
const pieChartRef = ref<any>(null)
const pieChartOption = ref<any>({})
const departData = ref<any>([])
const visitType = ref('1')
const externalList = ref<any>([])
const externalObj = ref<any>({})
const colorListObj = ref<any>({})
const dataList = ref([])
const getPostList = async () => {
const res: any = await fetchPostList()
postList.value = res.data || []
}
const state = reactive<any>({
startTime: formatDate(value1.value[0]).substring(0, 10),
endTime: formatDate(value1.value[1]).substring(0, 10)
// timeType:1
})
const getInsideListPage = async () => {
const res: any = await fetchmoduleStatInternalPage({
postId: postId.value,
@ -157,9 +179,40 @@ const getListPage = async () => {
pageInfo.total = res?.total || 0
}
const getBarEchart = async () => {
const res = await getDepartChart({ ...state, visitType: visitType.value })
barChartOption.value = barEchart(res.data || {})
}
const getPieEchart = async () => {
const res = await getPieChartData({ ...state, visitType: visitType.value })
pieChartOption.value = pieEchart(res.data || [], unref(colorListObj))
}
const getEchartTable = async (moduleCode = '') => {
const { currentPage, pageSize } = pageInfo
const res = await getDepartData({
...state,
visitType: visitType.value,
pageNum: currentPage,
pageSize: pageSize,
moduleCode
})
departData.value = res.data || []
// res.data && res.data.length && getEchartTable(res.data[0].moduleCode)
}
const chartClick = (it: any) => {
const { _code } = it.data
getEchartTable(_code)
}
const getEchartData = async () => {
getBarEchart()
getPieEchart()
getEchartTable()
}
getPostList()
getListPage()
getInsideListPage()
// getListPage()
// getInsideListPage()
const clickButton = (id) => {
primary.value = id
@ -180,13 +233,6 @@ const timenFirsts = (value) => {
console.log(value)
}
const state = reactive<any>({
startTime: formatDate(value1.value[0]).substring(0, 10),
endTime: formatDate(value1.value[1]).substring(0, 10)
// timeType:1
})
const colorListObj = ref<any>({})
const dataList = ref([])
const getDat = async () => {
const { data } = await timeStat(state)
dataList.value = data
@ -212,7 +258,8 @@ const getDat = async () => {
},
type: 'bar'
}
getInternalUserStat(1)
barChartOption.value = barEchart(xAxisData, colorList)
getInternalUserStat(isLeaderFlag)
}
const deptId = ref('')
@ -283,8 +330,6 @@ async function getInternalUserStat(
})
}
const externalList = ref<any>([])
const externalObj = ref<any>({})
const getExternalTimeStat = async () => {
const { data } = await externalTimeStat(state)
externalList.value = data
@ -314,21 +359,40 @@ const getExternalTimeStat = async () => {
// chartOption2.value.height=3000
// chartOption2.value.width=1000
}
const handleClick = ({ paneName }: any, down: Boolean = false) => {
pageInfo.currentPage = 1
pageInfo.pageSize = 10
pageInfo.total = 0
paneName === 'echart' && getEchartData()
paneName === 'out' && getExternalTimeStat()
paneName === 'inside' && getDat()
paneName === 'out-detail' && getListPage()
paneName === 'inside-detail' && getInsideListPage()
paneName === 'inside' &&
setTimeout(() => {
showEchart.value = true
}, 300)
}
const ss = computed(() => [state.startTime, state.endTime, state.timeType])
watch(
() => unref(ss),
async (v) => {
console.log(state.type)
getDat()
getExternalTimeStat()
// getDat()
// getExternalTimeStat()
handleClick({ paneName: activeName.value })
},
{ immediate: true, deep: true }
)
onMounted(() => {
// getDat()
// console.log(formatDate(value1.value[0]).substring(0, 10))
})
// onBeforeMount(async () => {
// await getDat()
// await getExternalTimeStat()
// })
const shortcuts = [
{
text: '今天',
@ -402,14 +466,38 @@ const shortcuts = [
}
]
const handleClick = ({ paneName }: any) => {
pageInfo.currentPage = 1
pageInfo.pageSize = 10
pageInfo.total = 0
paneName === 'out' && getExternalTimeStat()
paneName === 'inside' && getDat()
paneName === 'out-detail' && getListPage()
paneName === 'inside-detail' && getInsideListPage()
const downloadExcel = (data: any, name: string) => {
const blob = new Blob([data], {
// type: 'application/vnd.ms-excel'
})
const downloadElement = document.createElement('a')
downloadElement.style.display = 'none'
const downloadUrl = URL.createObjectURL(blob)
downloadElement.href = downloadUrl
downloadElement.download = `${name}.xlsx`
document.body.appendChild(downloadElement)
downloadElement.click()
document.body.removeChild(downloadElement)
URL.revokeObjectURL(downloadUrl)
// if (navigator.userAgent.indexOf('Chrome') > -1) {
// window.open(downloadUrl)
// }
// if (navigator.userAgent.indexOf('Firefox') > -1) {
// window.open(URL.createObjectURL(blob))
// }
}
const downExcel = async () => {
const res = await userDetailExport({
...state,
visitType: activeName.value === 'inside-detail' ? 1 : 2
})
let name = activeName.value === 'inside-detail' ? '本部足迹' : '外部足迹'
name = name + state.startTime + '-' + state.endTime
if (res.code === 200) {
downloadExcel(res.data, name)
return message.success('导出成功！')
}
}
const selValue = ref('')
@ -487,7 +575,11 @@ getdeptTree()
<span class="text-#000 mr-10px">日期: </span>
<div class="max-w-350px flex items-center">
<el-date-picker
v-if="['inside', 'out', 'inside-detail'].includes(activeName)"
v-if="
['inside', 'out', 'inside-detail', 'echart', 'out-detail'].includes(
activeName
)
"
v-model="value1"
type="daterange"
range-separator="到"
@ -506,6 +598,12 @@ getdeptTree()
clearable
/>
</div>
<div class="mx-4 flex items-center" v-if="'echart' === activeName">
<el-select v-model="visitType" placeholder="本部/外部">
<el-option label="本部足迹" value="1" />
<el-option label="外部部足迹" value="2" />
</el-select>
</div>
<div
class="mx-4 flex items-center"
v-if="['inside-detail', 'out-detail'].includes(activeName)"
@ -561,10 +659,19 @@ getdeptTree()
type="primary"
:icon="Search"
size="small"
class="ml20px mt--5px"
class="ml20px"
@click="handleClick({ paneName: activeName })"
>搜索</el-button
>
<el-button
v-if="activeName === 'out-detail' || activeName === 'inside-detail'"
type="warning"
:icon="Download"
size="small"
class="!ml40px"
@click="downExcel"
>导出 Excel</el-button
>
<template v-if="activeName !== 'inside' && false">
<el-select
v-model="selValue"
@ -588,6 +695,77 @@ getdeptTree()
@click="clickButton(3)">本月</el-button> -->
</div>
<el-tabs class="mt-20px" v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="足迹可视化图表" name="echart">
<div class="h-720px overflow-auto w-full">
<div class="flex">
<div class="w-50% h-720px mb-30px">
<VChart
@click="chartClick"
key="bar"
ref="barChartRef"
:option="pieChartOption"
autoresize
/>
</div>
<div class="h-720px w50%">
<div class="w100% h-full overflow-auto">
<el-table
:data="departData"
style="width: 100%; margin-bottom: 20px; height: 700px"
row-key="id"
border
default-expand-all
:header-cell-style="{
background: '#2A7BF7',
color: '#fff',
height: '60px',
lineHeight: '60px',
textAlign: 'center',
'font-size': '24px'
}"
:cell-style="{
'text-align': 'center',
'overflow-y': 'auto',
height: '60px'
}"
>
<el-table-column prop="moduleName" label="模块名称" />
<el-table-column
prop="deptName"
label="职位名称"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
label="访问次数"
prop="visitCount"
show-overflow-tooltip
/>
</el-table>
</div>
<!-- <div class="absolute bottom-2px right-30px z-20 bg-#fff">
<el-pagination
v-model:current-page="pageInfo.currentPage"
v-model:page-size="pageInfo.pageSize"
layout="prev, pager, next, jumper"
:total="pageInfo.total"
@size-change="getInsideListPage"
@current-change="getInsideListPage"
/>
</div> -->
</div>
</div>
<div class="w-full h-720px mt-30px">
<VChart
key="yyyxx"
ref="pieChartRef"
:option="barChartOption"
autoresize
/>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="本部足迹" name="inside">
<div class="overflow-auto h-720px">
<div class="mt20px w-full">
@ -618,7 +796,13 @@ getdeptTree()
</div>
</div> -->
<div class="w-full h-400px mt-10px">
<VChart key="yyy" ref="chartRef1" :option="chartOption1" />
<VChart
key="yyy"
ref="chartRef1"
:option="chartOption1"
v-if="showEchart"
autoresize
/>
</div>
<div class="mt-30px">
<div class="flex items-center">
@ -662,16 +846,16 @@ getdeptTree()
>
</div>
<div class="pb-14px">
<div class="flex flex-wrap mb-30px">
<div class="flex justify-between flex-wrap mb-30px">
<div
class="m-4 flex items-center justify-between w-45% h-full"
v-for="(item, i) in itemDataList"
:key="i"
>
<div class="flex items-center text-#000 text-18px">
<p class="text-bold text-40px mr-15px w-80px">
<!-- <p class="text-bold text-40px mr-15px w-80px">
{{ sortArr[item.sortNum - 1] || item.sortNum + 'TH' }}
</p>
</p> -->
<div class="mx-10px flex-col items-center">
<img
v-if="item.sex == 1"
@ -688,7 +872,12 @@ getdeptTree()
<p class="text-center mt-20px">{{ item.nickName }}</p>
</div>
</div>
<VChart class="h-300px w-65% ml-auto" :option="item" />
<VChart
class="h-300px w-85% ml-auto"
:option="item"
v-if="showEchart"
autoresize
/>
</div>
</div>
<div class="absolute bottom-2px right-30px z-20 bg-#fff">
@ -847,7 +1036,12 @@ getdeptTree()
<div class="mt10px w-full">
<div class="w-full h-400px">
<VChart key="xxxx" ref="chartRef2" :option="chartOption2" />
<VChart
key="xxxx"
ref="chartRef2"
:option="chartOption2"
autoresize
/>
</div>
</div>
</div>

265
src/views/home/footprint/indexData.ts
View File

@ -1,26 +1,25 @@
import {timeStat } from '@/api/daikin/base'
import { timeStat } from '@/api/daikin/base'
import type { EChartsOption } from 'echarts'
import * as echarts from 'echarts'
import {formatDate} from '@/utils/format'
import { formatDate } from '@/utils/format'
const currentDate = new Date();
const currentDates = new Date();
const currentDate = new Date()
const currentDates = new Date()
const value1 = ref<[Date, Date]>([
currentDate.setMonth(currentDate.getMonth() ),
new Date()
currentDate.setMonth(currentDate.getMonth()),
new Date()
])
const value2 = ref<[Date, Date]>([
currentDates.setMonth(currentDates.getMonth() ),
new Date()
currentDates.setMonth(currentDates.getMonth()),
new Date()
])
const states = reactive<any>({
startTime:formatDate(value1.value[0]).substring(0,10),
endTime: formatDate(value1.value[1]).substring(0,10),
// timeType:2,
startTime: formatDate(value1.value[0]).substring(0, 10),
endTime: formatDate(value1.value[1]).substring(0, 10)
// timeType:2,
})
// export function Chart1() {
// const chartRef = ref()
@ -63,7 +62,7 @@ const states = reactive<any>({
// data: siomesData,
// color: '#8F97F8',
// type: 'bar',
// }
// ]
// }
@ -122,3 +121,243 @@ export function Chart1(xAxisData: any = [], color = []) {
return { ...option }
}
export function pieEchart(arr: any = [], colorList: any = {}) {
console.log('🚀 ~ colorList:', colorList)
const color: any = []
const data = arr.map((item: any) => {
color.push(colorList[item.moduleCode])
console.log('🚀 ~ item.moduleCode:', item.moduleCode)
return {
name: item.moduleName,
value: item.visitCount,
_code: item.moduleCode
}
})
return {
// color,
title: {
text: '各模块登录占比',
left: 'center',
textStyle: {
fontSize: 30
},
top: 20
},
grid: {
left: '0',
top: 0,
right: '0',
bottom: '2%',
containLabel: true
},
tooltip: {
trigger: 'item',
textStyle: {
fontSize: 24
},
formatter: function (params: any) {
// const title = `<p>${params.seriesName}</p>`
const colorDot =
'<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:' +
params.color +
'"></span>'
return colorDot + params.name + ': ' + params.percent + '%'
}
},
legend: {
// orient: 'vertical',
// left: 'left'
// type: 'warp',
bottom: '3%',
// left: '30%',
width: '78%',
textStyle: {
fontSize: 24,
borderRadius: 0
},
itemWidth: 24,
itemHeight: 24
},
series: [
{
name: '',
type: 'pie',
radius: '60%',
data: data,
label: {
// show: false,
position: 'inside',
// formatter: '{b}-{c}%',
formatter: function (params: any) {
return params.percent < 10
? params.percent + '%'
: params.name + ' ' + params.percent + '%'
},
fontSize: 20,
color: '#fff'
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
}
// data:{
// '科室':['科室一','科室二','科室三'],
// 'HP访问次数':['科室一访问次数','科室二访问次数','科室三访问次数'],
// '平均活跃度（人员平均访问次数）':['科室一平均活跃度','科室二平均活跃度','科室三平均活跃度'],
// }
export function barEchart({ deptName = [], visitCount = [], avgCount = [] }) {
return {
// width: '100%',
title: {
text: '调达本部各科室HP登录情况(内部足迹)',
left: 'center',
textStyle: {
fontSize: 30
},
top: 10
},
grid: {
left: '4%',
top: '10%',
right: '4%',
bottom: '10%',
containLabel: true
},
tooltip: {
trigger: 'axis'
// axisPointer: {
// type: 'cross',
// crossStyle: {
// color: '#999'
// }
// }
},
legend: {
data: [
{
name: 'HP访问次数',
itemStyle: {
// color: '#f8cbad',
borderWidth: 0
},
textStyle: {
fontSize: 18
}
},
{
name: '平均活跃度（人员平均访问次数）',
itemStyle: {
// color: '#acc1fb',
borderWidth: 0
},
textStyle: {
fontSize: 18
}
}
],
// data: ['HP访问次数', '平均活跃度（人员平均访问次数）'],
bottom: '0px'
},
xAxis: [
{
type: 'category',
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data: deptName,
axisPointer: {
type: 'shadow'
},
axisLabel: {
interval: 0,
rotate: 45,
fontSize: 18
}
}
],
yAxis: [
{
type: 'value',
name: 'HP访问次数',
// min: 0,
// max: 250,
// interval: 50,
axisLabel: {
formatter: '{value}'
},
nameTextStyle: {
fontSize: 18
},
nameRotate: 90,
nameGap: '60',
nameLocation: 'middle'
},
{
type: 'value',
name: '平均活跃度（人员平均访问次数）',
// min: 0,
// max: 25,
// interval: 5,
axisLabel: {
formatter: '{value}'
},
splitLine: {
show: false
},
nameTextStyle: {
fontSize: 18
},
nameRotate: 90,
nameGap: '46',
nameLocation: 'middle'
// axisLine: {
// lineStyle: {
// color: '#f7c455'
// }
// }
}
],
series: [
{
name: 'HP访问次数',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ''
}
},
// data: [
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
// ]
data: visitCount
// color: '#5b9bd5'
},
{
name: '平均活跃度（人员平均访问次数）',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + ''
}
},
// data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
data: avgCount,
smooth: true,
color: '#ed7d31'
}
]
// emphasis: {
// itemStyle: {
// shadowBlur: 10,
// shadowOffsetX: 0,
// shadowColor: 'rgba(0, 0, 0, 0.5)'
// }
// }
}
}

454
src/views/home/intelligence/Detail.vue
View File

@ -1,167 +1,167 @@
<!-- 外部情报 > 情报详情 -->
<script setup lang="ts">
import AppBlock from "@/components/AppBlock.vue";
import AppNewsBox from "@/components/AppNewsBox.vue";
import Layout from "./components/Layout.vue";
import DetailNews from "./DetailNews.vue";
import AppBlock from '@/components/AppBlock.vue'
import AppNewsBox from '@/components/AppNewsBox.vue'
import Layout from './components/Layout.vue'
import DetailNews from './DetailNews.vue'
import {
getArticleDetail,
getArticlePage,
getManagerDetail,
} from "@/api/daikin/base";
import { message } from "@/utils/message";
getArticleDetail,
getArticlePage,
getManagerDetail
} from '@/api/daikin/base'
import { message } from '@/utils/message'
const { push } = useRouter();
const route = useRoute();
const { push } = useRouter()
const route = useRoute()
const SideNews = [
{ key: "IntelligenceOutside", name: "社外情报" },
{ key: "IntelligenceWithin", name: "社内情报" },
];
{ key: 'IntelligenceOutside', name: '社外情报' },
{ key: 'IntelligenceWithin', name: '社内情报' }
]
const state = ref<any>({});
const state = ref<any>({})
async function getData() {
const { id, flag } = route.params;
console.log(typeof(flag))
if (!id) return;
if (flag==='true') {
// 驳回&撤回
const { data } = await getManagerDetail(id as string);
data.tagColor = data.tag === "紧急" ? "#e60e0e" : "#2cba06";
data.content = unescapeHTML(data.content);
state.value = data;
} else {
const { data } = await getArticleDetail(id as string);
data.tagColor = data.tag === "紧急" ? "#e60e0e" : "#2cba06";
const { id, flag } = route.params
console.log(typeof flag)
if (!id) return
if (flag === 'true') {
// 驳回&撤回
const { data } = await getManagerDetail(id as string)
data.tagColor = data.tag === '紧急' ? '#e60e0e' : '#2cba06'
data.content = unescapeHTML(data.content)
state.value = data
} else {
const { data } = await getArticleDetail(id as string)
data.tagColor = data.tag === '紧急' ? '#e60e0e' : '#2cba06'
data.content = unescapeHTML(data.content);
state.value = data;
}
data.content = unescapeHTML(data.content)
state.value = data
}
}
function unescapeHTML(html: string) {
const doc = new DOMParser().parseFromString(html, "text/html");
return doc.documentElement.textContent;
const doc = new DOMParser().parseFromString(html, 'text/html')
return doc.documentElement.textContent
}
async function getDatas(id: string) {
if (!id) return;
const { data } = await getArticleDetail(id as string);
data.content = unescapeHTML(data.content);
state.value = data;
if (!id) return
const { data } = await getArticleDetail(id as string)
data.content = unescapeHTML(data.content)
state.value = data
}
async function toDetail2(n: { id: any }) {
console.log(route, route.path, n.id);
if (n.id === 0) return;
if (n.isSelect === 1) {
getDatas(n.id);
} else {
message.info("您没有权限查看！");
}
console.log(route, route.path, n.id)
if (n.id === 0) return
if (n.isSelect === 1) {
getDatas(n.id)
} else {
message.info('您没有权限查看！')
}
}
getData();
getPageList(1);
getPageLists(1);
getData()
getPageList(1)
getPageLists(1)
const neiScoll = ref<HTMLElement | null>(null);
const waiScoll = ref<HTMLElement | null>(null);
const neiScoll = ref<HTMLElement | null>(null)
const waiScoll = ref<HTMLElement | null>(null)
onMounted(() => {
neiScoll.value?.addEventListener("scroll", handleNeiScoll);
waiScoll.value?.addEventListener("scroll", handlewaiScoll);
});
neiScoll.value?.addEventListener('scroll', handleNeiScoll)
waiScoll.value?.addEventListener('scroll', handlewaiScoll)
})
const listData = ref<any[]>([]);
let neiLength: number;
let neiPum = 1;
const listData = ref<any[]>([])
let neiLength: number
let neiPum = 1
async function getPageList(page) {
const pasr = {
pageNum: page,
pageSize: 6,
type: 2,
position: "recommend",
};
const { rows, total } = await getArticlePage(pasr);
neiLength = total / 6;
listData.value.push(...rows);
console.log(listData.value);
const pasr = {
pageNum: page,
pageSize: 5,
type: 2,
position: 'recommend'
}
const { rows, total } = await getArticlePage(pasr)
neiLength = total / 6
listData.value.push(...rows)
console.log(listData.value)
}
const listDatas = ref<any[]>([]);
let waiLength: number;
let waiPum = 1;
const listDatas = ref<any[]>([])
let waiLength: number
let waiPum = 1
async function getPageLists(page) {
const pasr = {
pageNum: page,
pageSize: 6,
type: 1,
position: "recommend",
};
const { rows, total } = await getArticlePage(pasr);
waiLength = total / 6;
listDatas.value.push(...rows);
const pasr = {
pageNum: page,
pageSize: 5,
type: 1,
position: 'recommend'
}
const { rows, total } = await getArticlePage(pasr)
waiLength = total / 6
listDatas.value.push(...rows)
}
const handleNeiScoll = () => {
const container = neiScoll.value;
if (container) {
const isAtBottom =
container.scrollHeight - container.scrollTop === container.clientHeight;
if (isAtBottom) {
if (neiPum < neiLength) {
++neiPum;
getPageList(neiPum);
}
}
}
};
const container = neiScoll.value
if (container) {
const isAtBottom =
container.scrollHeight - container.scrollTop === container.clientHeight
if (isAtBottom) {
if (neiPum < neiLength) {
++neiPum
getPageList(neiPum)
}
}
}
}
const handlewaiScoll = () => {
const container = waiScoll.value;
if (container) {
const isAtBottom =
container.scrollHeight - container.scrollTop === container.clientHeight;
if (isAtBottom) {
if (waiPum < waiLength) {
++waiPum;
getPageList(waiPum);
}
}
}
};
const container = waiScoll.value
if (container) {
const isAtBottom =
container.scrollHeight - container.scrollTop === container.clientHeight
if (isAtBottom) {
if (waiPum < waiLength) {
++waiPum
getPageList(waiPum)
}
}
}
}
</script>
<template>
<Layout>
<div class="page-wrap h-834px">
<div class="page-main">
<AppBlock class="h-full">
<div class="overflow-y-auto h-full">
<div class="px46px py40px">
<DetailNews
:title="state.title"
:content="state.content"
:publishTime="state.publishTime"
:tag="state.tag"
:tagColor="state.tagColor"
:source="state.source"
/>
</div>
</div>
</AppBlock>
</div>
<div class="page-side">
<AppBlock class="h-400px">
<div class="box h-full">
<div
class="box-title flex items-center"
@click="push({ name: 'IntelligenceWithin' })"
>
<span class="flex-1">社内情报</span>
<span>❯</span>
</div>
<div ref="neiScoll" class="box-content overflow-y-auto px22px">
<div class="py13px line" v-for="i in listData" :key="i">
<!-- <AppNewsBox @click="toDetail2(i)"
<Layout>
<div class="page-wrap h-834px">
<div class="page-main">
<AppBlock class="h-full">
<div class="overflow-y-auto h-full">
<div class="px46px py40px">
<DetailNews
:title="state.title"
:content="state.content"
:publishTime="state.publishTime"
:tag="state.tag"
:tagColor="state.tagColor"
:source="state.source"
/>
</div>
</div>
</AppBlock>
</div>
<div class="page-side">
<AppBlock class="h-400px">
<div class="box h-full">
<div
class="box-title flex items-center"
@click="push({ name: 'IntelligenceWithin' })"
>
<span class="flex-1">社内情报</span>
<span>❯</span>
</div>
<div ref="neiScoll" class="box-content overflow-y-auto px22px">
<div class="py13px line" v-for="i in listData" :key="i">
<!-- <AppNewsBox @click="toDetail2(i)"
class="!lh-2em"
:labelText="i.tag"
labelColor="#2cba06"
@ -169,40 +169,40 @@ const handlewaiScoll = () => {
:date="i.publishTime"
size="h20px"
/> -->
<div class="flex" @click="toDetail2(i)">
<img
v-if="i.tag === 'New'"
src="../../../assets/images/NEW3.gif"
class="h20px"
/>
<img
v-if="i.tag === '紧急'"
src="../../../assets/images/jj.gif"
class="h20px"
/>
<div class="ml5px leading-4.5 max-w300px overflow-ellipsis">
{{ i.title }}
</div>
</div>
<div class="text-#808696 text-right">{{ i.publishTime }}</div>
</div>
</div>
</div>
</AppBlock>
</div>
<div class="page-side">
<AppBlock class="h-400px">
<div class="box h-full">
<div
class="box-title flex items-center"
@click="push({ name: 'IntelligenceOutside' })"
>
<span class="flex-1">社外情报</span>
<span>❯</span>
</div>
<div ref="waiScoll" class="box-content overflow-y-auto px22px">
<div class="py13px line" v-for="i in listDatas" :key="i">
<!-- <AppNewsBox @click="toDetail2(i)"
<div class="flex" @click="toDetail2(i)">
<img
v-if="i.tag === 'New'"
src="../../../assets/images/NEW3.gif"
class="h20px"
/>
<img
v-if="i.tag === '紧急'"
src="../../../assets/images/jj.gif"
class="h20px"
/>
<div class="ml5px leading-4.5 max-w300px overflow-ellipsis">
{{ i.title }}
</div>
</div>
<div class="text-#808696 text-right">{{ i.publishTime }}</div>
</div>
</div>
</div>
</AppBlock>
</div>
<div class="page-side">
<AppBlock class="h-400px">
<div class="box h-full">
<div
class="box-title flex items-center"
@click="push({ name: 'IntelligenceOutside' })"
>
<span class="flex-1">社外情报</span>
<span>❯</span>
</div>
<div ref="waiScoll" class="box-content overflow-y-auto px22px">
<div class="py13px line" v-for="i in listDatas" :key="i">
<!-- <AppNewsBox @click="toDetail2(i)"
class="!lh-2em"
:labelText="i.tag"
labelColor="#2cba06"
@ -211,80 +211,80 @@ const handlewaiScoll = () => {
size="h20px"
/> -->
<div class="flex" @click="toDetail2(i)">
<img
v-if="i.tag === 'New'"
src="../../../assets/images/NEW3.gif"
class="h20px"
/>
<img
v-if="i.tag === '紧急'"
src="../../../assets/images/jj.gif"
class="h20px"
/>
<div class="ml5px leading-4.5 max-w300px overflow-ellipsis">
{{ i.title }}
</div>
</div>
<div class="text-#808696 text-right mt8px">
{{ i.publishTime }}
</div>
</div>
</div>
</div>
</AppBlock>
</div>
</div>
</Layout>
<div class="flex" @click="toDetail2(i)">
<img
v-if="i.tag === 'New'"
src="../../../assets/images/NEW3.gif"
class="h20px"
/>
<img
v-if="i.tag === '紧急'"
src="../../../assets/images/jj.gif"
class="h20px"
/>
<div class="ml5px leading-4.5 max-w300px overflow-ellipsis">
{{ i.title }}
</div>
</div>
<div class="text-#808696 text-right mt8px">
{{ i.publishTime }}
</div>
</div>
</div>
</div>
</AppBlock>
</div>
</div>
</Layout>
</template>
<style scoped lang="less">
.overflow-ellipsis {
white-space: nowrap; /* 防止换行 */
overflow: hidden; /* 隐藏溢出部分 */
text-overflow: ellipsis; /* 显示省略号 */
white-space: nowrap; /* 防止换行 */
overflow: hidden; /* 隐藏溢出部分 */
text-overflow: ellipsis; /* 显示省略号 */
}
.page-wrap {
display: grid;
grid-template-columns: 1fr 314px;
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 30px;
grid-row-gap: 30px;
display: grid;
grid-template-columns: 1fr 314px;
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 30px;
grid-row-gap: 30px;
.page-main {
height: 830px;
grid-area: 1 / 1 / 3 / 2;
width: 100%;
}
.page-side {
height: 100%;
grid-area: 1 / 2 / 2 / 3;
&:last-of-type {
height: 300px;
grid-area: 2 / 2 / 3 / 3;
}
}
.page-main {
height: 830px;
grid-area: 1 / 1 / 3 / 2;
width: 100%;
}
.page-side {
height: 100%;
grid-area: 1 / 2 / 2 / 3;
&:last-of-type {
height: 300px;
grid-area: 2 / 2 / 3 / 3;
}
}
}
.box {
--title-h: 58px;
--title-h: 58px;
border: 0;
.box-title {
height: var(--title-h);
color: #fff;
background-color: #537deb;
font-size: 18px;
font-weight: 600;
padding: 0 24px;
cursor: pointer;
}
.box-content {
height: 100%;
max-height: calc(100% - var(--title-h));
}
border: 0;
.box-title {
height: var(--title-h);
color: #fff;
background-color: #537deb;
font-size: 18px;
font-weight: 600;
padding: 0 24px;
cursor: pointer;
}
.box-content {
height: 100%;
max-height: calc(100% - var(--title-h));
}
}
.line {
border-bottom: 1px solid #eef3fb;
border-bottom: 1px solid #eef3fb;
}
</style>

123
src/views/home/intelligence/ListPageData.ts
View File

@ -1,81 +1,86 @@
import { getArticlePage } from '@/api/daikin/base'
import { pageType } from '@/stores/modules/pages'
const store =pageType()
const store = pageType()
export const Navs = [
{ key: 'IntelligenceOutside', name: '社外', type: '1' },
{ key: 'IntelligenceWithin', name: '社内', type: '2' },
{ key: 'IntelligenceOutside', name: '社外', type: '1' },
{ key: 'IntelligenceWithin', name: '社内', type: '2' }
]
export function useData() {
const route = useRoute()
const { push } = useRouter()
const route = useRoute()
const { push } = useRouter()
// const type = computed(() => Navs.find((i) => i.key === route.name)?.type)
// const type = computed(() => Navs.find((i) => i.key === route.name)?.type)
const state = reactive<any>({
pageNum: 1,
pageSize: 10,
total: 0,
cate: store.page.types,
})
const list = ref<any[]>([])
const state = reactive<any>({
pageNum: 1,
pageSize: 10,
total: 0,
cate: store.page.types || sessionStorage.getItem('types')
})
const list = ref<any[]>([])
async function getData() {
const { pageNum, pageSize, cate } = state
async function getData() {
const { pageNum, pageSize, cate } = state
if (!cate) return
if (!cate) return
const _type = ['1', '2', '3'].includes(String(cate)) ? '1' : '2'
const _type = ['1', '2', '3'].includes(String(cate)) ? '1' : '2'
list.value = []
state.total = 0
list.value = []
state.total = 0
const { rows, total } = await getArticlePage({ type: _type, cate, pageNum, pageSize })
const _rows = rows.map((i: any) => {
i.tagColor = i.tag === '紧急' ? '#e60e0e' : '#2cba06'
return i
})
console.log(rows)
list.value = rows
state.total = total
}
const { rows, total } = await getArticlePage({
type: _type,
cate,
pageNum,
pageSize
})
const _rows = rows.map((i: any) => {
i.tagColor = i.tag === '紧急' ? '#e60e0e' : '#2cba06'
return i
})
console.log(rows)
list.value = rows
state.total = total
}
// watch(
// () => route,
// async (r) => {
// await nextTick()
// const { pageNum, pageSize, cate } = r.query
// watch(
// () => route,
// async (r) => {
// await nextTick()
// const { pageNum, pageSize, cate } = r.query
// // state.cate = r.name == 'IntelligenceWithin' ? 4 : 1
// state.cate = Number(cate || 1)
// state.pageNum = Number(pageNum || 1)
// state.pageSize = Number(pageSize || 10)
// // console.log(12, state.cate, cate, pageNum)
// },
// { immediate: true, deep: true },
// )
// // state.cate = r.name == 'IntelligenceWithin' ? 4 : 1
// state.cate = Number(cate || 1)
// state.pageNum = Number(pageNum || 1)
// state.pageSize = Number(pageSize || 10)
// // console.log(12, state.cate, cate, pageNum)
// },
// { immediate: true, deep: true },
// )
const lazyState = computed(() => [state.pageNum, state.pageSize, state.cate])
watch(
() => unref(lazyState),
async (v) => {
// await nextTick()
// console.log(123, v)
const lazyState = computed(() => [state.pageNum, state.pageSize, state.cate])
watch(
() => unref(lazyState),
async (v) => {
// await nextTick()
// console.log(123, v)
// const url = location.pathname + '?cate=' + state.cate + '&pageNum=' + state.pageNum + '&pageSize=' + state.pageSize
// history.pushState({ url: url, title: document.title }, document.title, url)
// const url = location.pathname + '?cate=' + state.cate + '&pageNum=' + state.pageNum + '&pageSize=' + state.pageSize
// history.pushState({ url: url, title: document.title }, document.title, url)
const url = new URL(location as any)
url.searchParams.set('cate', state.cate)
url.searchParams.set('pageNum', state.pageNum)
url.searchParams.set('pageSize', state.pageSize)
history.replaceState({}, '', url)
const url = new URL(location as any)
url.searchParams.set('cate', state.cate)
url.searchParams.set('pageNum', state.pageNum)
url.searchParams.set('pageSize', state.pageSize)
history.replaceState({}, '', url)
getData()
},
{ immediate: true, deep: true },
)
getData()
},
{ immediate: true, deep: true }
)
return { state, list, getData }
return { state, list, getData }
}

378
src/views/home/intelligence/OverviewBlock.vue
View File

@ -9,113 +9,157 @@ import AppAlert from '@/components/AppAlert.vue'
import { pageType } from '@/stores/modules/pages'
import { message } from '@/utils/message'
const store =pageType()
const store = pageType()
import type { PropType } from 'vue'
const { push } = useRouter()
const routet = useRoute()
const props = defineProps({
route: String,
routets:String,
swipImgs: {
type: Array as PropType<any[]>,
default: () => [],
},
items: {
type: Array as PropType<any[]>,
default: () => [],
}
route: String,
routets: String,
swipImgs: {
type: Array as PropType<any[]>,
default: () => []
},
items: {
type: Array as PropType<any[]>,
default: () => []
}
})
let indexs = 3
const modules = [Autoplay, Pagination, Navigation, A11y]
const swipeActiveIndex = ref(0)
function handleIndex(x: any) {
swipeActiveIndex.value = x.realIndex
swipeActiveIndex.value = x.realIndex
}
const swipeRef = ref<any>(null)
const slideTo = async (index: any) => {
const swiper = unref(swipeRef)
if (!swiper) return
const swiper = unref(swipeRef)
if (!swiper) return
swiper.slideTo(index, 0)
swipeActiveIndex.value = index
swiper.slideTo(index, 0)
swipeActiveIndex.value = index
}
const setSwiperRef = (swiper: any) => {
swipeRef.value = swiper
swipeRef.value = swiper
}
const toDest = (id: any)=>{
store.page.types = id
// console.log(routet,routet.path)
push({name:props.route})
const toDest = (id: any) => {
store.page.types = id
sessionStorage.setItem('types', id)
// console.log(routet,routet.path)
push({ name: props.route })
}
const toDetail2 =(n)=>{
// console.log(n)
if(n.id===0) return
if(n.isSelect===1){
push(`${routet.path.replace('/Home','')}/${props.routets}/${n.id}`)
}
else{
message.error("没有访问权限")
}
const toDetail2 = (n) => {
// console.log(n)
if (n.id === 0) return
if (n.isSelect === 1) {
push(`${routet.path.replace('/Home', '')}/${props.routets}/${n.id}`)
} else {
message.error('没有访问权限')
}
}
</script>
<template>
<section v-if="swipImgs?.length" class="w640px h280px mt18px relative min-h280px">
<Swiper
@slideChangeTransitionEnd="handleIndex"
@swiper="setSwiperRef"
class="w-full h-full"
:slidesPerView="1"
:spaceBetween="30"
:loop="false"
:centeredSlides="true"
:autoplay="{ delay: 10000, disableOnInteraction: false }"
:navigation="false"
:modules="modules"
:route ="routet"
>
<template v-for="(item, index) in swipImgs" :key="index">
<SwiperSlide>
<img :src="item.bannerImg" alt="" @click="toDetail2(item)" class="w100%"/>
<div class="absolute w-full bg-#062910/60 h52px left-0 bottom-0 z-9 text-#fff flex px18px items-center">
<div class="text-ellipsis text-22px font-600 max-w480px" @click="toDetail2(item)" :title="item.title">{{ item.title }}</div>
</div>
</SwiperSlide>
<div class="absolute w-full h52px left-0 bottom-0 z-10 flex px18px items-center justify-end">
<div class="dots shrink-0 cursor-pointer">
<span :class="`dot ${swipeActiveIndex === idx && 'active'}`" v-for="(item, idx) in swipImgs" :key="item" @click="slideTo(idx)"></span>
</div>
</div>
</template>
</Swiper>
</section>
<section class="max-h-500px overflow-y-auto -webkit-scrollbar">
<div class="flex mt19px items min-h-140px" v-for="item in items" :key="item">
<div class="w100px h100px rd-20px flex-shrink flex flex-col justify-center items-center text-#fff" :style="{ backgroundColor: item.color }">
<img :src="item.icon" />
<span class="mt14px">{{ item.name }}</span>
</div>
<div class="flex flex-col flex-1 ml16px min-h-120px">
<template v-if="item.list.length>0">
<AppAlert class="flex cursor-pointer" cate="1">
<span v-if="item.list[0].isTop === 'Y'" class="flex-1 w0 truncate font-500" @click="toDetail2(item.list[0])" :title="item.list[0].source">{{ item.list[0].title }}</span>
<span class="flex-1 w0 truncate font-500" v-if="item.list[0].isTop === 'N'" ></span>
<img v-if="item.list[0].isTop === 'Y'" src="../../../assets/images/jj.gif" class="h27px mr5px mt3px">
<div class=" flex h40px lh-40px text-#fff text-18px">
<div class="pr40px cursor-pointer more text-14px" @click="toDest(item.key)">更多</div>
</div>
</AppAlert>
<div class="" v-for="(n, idx) in item.news" :key="n.title">
<!-- <div v-if="idx ==0">
<section
v-if="swipImgs?.length"
class="w640px h280px mt18px relative min-h280px"
>
<Swiper
@slideChangeTransitionEnd="handleIndex"
@swiper="setSwiperRef"
class="w-full h-full"
:slidesPerView="1"
:spaceBetween="30"
:loop="false"
:centeredSlides="true"
:autoplay="{ delay: 10000, disableOnInteraction: false }"
:navigation="false"
:modules="modules"
:route="routet"
>
<template v-for="(item, index) in swipImgs" :key="index">
<SwiperSlide>
<img
:src="item.bannerImg"
alt=""
@click="toDetail2(item)"
class="w100%"
/>
<div
class="absolute w-full bg-#062910/60 h52px left-0 bottom-0 z-9 text-#fff flex px18px items-center"
>
<div
class="text-ellipsis text-22px font-600 max-w480px"
@click="toDetail2(item)"
:title="item.title"
>
{{ item.title }}
</div>
</div>
</SwiperSlide>
<div
class="absolute w-full h52px left-0 bottom-0 z-10 flex px18px items-center justify-end"
>
<div class="dots shrink-0 cursor-pointer">
<span
:class="`dot ${swipeActiveIndex === idx && 'active'}`"
v-for="(item, idx) in swipImgs"
:key="item"
@click="slideTo(idx)"
></span>
</div>
</div>
</template>
</Swiper>
</section>
<section class="max-h-500px overflow-y-auto -webkit-scrollbar">
<div
class="flex mt19px items min-h-140px"
v-for="item in items"
:key="item"
>
<div
class="w100px h100px rd-20px flex-shrink flex flex-col justify-center items-center text-#fff"
:style="{ backgroundColor: item.color }"
>
<img :src="item.icon" />
<span class="mt14px">{{ item.name }}</span>
</div>
<div class="flex flex-col flex-1 ml16px min-h-120px">
<template v-if="item.list.length > 0">
<AppAlert class="flex cursor-pointer" cate="1">
<span
v-if="item.list[0].isTop === 'Y'"
class="flex-1 w0 truncate font-500"
@click="toDetail2(item.list[0])"
:title="item.list[0].source"
>{{ item.list[0].title }}</span
>
<span
class="flex-1 w0 truncate font-500"
v-if="item.list[0].isTop === 'N'"
></span>
<img
v-if="item.list[0].isTop === 'Y'"
src="../../../assets/images/jj.gif"
class="h27px mr5px mt3px"
/>
<div class="flex h40px lh-40px text-#fff text-18px">
<div
class="pr40px cursor-pointer more text-14px"
@click="toDest(item.key)"
>
更多
</div>
</div>
</AppAlert>
<div class="" v-for="(n, idx) in item.news" :key="n.title">
<!-- <div v-if="idx ==0">
<div v-if="n.isTop === 'Y'?indexs=3:indexs=2" class="mt7px cursor-pointer flex items-center" :data-date="n.publishTime" @click="toDetail2(n)">
<span v-if="n.isTop !== 'Y'" class="truncate flex-1 w0 text-#142142 hover:underline mt4px" :style="n.isRead===2?'color:#0058E5;font-weight':''" :title="n.source">{{ n.title }}</span>
<span class="mt4.5px">
@ -126,98 +170,108 @@ const toDetail2 =(n)=>{
</div>
<div v-else> -->
<div v-if="idx<3" class="mt8px cursor-pointer flex items-center h25px" :data-date="n.publishTime" @click="toDetail2(n)">
<span class="truncate flex-1 w0 text-#142142 hover:underline mt4px" :style="n.isRead===2?'color:#0058E5;font-weight':''" :title="n.source">{{ n.title }}</span>
<span class="mt4.5px">
<img v-if="n.tag === 'New'" src="./images/NEW3.gif" class="h20px">
</span>
<span class="shrink-0 ml18px text-#808696 mt4px">{{ n.publishTime }}</span>
</div>
<!-- </div> -->
</div>
</template>
<template v-else>
<AppAlert class="flex cursor-pointer" cate="1">
<span class="flex-1 w0 truncate font-500" ></span>
<div class=" flex h40px lh-40px text-#fff text-18px">
<div class="pr40px cursor-pointer more text-14px" @click="toDest(item.key)">更多</div>
</div>
</AppAlert>
</template>
</div>
</div>
</section>
<div
v-if="idx < 3"
class="mt8px cursor-pointer flex items-center h25px"
:data-date="n.publishTime"
@click="toDetail2(n)"
>
<span
class="truncate flex-1 w0 text-#142142 hover:underline mt4px"
:style="n.isRead === 2 ? 'color:#0058E5;font-weight' : ''"
:title="n.source"
>{{ n.title }}</span
>
<span class="mt4.5px">
<img
v-if="n.tag === 'New'"
src="./images/NEW3.gif"
class="h20px"
/>
</span>
<span class="shrink-0 ml18px text-#808696 mt4px">{{
n.publishTime
}}</span>
</div>
<!-- </div> -->
</div>
</template>
<template v-else>
<AppAlert class="flex cursor-pointer" cate="1">
<span class="flex-1 w0 truncate font-500"></span>
<div class="flex h40px lh-40px text-#fff text-18px">
<div
class="pr40px cursor-pointer more text-14px"
@click="toDest(item.key)"
>
更多
</div>
</div>
</AppAlert>
</template>
</div>
</div>
</section>
</template>
<style scoped lang="less">
// ::-webkit-scrollbar {
// width: 1px;
// }
// ::-webkit-scrollbar {
// width: 1px;
// }
.text-ellipsis {
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏溢出部分 */
text-overflow: ellipsis; /* 显示省略号 */
/* 其他样式，如字体大小、字体粗细等 */
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏溢出部分 */
text-overflow: ellipsis; /* 显示省略号 */
/* 其他样式，如字体大小、字体粗细等 */
}
.title{
background: linear-gradient(0deg, #466CCD, #5C87F5);
border-radius: 10px;
opacity: 0.52;
.title {
background: linear-gradient(0deg, #466ccd, #5c87f5);
border-radius: 10px;
opacity: 0.52;
}
.more{
position: relative;
&::after{
content: '';
width: 20px;
height: 20px;
position: absolute;
right: 15px;
top: 10px;
background-image: url('./images/younniu.png');
background-size: contain;
}
.more {
position: relative;
&::after {
content: '';
width: 20px;
height: 20px;
position: absolute;
right: 15px;
top: 10px;
background-image: url('./images/younniu.png');
background-size: contain;
}
}
.dots {
.dot {
display: inline-block;
width: 13px;
height: 9px;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 0;
margin-left: 8px;
&.active {
background-color: #fff;
}
}
.dot {
display: inline-block;
width: 13px;
height: 9px;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 0;
margin-left: 8px;
&.active {
background-color: #fff;
}
}
}
.items {
.bg-red {
background-color: #e60e0e;
}
.bg-green {
background-color: #2cba06;
}
.items-content {
margin-top: 12px;
.bg-red {
background-color: #e60e0e;
}
.bg-green {
background-color: #2cba06;
}
.items-content {
margin-top: 12px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-height: 1.7;
overflow: hidden;
text-overflow: ellipsis;
}
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-height: 1.7;
overflow: hidden;
text-overflow: ellipsis;
}
}
</style>

110
src/views/home/phone/index.vue
View File

@ -8,25 +8,49 @@ import { useDate } from '@/views/home/hooks/useDate'
const { day, week } = useDate()
const { push } = useRouter()
const array = ref<any[]>([
{ content1: '将扩大的机遇转为成果 更强更大地展翅飞翔', content2: 'ひろがるチャンスを 成果につなげ 強く大きく 羽ばたこう', year: '2023年' },
{ content1: '领先时代的变化 开创崭新的未来', content2: '', year: '2022年' },
{ content1: '以“重大变化”为契机 向新课题发起挑战', content2: '', year: '2021年' },
{ content1: '加速推进三个协创 决胜于变化的时代', content2: '', year: '2020年' },
{ content1: '以三个协创为轴心 人人迅速果断行动', content2: '', year: '2016年' },
{ content1: '突破壁垒 集中优势 不断挑战新课题', content2: '', year: '2018年' },
{ content1: '坚持以人为轴心，融合新的力量', content2: '集团上下齐心协力提升企业价值', year: '2017年' },
{ content1: '站稳脚跟 强化优势 大步迈进', content2: '', year: '2016年' },
{ content1: '创造未来，决胜于变化的时代', content2: '', year: '2015年' },
]);
{
content1: '将扩大的机遇转为成果 更强更大地展翅飞翔',
content2: 'ひろがるチャンスを 成果につなげ 強く大きく 羽ばたこう',
year: '2023年'
},
{ content1: '领先时代的变化 开创崭新的未来', content2: '', year: '2022年' },
{
content1: '以“重大变化”为契机 向新课题发起挑战',
content2: '',
year: '2021年'
},
{
content1: '加速推进三个协创 决胜于变化的时代',
content2: '',
year: '2020年'
},
{
content1: '以三个协创为轴心 人人迅速果断行动',
content2: '',
year: '2016年'
},
{
content1: '突破壁垒 集中优势 不断挑战新课题',
content2: '',
year: '2018年'
},
{
content1: '坚持以人为轴心，融合新的力量',
content2: '集团上下齐心协力提升企业价值',
year: '2017年'
},
{ content1: '站稳脚跟 强化优势 大步迈进', content2: '', year: '2016年' },
{ content1: '创造未来，决胜于变化的时代', content2: '', year: '2015年' }
])
</script>
<template>
<HomeHead class="top">
<template #content>
<!-- <HomeHeadSearch /> -->
</template>
</HomeHead>
<!-- <div class="h-full relative flex flex-col">
<HomeHead class="top">
<template #content>
<!-- <HomeHeadSearch /> -->
</template>
</HomeHead>
<!-- <div class="h-full relative flex flex-col">
<div class="font-600 flex items-end mt27px">
<div class="text-36px">集团方针</div>
<div class="text-18px ml40px mr25px">{{ day }}</div>
@ -46,41 +70,41 @@ const array = ref<any[]>([
</div>
</div>
</div> -->
<div class="mt30px mr20px flex w100%">
<img src="../../../assets/images/tizhibiaozi.png" class="w100%"/>
</div>
<div class="mt30px mr20px flex w100%">
<img src="../../../assets/images/fzqiet2.png" class="w100%" />
</div>
</template>
<style scoped lang="less">
.top {
position: absolute;
right: 30px;
top: -92px;
position: absolute;
right: 30px;
top: -92px;
}
.g-wrapper {
border-radius: 18px;
border: 1px solid #E7EBF5;
box-shadow: inset 1px 2px 12px rgba(14, 86, 221, 0.32);
overflow: hidden;
border-radius: 18px;
border: 1px solid #e7ebf5;
box-shadow: inset 1px 2px 12px rgba(14, 86, 221, 0.32);
overflow: hidden;
.timeline {
font-size: 20px;
font-weight: bold;
color: #142142;
.timeline {
font-size: 20px;
font-weight: bold;
color: #142142;
.one {
position: relative;
.year{
left: -132px;
top: -14px;
color: #003CB7;
font-size: 26px;
font-weight: normal;
text-align: center;
line-height: 50px;
}
}
}
.one {
position: relative;
.year {
left: -132px;
top: -14px;
color: #003cb7;
font-size: 26px;
font-weight: normal;
text-align: center;
line-height: 50px;
}
}
}
}
</style>

1011
src/views/home/quality/Quality.vue
View File

File diff suppressed because it is too large Load Diff

596
src/views/index.vue
View File

@ -2,10 +2,10 @@
import { RouterView } from 'vue-router'
import { useTitle } from '@vueuse/core'
import { getImg } from '@/assets/images'
import { NModal } from 'naive-ui'
import { NModal, NPopover } from 'naive-ui'
import { useUserStore } from '@/stores/modules/user'
import Searchs from '@/components/search.vue'
import {report} from '@/api/daikin/base'
import Searchs from '@/components/search.vue'
import { report, treeDbList } from '@/api/daikin/base'
useTitle('大金中国调达本部 HOMEPAGE')
const { push } = useRouter()
const store = useUserStore()
@ -14,237 +14,431 @@ const { toggle } = inject<any>('fullscreen')
const activeMenuKey = ref('Home')
let idx = ref(0)
const Menus = [
// 首页 集团部门方针 年度活动日程表 其他链接…
{ key: 'Home', name: '首页', icon: getImg('home.png'), icon1: getImg('home1.png'),link:'' },
{
key: 'Group', name: '年度方针', icon: getImg('company.png'),icon1: getImg('company1.png'),link:'' ,
// children: [
// { key: 'Group', name: '-集团方针' },
// { key: 'Company', name: '-公司方针' },
// { key: 'HeadQuarters', name: '-调达本部方针' }
// ]
},
// { key: 'company', name: '本部长通达', icon: getImg('icon-company.svg') },
{ key: 'User', name: '年度活动日程表', icon: getImg('book.png'),icon1: getImg('book1.png'),link:''
// children: [
// { key: '', name: '调达Database' },
// ]
},
// { key: 'database', name: '调达Database', icon: getImg('shuju.png'),icon1: getImg('shuju1.png'),link:'https://procurement.daikin.net.cn/scripts/cbgrn/grn.exe/' },
{ key: 'DataBase', name: '调达Database', icon: getImg('shuju.png'),icon1: getImg('shuju1.png') },
{ key: 'link', name: '其他链接', icon: getImg('link.png') ,icon1: getImg('link1.png'),link:'',
children: [
{ key: 'YCWZ', name: '调达本部才望子',link:'http://172.31.119.37/scripts/cbgrn/grn.exe/portal/index' },
{ key: 'GCDB', name: 'GCDB全球比价系统',link:'http://10.219.11.13/gcdb/' },
{ key: 'DJ', name: '大金空调官方网站',link:'https://www.daikin-china.com.cn' },
{ key:'CODE',name:"大金空调中国相关"}
]
},
{ key: 'phone', name: '紧急联络体制表', icon: getImg('phone.png'),icon1: getImg('phone1.png'),link:'' ,
// children: [
// { key: 'inv', name: '邀请' },
// { key: 'visit', name: '拜访' },
// ]
},
const Menus = ref([
// 首页 集团部门方针 年度活动日程表 其他链接…
{
key: 'Home',
name: '首页',
icon: getImg('home.png'),
icon1: getImg('home1.png'),
link: '',
path: '/Home',
other: 'Top Page'
},
{
key: 'Group',
name: '集团部门方针',
icon: getImg('company.png'),
icon1: getImg('company1.png'),
link: '',
path: '/Home/group'
// children: [
// { key: 'Group', name: '-集团方针' },
// { key: 'Company', name: '-公司方针' },
// { key: 'HeadQuarters', name: '-调达本部方针' }
// ]
},
// { key: 'company', name: '本部长通达', icon: getImg('icon-company.svg') },
{
key: 'User',
name: '年度活动日程表',
icon: getImg('book.png'),
icon1: getImg('book1.png'),
link: '',
path: '/Home/User'
// children: [
// { key: '', name: '调达Database' },
// ]
},
// { key: 'database', name: '调达Database', icon: getImg('shuju.png'),icon1: getImg('shuju1.png'),link:'https://procurement.daikin.net.cn/scripts/cbgrn/grn.exe/' },
{
key: 'DataBase',
name: '调达Database',
icon: getImg('shuju.png'),
icon1: getImg('shuju1.png'),
link: ''
},
{
key: 'link',
name: '其他链接',
icon: getImg('link.png'),
icon1: getImg('link1.png'),
link: '',
other: 'Other Links',
children: [
{
key: 'YCWZ',
name: '调达本部才望子',
link: 'http://172.31.119.37/scripts/cbgrn/grn.exe/portal/index'
},
{
key: 'GCDB',
name: 'GCDB全球比价系统',
link: 'http://10.219.11.13/gcdb/'
},
{
key: 'DJ',
name: '大金空调官方网站',
link: 'https://www.daikin-china.com.cn'
},
{ key: 'CODE', name: '大金空调中国相关' }
]
},
{
key: 'phone',
name: '紧急联络体制表',
icon: getImg('phone.png'),
icon1: getImg('phone1.png'),
link: '',
path: '/Home/phone'
// children: [
// { key: 'inv', name: '邀请' },
// { key: 'visit', name: '拜访' },
// ]
}
])
]
async function getDbTree() {
const { data = [] } = await treeDbList({})
Menus.value[3].children = data.map((item: any) => {
return {
key: 'DataBase',
name: item.name,
params: { id: item.id }
}
})
}
getDbTree()
let flag = false
function menuHandler(menu: any, index: number) {
activeMenuKey.value = menu.key
console.log(menu,index);
idx.value = index;
console.log(menu.key);
if(!menu.key) return
if (menu.key==='DataBase') {
const { code } = report({ moduleCode:'App_Database' })
}
push({ name: menu.key })
activeMenuKey.value = menu.key
console.log(menu, index)
idx.value = index
console.log(menu.key, 'key')
if (!menu.key) return
if (menu.key === 'DataBase') {
if (flag) {
push({ name: menu.key })
flag = false
return
}
flag = true
setTimeout(() => {
flag = false
}, 300)
}
if (menu.children) return
if (menu.key === 'DataBase') {
const { code } = report({ moduleCode: 'App_Database' })
}
push({ name: menu.key })
}
const route = useRoute()
const shorm =ref(false)
function goChild(menu:any){
activeItem = menu.key
console.log(menu.key)
if(menu.key ==='CODE'){
shorm.value = true
}
if(menu.link){
}
else{
push({name:menu.key})
}
const shorm = ref(false)
const { path } = useRoute()
watchEffect(() => {
setTimeout(() => {
const index = Menus.value.findIndex((item: any) => item.path === path)
if (index > -1 && idx.value !== index) {
const menu = Menus.value[index]
console.log('🚀 ~ menu:', menu)
menuHandler(menu, index)
}
}, 0)
})
function goChild(menu: any) {
activeItem = menu.key
if (menu.key === 'CODE') {
shorm.value = true
return
}
if (menu.link) {
} else {
push({ name: menu.key, query: menu.params || {} })
}
}
var activeItem=0
var activeItem = 0
</script>
<template>
<div class="page w-1920px h-1080px p30px flex">
<div class="w300px -mr-1px flex flex-col shrink-0 overflow-auto">
<!-- @dblclick="toggle" -->
<img src="@/assets/images/logo.png" class="w197px h44px mt14px" />
<div class="text-20px text-#fff font-600 mt6px">大金中国调达本部 HOMEPAGE</div>
<div class="page w-1920px h-1080px p30px flex">
<div class="w300px -mr-1px flex flex-col shrink-0 overflow-auto">
<!-- @dblclick="toggle" -->
<img src="@/assets/images/logo.png" class="w197px h44px mt14px" />
<div class="text-20px text-#fff font-600 mt6px">
大金中国调达本部 HOMEPAGE
</div>
<div class="mt34px w270px min-h80px rd-35px b-4px bg-#fff/16 b-4px b-solid b-#fff/23 overflow-hidden relative">
<Searchs></Searchs>
</div>
<div class="pt44px pb24px flex-1 ">
<div
class="mt34px w270px min-h80px rd-35px b-4px bg-#fff/16 b-4px b-solid b-#fff/23 overflow-hidden relative"
>
<Searchs></Searchs>
</div>
<div class="pt10px pb10px flex-1 max-h-636px">
<div
class="nav pl36px pr16px py24px m10px mr0 rd-32px rd-r-0 flex flex-col text-#fff cursor-pointer hover:underline"
v-for="(m, index) in Menus"
:key="m.key"
:class="
activeMenuKey === m.key ? (m.children ? 'actives' : 'active') : ''
"
@click="() => menuHandler(m, index)"
>
<div :class="activeMenuKey === m.key && 'onActive'">
<img
v-if="activeMenuKey === m.key"
:src="m.icon1"
class="w22px h22px mr16px mt--5px"
/>
<img v-else :src="m.icon" class="w22px h22px mr16px mt--5px" />
<span
class="text-22px font-900 leading-22px"
:class="
(m.key === 'link' || m.key === 'DataBase') &&
'underline border-b-0px border-b-solid'
"
>
<a v-if="m.link" class="no-underline text-#fff" :href="m.link">
{{ m.name }}</a
>
<span v-else>
<a
v-if="m.key === 'link' || m.key === 'DataBase'"
class="text-#fff"
>
{{ m.name }}</a
>
<span v-else>{{ m.name }}</span>
</span>
<span class="text-18px italic font-500" v-if="m.other">{{
m.other
}}</span>
</span>
</div>
<div class="nav px36px py24px m10px mr0 rd-32px rd-r-0 flex flex-col text-#fff cursor-pointer"
v-for="(m, index) in Menus" :key="m.key" :class="activeMenuKey === m.key ? (m.children ?'actives':'active'):''"
@click="() => menuHandler(m, index)">
<div :class="activeMenuKey === m.key && 'onActive'">
<img v-if="activeMenuKey === m.key" :src="m.icon1" class="w22px h22px mr16px mt--5px" />
<img v-else :src="m.icon" class="w22px h22px mr16px mt--5px" />
<span class="text-22px font-900">
<a v-if="m.link" class="no-underline text-#fff" :href="m.link"> {{ m.name }}</a>
<span v-else>
<a v-if="m.name==='其他链接'" class="underline text-#fff" > {{ m.name }}</a>
<span v-else>{{m.name}}</span>
</span>
</span>
</div>
<div v-if="m.children&&idx==index" class="pl40px">
<div class="my20px pl30px text-#fff activeChildren" v-for="(item,ind) in m.children" :key="item.key" @click.stop="goChild(item)" @click="activeItem = ind">
<a v-if="item.link" class="no-underline !text-#fff flex" :href="item.link"><span class="w7px h7px rd-7px bg-#fff block mr-8px mt4px"></span>{{ item.name }}</a>
<span v-else class="flex"><span class="w7px h7px rd-7px bg-#fff block mr-8px mt4px"></span>{{ item.name }}</span>
</div>
</div>
</div>
</div>
<div class="p20px w270px rd-20px b-4px bg-#fff/16 b-4px b-solid b-#fff/23 text-14px relative" >
<a href="http://172.31.119.37/scripts/cbgrn/grn.exe/portal/index" target="_blank" class="no-underline text-#fff">
<div class="flex items-center text-18px ">
<img src="@/assets/images/icon-book.svg" class="w22px h22px mr10px" />
个人日程
</div>
<div class="mt18px">9:00-10:00</div>
<div v-if="m.children && idx == index" class="pl40px">
<div
class="my16px pl30px text-#fff activeChildren text-20px"
v-for="(item, ind) in m.children"
:key="item.key"
@click.stop="goChild(item)"
@click="activeItem = ind"
>
<a
v-if="item.link"
class="no-underline !text-#fff flex"
:href="item.link"
><span
class="w7px h7px rd-7px bg-#fff block mr-8px mt4px"
></span
>{{ item.name }}</a
>
<span v-else class="flex"
><span
class="w7px h7px rd-7px bg-#fff block mr-8px mt4px"
></span
>{{ item.name }}</span
>
</div>
</div>
</div>
</div>
<div class="h90px w270px"></div>
<n-popover
v-if="false"
trigger="hover"
placement="top"
:style="{ '--n-border-radius': '8px' }"
>
<template #trigger>
<div
class="w270px py14px my20px px24px flex rd-20px bg-#003cb7"
style="box-shadow: 0 2rpx 14rpx 0 #00000069"
>
<div class="flex items-center text-18px">
<img
src="@/assets/images/dianhhh@2x.png"
class="w22px h22px mr10px"
/>
公司内线
</div>
</div>
</template>
<div
class="text-14px text-#285FE9 flex items-center hover:underline cursor-pointer"
>
<img
src="@/assets/images/wjqq@2x.png"
class="w14px h18px mr4px object-contain"
/>
<span>{{ '公司内线公司内线公司内线' }}</span>
</div>
</n-popover>
<div
class="p20px w270px rd-20px b-4px bg-#fff/4 b-4px b-solid b-#fff/23 text-14px relative"
>
<a
href="http://172.31.119.37/scripts/cbgrn/grn.exe/portal/index"
target="_blank"
class="no-underline text-#fff"
>
<div class="flex items-center text-18px hover:underline">
<img
src="@/assets/images/icon-book.svg"
class="w22px h22px mr10px"
/>
个人日程
</div>
<!-- <div class="mt18px">9:00-10:00</div>
<div class="mt8px">召集部门成员召开项目启动会</div>
<div class="mt16px">10:01-11:00</div>
<div class="mt8px">召集部门成员召开项目启动会</div>
<img src="@/assets/images/zhulj@2x.png" class="absolute w22px h22px mr10px top--15px right--20px" />
</a>
</div>
<div class="mt8px">召集部门成员召开项目启动会</div> -->
<img
src="@/assets/images/zhulj@2x.png"
class="absolute w22px h22px mr10px top--15px right--20px"
/>
</a>
<div
class="mt10px ml-30px opacity-70"
@click="(e) => e.stopPropagation()"
>
请点击上方链接登录cybouzu
</div>
</div>
<!-- <div class="p20px w270px rd-20px b-4px bg-#fff/16 b-4px b-solid b-#fff/23 text-14px mt22px">
<!-- <div class="p20px w270px rd-20px b-4px bg-#fff/16 b-4px b-solid b-#fff/23 text-14px mt22px">
<div class="flex items-center text-18px">
<img src="@/assets/images/icon-memo.svg" class="w22px h22px mr10px" />
memo
</div>
<div class="mt18px lh-24px">新年方针:领先时代的变化开创崭新的 未来</div>
</div> -->
</div>
<div class="main flex-1 rd-32px p30px pb15px pt0px mt62px relative">
<!-- <Home /> -->
<RouterView />
</div>
</div>
<div class="fixed bottom-4px text-#fff text-12px ml38px" style="margin:0; width: 100%; text-align: center;">今日访问人数：{{store.user.appLoginToDayCount}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;累计访问人数：{{store.user.appLoginCount}}</div>
<NModal v-model:show="shorm" :mask-closable="false">
<div class="w700px h430px bg-#fff rd-15px">
<div class="py5px px15px " style="border-bottom: 1px solid #dadada; font-weight: bold;color: #494A63;">
大金空调中国相关
<img @click="shorm=false" src="@/assets/images/chac@2x.png" class="w15px float-right mt5px mr5px"/>
</div>
<div class="flex mt70px text-center">
<div class="w-full text-center">
<img src="@/assets/images/ewm1@2x.png" class="w200px"/>
<div class="py10px bg-#377CFF text-#fff w200px rd-20px mt35px mx-auto">大金空调中国视频号</div>
</div>
<div class="w-full">
<img src="@/assets/images/ewm2@2x.png" class="w200px"/>
<div class="py10px bg-#377CFF text-#fff w200px rd-20px mt35px mx-auto">大金空调抖音号</div>
</div>
</div>
</div>
</NModal>
</div>
<div class="main flex-1 rd-32px p30px pb15px pt0px mt62px relative">
<!-- <Home /> -->
<RouterView />
</div>
</div>
<div
class="fixed bottom-4px text-#fff text-12px ml38px"
style="margin: 0; width: 100%; text-align: center"
>
今日访问人数：{{
store.user.appLoginToDayCount
}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;累计访问人数：{{ store.user.appLoginCount }}
</div>
<NModal v-model:show="shorm" :mask-closable="false">
<div class="w700px h430px bg-#fff rd-15px">
<div
class="py5px px15px"
style="
border-bottom: 1px solid #dadada;
font-weight: bold;
color: #494a63;
"
>
大金空调中国相关
<img
@click="shorm = false"
src="@/assets/images/chac@2x.png"
class="w15px float-right mt5px mr5px"
/>
</div>
<div class="flex mt70px text-center">
<div class="w-full text-center">
<img src="@/assets/images/ewm1@2x.png" class="w200px" />
<div
class="py10px bg-#377CFF text-#fff w200px rd-20px mt35px mx-auto"
>
大金空调中国视频号
</div>
</div>
<div class="w-full">
<img src="@/assets/images/ewm2@2x.png" class="w200px" />
<div
class="py10px bg-#377CFF text-#fff w200px rd-20px mt35px mx-auto"
>
大金空调抖音号
</div>
</div>
</div>
</div>
</NModal>
</template>
<style scoped lang="less">
.page {
font-family: 'PingFang SC';
user-select: none;
font-family: 'PingFang SC';
user-select: none;
// background-image: url('@/assets/images/bg.jpg');
// background-color: #000;
background-position: 0 0;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
// background-image: url('@/assets/images/bg.jpg');
// background-color: #000;
background-position: 0 0;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
line-height: 1;
line-height: 1;
}
.nav {
position: relative;
position: relative;
&::before {
top: -48px;
}
.activeChildren:hover{
a,span{
text-decoration:underline;
}
}
&::after {
bottom: -49px;
transform: rotate(-90deg);
}
&::before {
top: -48px;
}
.activeChildren:hover {
a,
span {
text-decoration: underline;
}
}
&::after {
bottom: -49px;
transform: rotate(-90deg);
}
&.active {
color: #002fa7;
background-color: #fff;
a{
color: #002fa7;
}
&::before,
&::after {
opacity: 1;
}
}
&.actives {
padding: 0px!important;
color: #002fa7;
background-color:rgba(255, 255,255,0.3);
a{
color: #002fa7;
}
&::before,
&::after {
opacity: 1;
}
.onActive{
background-color: #fff;
border-radius:32px 0 0 32px ;
padding: 24px 36px 24px 36px;
}
}
&.active {
color: #002fa7;
background-color: #fff;
a {
color: #002fa7;
}
&::before,
&::after {
opacity: 1;
}
}
&.actives {
padding: 0px !important;
color: #002fa7;
background-color: rgba(255, 255, 255, 0.3);
a {
color: #002fa7;
}
&::before,
&::after {
opacity: 1;
}
.onActive {
background-color: #fff;
border-radius: 32px 0 0 32px;
padding: 24px 16px 24px 36px;
}
}
}
.main {
background-image: url('@/assets/images/bg-rs-main.svg');
background-position: 0 0;
background-repeat: repeat-x;
background-size: auto;
background-image: url('@/assets/images/bg-rs-main.svg');
background-position: 0 0;
background-repeat: repeat-x;
background-size: auto;
}
&::-webkit-scrollbar {
display: none;
scrollbar-width: none;
}
&::-webkit-scrollbar{
display: none;
scrollbar-width:none
}
</style>

305
src/views/layout/ExternalLogin.vue
View File

@ -7,78 +7,98 @@ import { token, useUserStore } from '@/stores/modules/user'
const message = useMessage()
const { push } = useRouter()
const store = useUserStore()
onMounted(()=>{
const account = localStorage.getItem("accounts")
const password = localStorage.getItem("passwords")
if(password){
redss.value = true
formState.account = account
formState.password = password
}
onMounted(() => {
const account = localStorage.getItem('accounts')
const password = localStorage.getItem('passwords')
if (password) {
redss.value = true
formState.account = account
formState.password = password
}
})
const formState = reactive({
account: '',
password: '',
authType:'2'
account: '',
password: '',
authType: '2'
})
const redss = ref(false)
const pwd=(e)=>{
redss.value = e
const pwd = (e) => {
redss.value = e
}
async function handleLogin() {
const { account, password } = formState
const { account, password } = formState
const { msg } = await login(formState)
const { msg } = await login(formState)
token.value = msg
token.value = msg
store.getUser()
if(msg){
push({ name: 'external' })
if(redss.value){
localStorage.setItem('accounts', account);
localStorage.setItem('passwords', password);
}
message.success('登录成功')
}
store.getUser()
if (msg) {
push({ name: 'external' })
if (redss.value) {
localStorage.setItem('accounts', account)
localStorage.setItem('passwords', password)
}
message.success('登录成功')
}
}
const keyDown=(e)=>{
if(e.key ==='Enter')
{
handleLogin()
}
const keyDown = (e) => {
if (e.key === 'Enter') {
handleLogin()
}
}
</script>
<template>
<div class="bg-#fff w700px h610px text-center mx-auto p50px mt14% mb20%">
<p
x="0"
y="52"
style="font-size: 52px; font-weight: 800; margin-bottom: 50px"
>
大金空调(上海)有限公司
</p>
<div class="bg-#fff w700px h610px text-center mx-auto p50px my20%">
<p x="0" y="52" style="font-size: 52px; font-weight: 800;margin-bottom: 50px;">大金空调(上海)有限公司</p>
<section>
登录名称 ：
<div
class="b-1px b-solid b-#000 bg-#fff rd-12px inline-flex items-center w416px h-60px px12px cursor-pointer overflow-hidden relative">
<input class="h-full w-full text-#142142 text-18px pr54px placeholder-#97a4d2" type="text"
placeholder="请输入您的账号" maxlength="50" v-model="formState.account" @keydown.enter="keyDown"/>
</div>
</section>
<section class="mt28px">
密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：
<div
class="b-1px b-solid b-#000 bg-#fff rd-12px inline-flex items-center w416px h-60px px12px cursor-pointer overflow-hidden relative">
<input class="h-full w-full text-#142142 text-18px pr54px placeholder-#97a4d2" type="password"
placeholder="请输入您的密码" maxlength="50" v-model="formState.password" @keydown.enter="keyDown"/>
</div>
</section>
<section class="mt16px w-full text-right text-#000">
<n-checkbox size="large" label="记住密码" :on-update:checked="pwd" class="mr-50px" :checked="redss"/>
</section>
<!--
<section>
登录名称 ：
<div
class="b-1px b-solid b-#000 bg-#fff rd-12px inline-flex items-center w416px h-60px px12px cursor-pointer overflow-hidden relative"
>
<input
class="h-full w-full text-#142142 text-18px pr54px placeholder-#97a4d2"
type="text"
placeholder="请输入您的账号"
maxlength="50"
v-model="formState.account"
@keydown.enter="keyDown"
/>
</div>
</section>
<section class="mt28px">
密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：
<div
class="b-1px b-solid b-#000 bg-#fff rd-12px inline-flex items-center w416px h-60px px12px cursor-pointer overflow-hidden relative"
>
<input
class="h-full w-full text-#142142 text-18px pr54px placeholder-#97a4d2"
type="password"
placeholder="请输入您的密码"
maxlength="50"
v-model="formState.password"
@keydown.enter="keyDown"
/>
</div>
</section>
<section class="mt16px w-full text-right text-#000">
<n-checkbox
size="large"
label="记住密码"
:on-update:checked="pwd"
class="mr-50px"
:checked="redss"
/>
</section>
<!--
<section class="mt28px">
所属地区：
<div
@ -88,101 +108,102 @@ const keyDown=(e)=>{
</div>
</section> -->
<section class="mt48px text-#fff text-28px">
<div
class="inline-flex items-center justify-center rd-10px w416px h62px bg-#345fdd/80 hover-bg-#345fdd/100 cursor-pointer"
@click="handleLogin" @keydown.enter="keyDown">
登录
</div>
</section>
</div>
<section class="mt48px text-#fff text-28px">
<div
class="inline-flex items-center justify-center rd-10px w416px h62px bg-#345fdd/80 hover-bg-#345fdd/100 cursor-pointer"
@click="handleLogin"
@keydown.enter="keyDown"
>
登录
</div>
</section>
</div>
</template>
<style scoped lang="less">
.wrapper {
// background: url('./images/denglbj.png') no-repeat;
background-size: cover;
background-color: #E4E4E4;
overflow: hidden;
.box {
width: 716px;
height: 743px;
margin: 0 auto;
margin-top: 211px;
// background: url('./images/denglbj.png') no-repeat;
background-size: cover;
background-color: #e4e4e4;
overflow: hidden;
.box {
width: 716px;
height: 743px;
margin: 0 auto;
margin-top: 211px;
// background-color: rgba(22, 208, 255, 0.15);
// border: 1px dashed #3699ff;
// background-color: rgba(22, 208, 255, 0.15);
// border: 1px dashed #3699ff;
user-select: none;
user-select: none;
position: relative;
.inner-box {
position: absolute;
width: 582px;
height: 496px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 3px solid #0d4da5;
border-radius: 18px;
position: relative;
.inner-box {
position: absolute;
width: 582px;
height: 496px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 3px solid #0d4da5;
border-radius: 18px;
& > * {
z-index: 9;
}
&::before {
z-index: 1;
content: ' ';
width: 537px;
height: 247px;
background-image: url('./images/light.svg');
position: absolute;
top: -25%;
left: -35%;
& > * {
z-index: 9;
}
&::before {
z-index: 1;
content: ' ';
width: 537px;
height: 247px;
background-image: url('./images/light.svg');
position: absolute;
top: -25%;
left: -35%;
@keyframes toRight {
0% {
left: -35%;
}
50% {
left: 30%;
}
100% {
left: -35%;
}
}
animation: toRight 10s linear infinite;
}
&::after {
z-index: 1;
content: ' ';
width: 537px;
height: 247px;
background-image: url('./images/light.svg');
transform: rotate(180deg);
position: absolute;
bottom: -25%;
right: -35%;
@keyframes toRight {
0% {
left: -35%;
}
50% {
left: 30%;
}
100% {
left: -35%;
}
}
animation: toRight 10s linear infinite;
}
&::after {
z-index: 1;
content: ' ';
width: 537px;
height: 247px;
background-image: url('./images/light.svg');
transform: rotate(180deg);
position: absolute;
bottom: -25%;
right: -35%;
@keyframes toLeft {
0% {
right: -35%;
}
50% {
right: 30%;
}
100% {
right: -35%;
}
}
animation: toLeft 10s linear infinite;
}
}
}
@keyframes toLeft {
0% {
right: -35%;
}
50% {
right: 30%;
}
100% {
right: -35%;
}
}
animation: toLeft 10s linear infinite;
}
}
}
.title {
font-size: 52px;
font-weight: bold;
}
.title {
font-size: 52px;
font-weight: bold;
}
}
</style>

337
src/views/layout/Login.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import type { LoginReq } from '@/api/daikin/base'
import { NCheckbox, useMessage, NSelect, NConfigProvider } from 'naive-ui'
import type {GlobalThemeOverrides} from 'naive-ui'
import type { GlobalThemeOverrides } from 'naive-ui'
import { login } from '@/api/daikin/base'
import { token, useUserStore } from '@/stores/modules/user'
import { ref } from 'vue'
@ -10,104 +10,127 @@ const message = useMessage()
const { push } = useRouter()
const store = useUserStore()
const themeOverrides:GlobalThemeOverrides = {
common: {
primaryColor: '#FF0000'
},
Select: {
peers: {
InternalSelection: {
textColor: '#333',
border:'0',
placeholderColor:'#97A4D2',
borderActive:''
},
InternalSelectMenu: {
borderRadius: '6px',
}
}
}
const themeOverrides: GlobalThemeOverrides = {
common: {
primaryColor: '#FF0000'
},
Select: {
peers: {
InternalSelection: {
textColor: '#333',
border: '0',
placeholderColor: '#97A4D2',
borderActive: ''
},
InternalSelectMenu: {
borderRadius: '6px'
}
}
}
}
onMounted(()=>{
const account = localStorage.getItem("account")
const password = localStorage.getItem("password")
if(password){
reds.value = true
formState.account = account
formState.password = password
}
onMounted(() => {
const account = localStorage.getItem('account')
const password = localStorage.getItem('password')
if (password) {
reds.value = true
formState.account = account
formState.password = password
}
})
const formState = reactive<LoginReq>({
account: '',
password: '',
authType:'1'
account: '',
password: '',
authType: '1'
})
async function handleLogin() {
const { account, password } = formState
const { account, password } = formState
if (!account) return message.error('请输入您的账号')
if (!password) return message.error('请输入您的密码')
const { msg } = await login(formState)
token.value = msg
store.getUser()
if(msg){
push({ name: 'Home' })
if(reds.value){
localStorage.setItem('account', account);
localStorage.setItem('password', password);
}
message.success('登录成功')
}
if (!account) return message.error('请输入您的账号')
if (!password) return message.error('请输入您的密码')
const { msg } = await login(formState)
token.value = msg
store.getUser()
if (msg) {
push({ name: 'Home' })
if (reds.value) {
localStorage.setItem('account', account)
localStorage.setItem('password', password)
}
message.success('登录成功')
}
}
const keyDown=(e)=>{
if(e.key ==='Enter')
{
handleLogin()
}
const keyDown = (e) => {
if (e.key === 'Enter') {
handleLogin()
}
}
const reds = ref(false)
const pwd=(e)=>{
reds.value = e
const pwd = (e) => {
reds.value = e
}
</script>
<template>
<div class="bg-#fff w700px h610px text-center mx-auto p50px my20%">
<p x="0" y="52" style="font-size: 52px; font-weight: 800;margin-bottom: 50px;">大金空调(上海)有限公司</p>
<div class="bg-#fff w700px h610px text-center mx-auto p50px mt14% mb20%">
<p
x="0"
y="52"
style="font-size: 52px; font-weight: 800; margin-bottom: 50px"
>
大金空调(上海)有限公司
</p>
<section>
登录名称 ：
<div
class="b-1px b-solid b-#000 bg-#fff rd-12px inline-flex items-center w416px h-60px px12px cursor-pointer overflow-hidden relative"
>
<input
class="h-full w-full text-#142142 text-18px pr54px placeholder-#97a4d2"
type="text"
placeholder="请输入您的账号"
maxlength="50"
v-model="formState.account"
@keydown.enter="keyDown"
/>
</div>
</section>
<section class="mt28px">
密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：
<div
class="b-1px b-solid b-#000 bg-#fff rd-12px inline-flex items-center w416px h-60px px12px cursor-pointer overflow-hidden relative"
>
<input
class="h-full w-full text-#142142 text-18px pr54px placeholder-#97a4d2"
type="password"
placeholder="请输入您的密码"
maxlength="50"
v-model="formState.password"
@keydown.enter="keyDown"
/>
</div>
</section>
<section class="mt16px w-full text-right text-#000">
<n-checkbox
size="large"
label="记住密码"
:on-update:checked="pwd"
class="mr-50px"
:checked="reds"
/>
</section>
<section>
登录名称 ：
<div
class="b-1px b-solid b-#000 bg-#fff rd-12px inline-flex items-center w416px h-60px px12px cursor-pointer overflow-hidden relative">
<input class="h-full w-full text-#142142 text-18px pr54px placeholder-#97a4d2" type="text"
placeholder="请输入您的账号" maxlength="50" v-model="formState.account" @keydown.enter="keyDown"/>
</div>
</section>
<section class="mt28px">
密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：
<div
class="b-1px b-solid b-#000 bg-#fff rd-12px inline-flex items-center w416px h-60px px12px cursor-pointer overflow-hidden relative">
<input class="h-full w-full text-#142142 text-18px pr54px placeholder-#97a4d2" type="password"
placeholder="请输入您的密码" maxlength="50" v-model="formState.password" @keydown.enter="keyDown"/>
</div>
</section>
<section class="mt16px w-full text-right text-#000">
<n-checkbox size="large" label="记住密码" :on-update:checked="pwd" class="mr-50px" :checked="reds"/>
</section>
<section class="mt48px text-#fff text-28px">
<div
class="inline-flex items-center justify-center rd-10px w416px h62px bg-#345fdd/80 hover-bg-#345fdd/100 cursor-pointer"
@click="handleLogin">
登录
</div>
</section>
</div>
<section class="mt48px text-#fff text-28px">
<div
class="inline-flex items-center justify-center rd-10px w416px h62px bg-#345fdd/80 hover-bg-#345fdd/100 cursor-pointer"
@click="handleLogin"
>
登录
</div>
</section>
</div>
</template>
<style scoped lang="less">
@ -121,97 +144,97 @@ const pwd=(e)=>{
// }
.wrapper {
background: url('./images/login.png') no-repeat;
background-size: cover;
overflow: hidden;
background: url('./images/login.png') no-repeat;
background-size: cover;
overflow: hidden;
.box {
width: 716px;
height: 743px;
margin: 0 auto;
margin-top: 211px;
.box {
width: 716px;
height: 743px;
margin: 0 auto;
margin-top: 211px;
// background-color: rgba(22, 208, 255, 0.15);
// border: 1px dashed #3699ff;
// background-color: rgba(22, 208, 255, 0.15);
// border: 1px dashed #3699ff;
user-select: none;
user-select: none;
position: relative;
position: relative;
.inner-box {
position: absolute;
width: 582px;
height: 496px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 3px solid #0d4da5;
border-radius: 18px;
.inner-box {
position: absolute;
width: 582px;
height: 496px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 3px solid #0d4da5;
border-radius: 18px;
&>* {
z-index: 9;
}
& > * {
z-index: 9;
}
&::before {
z-index: 1;
content: ' ';
width: 537px;
height: 247px;
background-image: url('./images/light.svg');
position: absolute;
top: -25%;
left: -35%;
&::before {
z-index: 1;
content: ' ';
width: 537px;
height: 247px;
background-image: url('./images/light.svg');
position: absolute;
top: -25%;
left: -35%;
@keyframes toRight {
0% {
left: -35%;
}
@keyframes toRight {
0% {
left: -35%;
}
50% {
left: 30%;
}
50% {
left: 30%;
}
100% {
left: -35%;
}
}
100% {
left: -35%;
}
}
animation: toRight 10s linear infinite;
}
animation: toRight 10s linear infinite;
}
&::after {
z-index: 1;
content: ' ';
width: 537px;
height: 247px;
background-image: url('./images/light.svg');
transform: rotate(180deg);
position: absolute;
bottom: -25%;
right: -35%;
&::after {
z-index: 1;
content: ' ';
width: 537px;
height: 247px;
background-image: url('./images/light.svg');
transform: rotate(180deg);
position: absolute;
bottom: -25%;
right: -35%;
@keyframes toLeft {
0% {
right: -35%;
}
@keyframes toLeft {
0% {
right: -35%;
}
50% {
right: 30%;
}
50% {
right: 30%;
}
100% {
right: -35%;
}
}
100% {
right: -35%;
}
}
animation: toLeft 10s linear infinite;
}
}
}
animation: toLeft 10s linear infinite;
}
}
}
.title {
font-size: 52px;
font-weight: bold;
}
.title {
font-size: 52px;
font-weight: bold;
}
}
</style>