From d45a9373f20c8a4d14df8fe636ff2af133b06059 Mon Sep 17 00:00:00 2001
From: xuhongjie <1943105267@qq.com>
Date: Tue, 25 Mar 2025 11:29:55 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E4=BA=86=E7=94=BB=E5=83=8F?=
=?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/api/myAPI/login.js | 84 +--
src/utils/request.js | 309 ++++----
src/views/index.vue | 1592 ++++++++++++++++++++--------------------
3 files changed, 995 insertions(+), 990 deletions(-)
diff --git a/src/api/myAPI/login.js b/src/api/myAPI/login.js
index d31d4e7..1cf4a25 100644
--- a/src/api/myAPI/login.js
+++ b/src/api/myAPI/login.js
@@ -1,42 +1,42 @@
-import request from "@/utils/request";
-// 本地
-// let api = "API"
-// 线上
-let api = location.origin
-export default {
- frimLogin() {
- return request({
- baseURL: process.env.VUE_APP_USER_LOGIN,
- url: "/ggfw-api/pharmaceuticals/login",
- headers: {
- "Content-Type": "application/json",
- isToken: true,
- repeatSubmit: false,
- },
- method: "POST",
- timeout: 60000,
- data: {
- // pdma: "Q2V0YzI4QGNvbQ==",
- // urne: "2112042170015",
- pdma: "MTExMTEx",
- urne: "2112042170015",
- },
- });
- },
-
- getuserinfo() {
- return request({
- // baseURL: location.origin,
- baseURL: api,
- url: "/api/admin/user/getSelfInfo",
- method: "get",
- timeout: 60000,
- headers: {
- // Authentication: localStorage.getItem("MSSM-LIAONING__TOKEN"),
- repeatSubmit: false,
- },
- });
- },
-
-
-};
+import request from "@/utils/request";
+// 本地
+let api = process.env.NODE_ENV === "production" ?location.origin: "API"
+// 线上
+// let api = location.origin
+export default {
+ frimLogin() {
+ return request({
+ baseURL: process.env.VUE_APP_USER_LOGIN,
+ url: "/ggfw-api/pharmaceuticals/login",
+ headers: {
+ "Content-Type": "application/json",
+ isToken: true,
+ repeatSubmit: false,
+ },
+ method: "POST",
+ timeout: 60000,
+ data: {
+ // pdma: "Q2V0YzI4QGNvbQ==",
+ // urne: "2112042170015",
+ pdma: "MTExMTEx",
+ urne: "2112042170015",
+ },
+ });
+ },
+
+ getuserinfo() {
+ return request({
+ // baseURL: location.origin,
+ baseURL: api,
+ url: "/api/admin/user/getSelfInfo",
+ method: "get",
+ timeout: 60000,
+ headers: {
+ // Authentication: localStorage.getItem("MSSM-LIAONING__TOKEN"),
+ repeatSubmit: false,
+ },
+ });
+ },
+
+
+};
diff --git a/src/utils/request.js b/src/utils/request.js
index bfb1ac3..47c88d3 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,154 +1,155 @@
-import axios from 'axios'
-import { Notification, MessageBox, Message, Loading } from 'element-ui'
-import store from '@/store'
-import { getToken } from '@/utils/auth'
-import errorCode from '@/utils/errorCode'
-import { tansParams, blobValidate } from "@/utils/ruoyi";
-import cache from '@/plugins/cache'
-import { saveAs } from 'file-saver'
-
-let downloadLoadingInstance;
-// 是否显示重新登录
-export let isRelogin = { show: false };
-
-axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
-// 创建axios实例
-const service = axios.create({
- // axios中请求配置有baseURL选项，表示请求URL公共部分
- // baseURL: process.env.VUE_APP_BASE_API,
- //!线上--2.17-198
- baseURL:location.origin +"/api/ggfw",
- //!其他
- // baseURL:location.origin,
- // 超时
- timeout: 10000
-})
-
-// request拦截器
-service.interceptors.request.use(config => {
- // 是否需要设置 token
- const isToken = (config.headers || {}).isToken === false
- // 是否需要防止数据重复提交
- const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
- if (getToken() && !isToken) {
- // config.headers['Authentication'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
- config.headers['Authentication'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
- }
- // get请求映射params参数
- if (config.method === 'get' && config.params) {
- let url = config.url + '?' + tansParams(config.params);
- url = url.slice(0, -1);
- config.params = {};
- config.url = url;
- }
- if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
- const requestObj = {
- url: config.url,
- data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
- time: new Date().getTime()
- }
- const sessionObj = cache.session.getJSON('sessionObj')
- if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
- cache.session.setJSON('sessionObj', requestObj)
- } else {
- const s_url = sessionObj.url; // 请求地址
- const s_data = sessionObj.data; // 请求数据
- const s_time = sessionObj.time; // 请求时间
- const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交
- if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
- const message = '数据正在处理，请勿重复提交';
- console.warn(`[${s_url}]: ` + message)
- return Promise.reject(new Error(message))
- } else {
- cache.session.setJSON('sessionObj', requestObj)
- }
- }
- }
- return config
-}, error => {
- console.log(error)
- Promise.reject(error)
-})
-
-// 响应拦截器
-service.interceptors.response.use(res => {
- // 未设置状态码则默认成功状态
- const code = res.data.code || 200;
- // 获取错误信息
- const msg = errorCode[code] || res.data.msg || errorCode['default']
- // 二进制数据则直接返回
- if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
- return res.data
- }
- if (code === 401) {
- if (!isRelogin.show) {
- isRelogin.show = true;
- MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
- isRelogin.show = false;
- store.dispatch('LogOut').then(() => {
- location.href = `${location.origin}/login`;
- })
- }).catch(() => {
- isRelogin.show = false;
- });
- }
- return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
- } else if (code === 500) {
- Message({ message: msg, type: 'error' })
- return Promise.reject(new Error(msg))
- } else if (code === 601) {
- Message({ message: msg, type: 'warning' })
- return Promise.reject('error')
- } else if (code !== 200) {
- Notification.error({ title: msg })
- return Promise.reject('error')
- } else {
- return res.data
- }
-},
- error => {
- console.log('err' + error)
- 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) + "异常";
- setTimeout(() => {
- location.href = `${location.origin}/login`;
- }, 2000);
- }
- Message({ message: message, type: 'error', duration: 5 * 1000 })
- return Promise.reject(error)
- }
-)
-
-// 通用下载方法
-export function download(url, params, filename, config) {
- downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
- return service.post(url, params, {
- transformRequest: [(params) => { return tansParams(params) }],
- headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
- responseType: 'blob',
- ...config
- }).then(async (data) => {
- const isBlob = blobValidate(data);
- if (isBlob) {
- const blob = new Blob([data])
- saveAs(blob, filename)
- } else {
- const resText = await data.text();
- const rspObj = JSON.parse(resText);
- const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
- Message.error(errMsg);
- }
- downloadLoadingInstance.close();
- }).catch((r) => {
- console.error(r)
- Message.error('下载文件出现错误，请联系管理员！')
- downloadLoadingInstance.close();
- })
-}
-
-export default service
+import axios from 'axios'
+import { Notification, MessageBox, Message, Loading } from 'element-ui'
+import store from '@/store'
+import { getToken } from '@/utils/auth'
+import errorCode from '@/utils/errorCode'
+import { tansParams, blobValidate } from "@/utils/ruoyi";
+import cache from '@/plugins/cache'
+import { saveAs } from 'file-saver'
+
+let downloadLoadingInstance;
+// 是否显示重新登录
+export let isRelogin = { show: false };
+
+axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+// 创建axios实例
+const service = axios.create({
+ // axios中请求配置有baseURL选项，表示请求URL公共部分
+ //本地调试
+ baseURL: process.env.NODE_ENV === "production" ? location.origin +"/api/ggfw" : process.env.VUE_APP_BASE_API,
+ //!线上--2.17-198
+ // baseURL:location.origin +"/api/ggfw",
+ //!其他
+ // baseURL:location.origin,
+ // 超时
+ timeout: 10000
+})
+
+// request拦截器
+service.interceptors.request.use(config => {
+ // 是否需要设置 token
+ const isToken = (config.headers || {}).isToken === false
+ // 是否需要防止数据重复提交
+ const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
+ if (getToken() && !isToken) {
+ // config.headers['Authentication'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+ config.headers['Authentication'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+ }
+ // get请求映射params参数
+ if (config.method === 'get' && config.params) {
+ let url = config.url + '?' + tansParams(config.params);
+ url = url.slice(0, -1);
+ config.params = {};
+ config.url = url;
+ }
+ if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
+ const requestObj = {
+ url: config.url,
+ data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
+ time: new Date().getTime()
+ }
+ const sessionObj = cache.session.getJSON('sessionObj')
+ if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
+ cache.session.setJSON('sessionObj', requestObj)
+ } else {
+ const s_url = sessionObj.url; // 请求地址
+ const s_data = sessionObj.data; // 请求数据
+ const s_time = sessionObj.time; // 请求时间
+ const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交
+ if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
+ const message = '数据正在处理，请勿重复提交';
+ console.warn(`[${s_url}]: ` + message)
+ return Promise.reject(new Error(message))
+ } else {
+ cache.session.setJSON('sessionObj', requestObj)
+ }
+ }
+ }
+ return config
+}, error => {
+ console.log(error)
+ Promise.reject(error)
+})
+
+// 响应拦截器
+service.interceptors.response.use(res => {
+ // 未设置状态码则默认成功状态
+ const code = res.data.code || 200;
+ // 获取错误信息
+ const msg = errorCode[code] || res.data.msg || errorCode['default']
+ // 二进制数据则直接返回
+ if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
+ return res.data
+ }
+ if (code === 401) {
+ if (!isRelogin.show) {
+ isRelogin.show = true;
+ MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
+ isRelogin.show = false;
+ store.dispatch('LogOut').then(() => {
+ location.href = `${location.origin}/login`;
+ })
+ }).catch(() => {
+ isRelogin.show = false;
+ });
+ }
+ return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
+ } else if (code === 500) {
+ Message({ message: msg, type: 'error' })
+ return Promise.reject(new Error(msg))
+ } else if (code === 601) {
+ Message({ message: msg, type: 'warning' })
+ return Promise.reject('error')
+ } else if (code !== 200) {
+ Notification.error({ title: msg })
+ return Promise.reject('error')
+ } else {
+ return res.data
+ }
+},
+ error => {
+ console.log('err' + error)
+ 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) + "异常";
+ setTimeout(() => {
+ location.href = `${location.origin}/login`;
+ }, 2000);
+ }
+ Message({ message: message, type: 'error', duration: 5 * 1000 })
+ return Promise.reject(error)
+ }
+)
+
+// 通用下载方法
+export function download(url, params, filename, config) {
+ downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
+ return service.post(url, params, {
+ transformRequest: [(params) => { return tansParams(params) }],
+ headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+ responseType: 'blob',
+ ...config
+ }).then(async (data) => {
+ const isBlob = blobValidate(data);
+ if (isBlob) {
+ const blob = new Blob([data])
+ saveAs(blob, filename)
+ } else {
+ const resText = await data.text();
+ const rspObj = JSON.parse(resText);
+ const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
+ Message.error(errMsg);
+ }
+ downloadLoadingInstance.close();
+ }).catch((r) => {
+ console.error(r)
+ Message.error('下载文件出现错误，请联系管理员！')
+ downloadLoadingInstance.close();
+ })
+}
+
+export default service
diff --git a/src/views/index.vue b/src/views/index.vue
index 44662c4..ce33d23 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,794 +1,798 @@
-<template>
- <div class="container">
- <div class="content">
- <div class="content-top">
- <div class="content-top-left">
- <div class="content-top-left-data1">
- {{ date }}
- </div>
- <div class="content-top-left-data2">
- <div>
- {{ dataNow(3) }}
- </div>
- <div>{{ dataNow(2) }}</div>
-
- </div>
- </div>
- <div class="content-top-right">
- <div class="content-top-fanhui">
- <div class="content-top-fanhui-main" @click="fanhuimenhu">
- <div class='black-bg'></div>
- <span>返回门户</span>
- </div>
- </div>
- <div class="userInfo">
- <!-- <img src="@/assets/images/profile.jpg" alt="" /> -->
- <el-dropdown trigger="click" @command="tuichudengl">
- <span class="el-dropdown-link">
- 您好,{{ userName }}<i class="el-icon-arrow-down"></i>
- </span>
- <el-dropdown-menu slot="dropdown">
- <el-dropdown-item command="0">退出登录</el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
- </div>
- </div>
- </div>
- <div class="content-content">
- <div class="title">
- <img src="@/assets/images/daping/guangxian.png" alt="" />
- <div>产品画像搜索</div>
- </div>
- <div class="content-bottom-box">
- <div class="content-bottom">
- <div class="input">
- <el-input v-model="input" placeholder="请输入产品名称、批准文号/备案编号"></el-input>
- </div>
- <div class="sousuo" @click="gotoBgpage">
- <img src="@/assets/images/daping/searchicon.png" alt="" />
- 搜索
- </div>
- <div class="box-dialog" v-loading="loading" v-if="dialog">
- <div class="dialog-item" v-for='(item, index) in searchList' :key="index" @click="getValue(item)">
- {{ item.name }}
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="bottomList">
- <div class="conbtm-item" v-for="(item, index) in btmLitstTitle" v-show="btmLitstTitleShow">
- <span class="conitem-bgimg">{{ index + 1 }}</span>
- <div class="conitme-title"><span class="spantext">{{ item.name }}</span>：</div>
- <div class="conitme-right-item" v-for="(item, index) in item.childarray" @click="onActivebtm(item)"
- :class="activebtm == item.value ? 'conitme-right-item-active' : ''">
- {{ item.lable }}
- </div>
- </div>
- <div class="bottomListShow">
- <el-button type="success" @click="btmLitstTitleShow = !btmLitstTitleShow">{{ btmLitstTitleShow ? "收起" : "展开"
- }}<i class="el-icon-d-arrow-left"></i></el-button>
- </div>
- <div class="listBottom" v-loading="loadingTow">
- <div class="listBottom-title">
- <div class="span1"></div>
- <div class="div1">为您查询到
- <span class="span2">{{ total }}</span>
- 条数据
- </div>
- </div>
- <div class="listBottom-item" v-for="(item, index) in btmLise">
- <div class="listBottom-item-left">
- <div class="listitem-title">
- {{ item.name || "" }}
- </div>
- <div class="listitemleft-bottom">
- <span class="span1">
- <span>药品批准文号：</span>
- <el-tooltip class="item" effect="dark" :content="item.code || ''" placement="top-start">
- <span class="span2">{{ item.code || "" }}</span>
- </el-tooltip>
- </span>
- <span class="span1">
-
- <span>持有/注册/备案人:</span>
- <el-tooltip class="item" effect="dark" :content="item.scqy || ''" placement="top-start">
- <span class="span2">{{ item.scqy || "" }}</span>
- </el-tooltip>
-
- </span>
- </div>
- </div>
- <!-- <div class="listBottom-item-right">
- <div class="listitem-title">近3年统计</div>
- <div class="listitemright-bottom">
- <div class="listitemright-bottom-item">
- <img src='../assets/images/icon-xxx1.png' alt="">抽检不合格:<span>{{ item.cjbhg || "0" }}</span>
- </div>
- <div class="listitemright-bottom-item">
- <img src='../assets/images/icon-xxx2.png' alt="">不良反应:<span>{{ item.blfy || "0" }}</span>
- </div>
- <div class="listitemright-bottom-item">
- <img src='../assets/images/icon-xxx3.png' alt="">产品召回:<span>{{ item.cpzh || "0" }}</span>
- </div>
- </div>
- </div> -->
- <div class="listBottom-item-xiangqing">
- <el-button type="primary" @click="ListGO(item)">详情</el-button>
- </div>
- </div>
- </div>
- <div ref="pagination">
- <Pagination :total="total" :page="query.current" :limit="query.size" @pagination="changeList"
- :smallShow="false"></Pagination>
- </div>
-
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import Pagination from "@/views/components/Pagination";
-import { findByType } from "@/api/largeScreen/index";
-
-export default {
- name: '',
- components: { Pagination },
- data() {
- return {
- input: "",
- date: '',
- dialog: false,
- loading: true,
- searchList: [],
- getData: {},
- userName: '',
- btmLitstTitleShow: true,
- btmLitstTitle: [{
- name: "药品",
- childarray: [{
- lable: "本省注册药品",
- value: 1,
- }, {
- lable: "本省持受托生产药品",
- value: 2,
- },]
- }, {
- name: "医疗器械",
- childarray: [{
- lable: "三类医疗器械",
- value: 3,
- }, {
- lable: "三类体外诊断试剂",
- value: 4,
- }, {
- lable: "二类医疗器械",
- value: 5,
- }, {
- lable: "二类体外诊断试剂",
- value: 6,
- }, {
- lable: "一类医疗器械",
- value: 7,
- }, {
- lable: "一类体外诊断试剂",
- value: 8,
- },]
- }, {
- name: "化妆品",
- childarray: [{
- lable: "国产普通化妆品",
- value: 9,
- }, {
- lable: "国产特殊化妆品",
- value: 10,
- }, {
- lable: "进口普通化妆品",
- value: 11,
- }, {
- lable: "进口特殊化妆品",
- value: 12,
- }]
- },],
- activebtm: 1,
- query: {
- current: 1,
- size: 10,
- type: 1,
- },
- total: 0,
- btmLise: [],
- loadingTow: true
-
- }
- },
- watch: {
- async input(newValue, oldValue) {
- // let data = await this.$api.productPortrayal.findByName({current:1,size:10});
- if (newValue) {
- this.loading = true;
- this.dialog = true;
- // let a = this.throttle(this.getsearchList,500)
- this.getsearchList(newValue);
- } else {
- this.dialog = false;
- this.searchList = [];
- this.loading = false;
- }
- }
- },
- created() { this.dataNow(1) },
- mounted() {
- this.getDataInterval(1)
- this.getLiset()
- let user = JSON.parse(localStorage.getItem('userDto'))
- this.userName = user.realName
- },
- methods: {
- ListGO(item) {
- this.$router.push({ path: "/bgpage", query: { code: item.code, name: item.name, type: item.type } })
- },
- changeList(e) {
- this.loadingTow = true
- this.query.current = e.page;
- this.query.size = e.limit;
- this.getLiset()
-
- },
- onActivebtm(item) {
- this.loadingTow = true
- this.activebtm = item.value;
- this.query.current = 1;
- this.query.size = 10;
- this.query.type = item.value
- this.getLiset()
-
- },
- //获取列表
- getLiset() {
- findByType(this.query).then((res) => {
- console.log(res);
- if (res.code == 200) {
- this.total = res.data.total
- this.btmLise = res.data.records
- this.loadingTow = false
- }
- })
- },
- gotoBgpage() {
- if (this.input) {
- console.log(this.searchList, 'this.searchList')
- console.log(this.getData.code, " this.getData");
- if (this.searchList.length == 1 || this.getData.code) {
- this.$router.push({ path: "/bgpage", query: { code: this.getData.code, name: this.getData.name, type: this.getData.type } })
- this.searchList = [];
- } else if (this.searchList.length > 1) {
- this.$router.push({ path: "/bgpage", query: { code: this.searchList[0].code, name: this.searchList[0].name, type: this.searchList[0].type } })
- this.searchList = [];
- }
- }
- },
- getDataInterval(index) {
- setInterval(() => {
- this.dataNow(index)
- }, 1000);
- },
- dataNow(index) {
- let now = new Date();
-
- if (index == 1) {
- let hour = now.getHours();
- if (hour < 10) hour = "0" + hour
-
- let minute = now.getMinutes();
- if (minute < 10) minute = "0" + minute
-
- let second = now.getSeconds();
- if (second < 10) second = "0" + second
-
- this.date = `${hour}:${minute}:${second}`
- } else if (index == 2) {
- let year = now.getFullYear();
- if (year < 10) year = "0" + year
-
- let month = now.getMonth() + 1;
- if (month < 10) month = "0" + month
-
- let day = now.getDate();
- if (day < 10) day = "0" + day
-
- return `${year}/${month}/${day}`
- } else if (index == 3) {
- let dayOfWeek = now.getDay();
- // 将星期几转换为对应的中文表示
- let weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
- let chineseDayOfWeek = weekDays[dayOfWeek];
- return chineseDayOfWeek
-
- }
- },
- getValue(item) {
- this.input = item.name;
- this.getData = item;
- setTimeout(() => {
- this.dialog = false;
- }, 200);
- },
- async getsearchList(newValue) {
- let data = await this.$api.productPortrayal.findByName({ name: newValue });
- if (data.code == 200) {
- this.loading = false;
- this.searchList = data.data;
- if (this.searchList.length < 1) {
- this.dialog = false;
- }
- }
- },
- tuichudengl() {
- console.log(111);
- location.href = `${location.origin}/login`;
- },
- fanhuimenhu() {
- location.href = `${location.origin}/ims/workbench/`;
-
- }
- },
- computed: {}
-}
-</script>
-<style scoped lang='scss'>
-@import '../assets/styles/theme.scss';
-
-.container {
- width: 100vw;
- min-height: 100vh;
- padding: 10px 40px 0;
- background-color: #000000;
- position: relative;
- /* 将内容水平居中对齐 */
- background: url('../assets/images/daping/searchbg.png') no-repeat center;
- background-size: cover;
-}
-
-.content-top {
- display: flex;
- justify-content: space-between;
- align-items: center;
-
- .content-top-left {
- display: flex;
- align-items: center;
- color: #ffffff;
-
- .content-top-left-data1 {
- font-family: DIN;
- margin: 0 20px 0 0;
- font-size: 24px;
- // font-family: Helvetica;
- font-weight: bold;
- color: #FFFFFF;
- opacity: 0.72;
- }
-
- .content-top-left-data2 {
- font-size: 14px;
- font-family: Source Han Sans CN;
- font-weight: 400;
- color: #FFFFFF;
- opacity: 0.72;
- }
- }
-
- .content-top-right {
- display: flex;
- align-items: center;
- color: #ffffff;
-
- .content-top-fanhui {
- margin-right: 10px;
- background: linear-gradient(0deg, rgba(103, 200, 255, 0.2) 0%, rgba(111, 176, 231, 0.1) 100%);
- cursor: pointer;
-
- .content-top-fanhui-main {
- padding: 2px 15px;
- border: 1px solid;
- border-image: linear-gradient(0deg, #1865F2, #7BAAFF) 10 10;
- border-radius: 4px;
- display: flex;
- align-items: center;
-
- .black-bg {
- width: 36px;
- height: 34px;
- background: url('../assets/images/daping/back.png') no-repeat center;
- background-size: cover;
- margin-top: 3px;
- }
-
- span {
- font-size: 18px;
- font-family: SourceHanSansSC;
- font-weight: bold;
- color: #FEFFFF;
- text-shadow: 0px 4px 9px rgba(0, 0, 0, 0.29);
- background: linear-gradient(0deg, #CAFFFF 0%, #CAFFFF 0%, #FFFFFF 0%, #74B4F4 38.96484375%, #3883FF 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- }
- }
- }
-
- .userInfo {
- cursor: pointer;
- display: flex;
- align-items: center;
-
- img {
- width: 31px;
- height: 31px;
- border-radius: 50%;
- margin-right: 10px;
- }
- }
-
- .el-dropdown-link {
- font-size: 16px;
- font-family: SourceHanSansSC;
- font-weight: 400;
- color: #FFFFFF;
- }
- }
-
-
-}
-
-.content-content {
- height: 23vh;
- position: relative;
-}
-
-.title {
- margin-top: 60px;
- color: #fff;
-
- // display: flex;
- // justify-content: center;
- div {
- position: relative;
- z-index: 2;
- padding-left: 50px;
- text-align: center;
- font-size: 48px;
- font-family: Tensentype;
- font-weight: 700;
- color: #FFFFFF;
- line-height: 18px;
- text-shadow: 0px 8px 16px rgba(24, 118, 172, 0.6);
- // background: linear-gradient(0deg, #C2E5FF 100%);
- // -webkit-background-clip: text;
- // -webkit-text-fill-color: transparent;
- z-index: 20;
-
- }
-
- img {
- width: 316px;
- height: 316px;
- position: absolute;
- z-index: 1;
- left: 50%;
- transform: translate(-40%, -30%);
- }
-}
-
-.content-bottom-box {
- position: absolute;
- top: 60%;
- left: 50%;
- transform: translate(-50%, -50%);
- z-index: 999;
-
- .content-bottom {
- position: relative;
- // width: 800px;
- display: flex;
- align-items: center;
- color: #ffffff;
-
- .input {
- width: 739px;
-
- ::v-deep .el-input {
- background-color: transparent;
-
- input {
- border: none;
- background-color: transparent;
- height: 150px;
- background: url('../assets/images/daping/searchinputbg.png') no-repeat center;
- background-size: 100% 100%;
- padding-left: 50px;
- font-size: 20px;
- font-family: Source Han Sans CN;
- font-weight: 400;
- color: #9CB4E2;
- line-height: 18px;
- overflow: hidden;
- padding-right: 30px;
- }
- }
- }
-
- .sousuo {
- position: absolute;
- left: 710px;
- // padding: 3px 5px;
- width: 162px;
- height: 55px;
- display: flex;
- align-items: center;
- justify-content: center;
- background: url('../assets/images/daping/searchbuttonbg.png') no-repeat center;
- background-size: 100% 100%;
- font-size: 24px;
- font-family: Source Han Sans CN;
- font-weight: bold;
- color: #FFFFFF;
- line-height: 18px;
- cursor: pointer;
-
- img {
- width: 25px;
- height: 25px;
- margin-right: 10px;
-
- }
- }
-
- .box-dialog {
- position: absolute;
- width: 690px;
- height: 300px;
- top: 120px;
- left: 10px;
- padding: 2px;
- // background: linear-gradient(to right, rgba(24, 101, 242, 0.1), rgba(24, 101, 242, 0.1));
- background: linear-gradient(to right, rgb(1, 2, 62), rgb(25, 31, 84));
- overflow: scroll;
-
- .dialog-item {
- // padding: 15px 27px;
- padding: 5px 10px;
- font-size: 18px;
- font-family: Source Han Sans CN;
- font-weight: 400;
- color: #FFFFFF;
- cursor: pointer;
- // line-height: 50px;
- // background-color: rgb(63,110,204)
- // background-color: rgba(205,235,243,0.1)
- }
-
- .dialog-item:hover {
- background-color: rgb(63, 110, 204)
- }
- }
- }
-}
-
-.bottomList {
- padding-left: 50px;
- color: #fff;
-
- .conbtm-item {
- display: flex;
- align-items: center;
- margin: 20px 0;
- color: #fff;
-
- .conitem-bgimg {
- width: 45px;
- height: 45px;
- font-size: 16px;
- background-image: url("../assets/images/icon-type.png");
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- .conitme-title {
- color: #f28221;
- padding: 0 15px;
- font-size: 17px;
- text-align: justify;
-
- /* 将文字两端对齐 */
- .spantext {
- display: inline-block;
- width: 70px;
- text-align: justify;
- text-align-last: justify;
- }
- }
-
- .conitme-right-item {
- padding: 10px 20px;
- background-color: #314b70;
- margin-right: 1rem;
- border-radius: 5px;
- font-size: 18px;
- cursor: pointer;
-
- &:hover {
- background: #1d82dc;
-
- }
- }
-
- .conitme-right-item-active {
- background: #1d82dc;
- }
-
- }
-
- .bottomListShow {
- position: relative;
- z-index: 200;
- text-align: center;
- margin-left: -60px;
-
- .el-icon-d-arrow-left {
- transform: rotate(90deg);
- font-size: 16px;
- margin-left: 5px;
-
- }
-
- ::v-deep .el-button {
- font-size: 16px;
- background: #4ed4a4;
- }
- }
-
- .listBottom {
- .listBottom-title {
- display: flex;
- align-items: center;
-
- .span1 {
- width: 25px;
- height: 20px;
- background-image: url("../assets/images/icon-search.png");
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
- margin-right: 10px;
- }
-
- .div1 {
- color: #accbee;
- font-size: 16px;
-
- .span2 {
- color: #0cc16e;
- margin: 0 8px;
- }
- }
- }
-
-
-
- .listBottom-item {
- width: 100%;
- display: flex;
- justify-content: space-between;
- padding: 15px 20px;
- color: #fff;
- background: #1f3552;
- border-radius: 10px;
- margin: 15px 0;
-
- .listitem-title {
- width: 100%;
- white-space: nowrap;
- /* 禁止文本换行 */
- overflow: hidden;
- /* 溢出部分隐藏 */
- text-overflow: ellipsis;
- font-weight: 700;
- font-size: 18px;
- }
-
-
- .listBottom-item-left {
- width: 40%;
-
- .listitemleft-bottom {
- margin-top: 20px;
- color: #accbee;
- font-size: 18px;
- display: flex;
- align-items: center;
-
- .span1 {
- margin-right: 10px;
- display: flex;
- align-items: center;
-
- .span2 {
- display: inline-block;
- width: 200px;
- white-space: nowrap;
- /* 禁止文本换行 */
- overflow: hidden;
- /* 溢出部分隐藏 */
- text-overflow: ellipsis;
- /* 显示省略号 */
- }
- }
- }
-
- }
-
- .listBottom-item-right {
- width: 50%;
-
- .listitemright-bottom {
- display: flex;
- align-items: center;
-
- .listitemright-bottom-item {
- margin-top: 10px;
- display: flex;
- align-items: center;
- font-size: 18px;
- margin-right: 10px;
-
- img {
- width: 45px;
- height: 45px;
- margin-right: 10px;
- }
-
- span {
- margin-left: 10px;
- color: #35c4ff;
- font-size: 28px;
- font-weight: 700;
- }
- }
- }
- }
-
- .listBottom-item-xiangqing {
- display: flex;
- align-items: center;
-
- ::v-deep .el-button {
- font-size: 16px;
- }
- }
-
-
- }
- }
-}
-
-
-//设置遮罩层颜色
-::v-deep .el-loading-mask {
- background-color: rgba(205, 235, 243, 0.1);
-}
-
-// //设置图标颜色
-// ::v-deep .el-loading-spinner .path{
-// stroke: #005432;
-// }
-// 设置文字颜色
-// ::v-deep .el-loading-spinner .el-loading-text{
-// color: #005432;
-// }</style>
\ No newline at end of file
+<template>
+ <div class="container">
+ <div class="content">
+ <div class="content-top">
+ <div class="content-top-left">
+ <div class="content-top-left-data1">
+ {{ date }}
+ </div>
+ <div class="content-top-left-data2">
+ <div>
+ {{ dataNow(3) }}
+ </div>
+ <div>{{ dataNow(2) }}</div>
+
+ </div>
+ </div>
+ <div class="content-top-right">
+ <div class="content-top-fanhui">
+ <div class="content-top-fanhui-main" @click="fanhuimenhu">
+ <div class='black-bg'></div>
+ <span>返回门户</span>
+ </div>
+ </div>
+ <div class="userInfo">
+ <!-- <img src="@/assets/images/profile.jpg" alt="" /> -->
+ <el-dropdown trigger="click" @command="tuichudengl">
+ <span class="el-dropdown-link">
+ 您好,{{ userName }}<i class="el-icon-arrow-down"></i>
+ </span>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item command="0">退出登录</el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
+ </div>
+ </div>
+ </div>
+ <div class="content-content">
+ <div class="title">
+ <img src="@/assets/images/daping/guangxian.png" alt="" />
+ <div>产品画像搜索</div>
+ </div>
+ <div class="content-bottom-box">
+ <div class="content-bottom">
+ <div class="input">
+ <el-input v-model="input" placeholder="请输入产品名称、批准文号/备案编号"></el-input>
+ </div>
+ <!-- @click="gotoBgpage" -->
+ <div class="sousuo" @click="getsearchList()" >
+ <img src="@/assets/images/daping/searchicon.png" alt="" />
+ 搜索
+ </div>
+ <div class="box-dialog" v-loading="loading" v-show="!loading">
+ <div class="dialog-item" v-for='(item, index) in searchList' :key="index" @click="getValue(item)">
+ {{ item.name }}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="bottomList">
+ <div class="conbtm-item" v-for="(item, index) in btmLitstTitle" v-show="btmLitstTitleShow">
+ <span class="conitem-bgimg">{{ index + 1 }}</span>
+ <div class="conitme-title"><span class="spantext">{{ item.name }}</span>：</div>
+ <div class="conitme-right-item" v-for="(item, index) in item.childarray" @click="onActivebtm(item)"
+ :class="activebtm == item.value ? 'conitme-right-item-active' : ''">
+ {{ item.lable }}
+ </div>
+ </div>
+ <div class="bottomListShow">
+ <el-button type="success" @click="btmLitstTitleShow = !btmLitstTitleShow">{{ btmLitstTitleShow ? "收起" : "展开"
+ }}<i class="el-icon-d-arrow-left"></i></el-button>
+ </div>
+ <div class="listBottom" v-loading="loadingTow">
+ <div class="listBottom-title">
+ <div class="span1"></div>
+ <div class="div1">为您查询到
+ <span class="span2">{{ total }}</span>
+ 条数据
+ </div>
+ </div>
+ <div class="listBottom-item" v-for="(item, index) in btmLise">
+ <div class="listBottom-item-left">
+ <div class="listitem-title">
+ {{ item.name || "" }}
+ </div>
+ <div class="listitemleft-bottom">
+ <span class="span1">
+ <span>药品批准文号：</span>
+ <el-tooltip class="item" effect="dark" :content="item.code || ''" placement="top-start">
+ <span class="span2">{{ item.code || "" }}</span>
+ </el-tooltip>
+ </span>
+ <span class="span1">
+
+ <span>持有/注册/备案人:</span>
+ <el-tooltip class="item" effect="dark" :content="item.scqy || ''" placement="top-start">
+ <span class="span2">{{ item.scqy || "" }}</span>
+ </el-tooltip>
+
+ </span>
+ </div>
+ </div>
+ <!-- <div class="listBottom-item-right">
+ <div class="listitem-title">近3年统计</div>
+ <div class="listitemright-bottom">
+ <div class="listitemright-bottom-item">
+ <img src='../assets/images/icon-xxx1.png' alt="">抽检不合格:<span>{{ item.cjbhg || "0" }}</span>
+ </div>
+ <div class="listitemright-bottom-item">
+ <img src='../assets/images/icon-xxx2.png' alt="">不良反应:<span>{{ item.blfy || "0" }}</span>
+ </div>
+ <div class="listitemright-bottom-item">
+ <img src='../assets/images/icon-xxx3.png' alt="">产品召回:<span>{{ item.cpzh || "0" }}</span>
+ </div>
+ </div>
+ </div> -->
+ <div class="listBottom-item-xiangqing">
+ <el-button type="primary" @click="ListGO(item)">详情</el-button>
+ </div>
+ </div>
+ </div>
+ <div ref="pagination">
+ <Pagination :total="total" :page="query.current" :limit="query.size" @pagination="changeList"
+ :smallShow="false"></Pagination>
+ </div>
+
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import Pagination from "@/views/components/Pagination";
+import { findByType } from "@/api/largeScreen/index";
+
+export default {
+ name: '',
+ components: { Pagination },
+ data() {
+ return {
+ input: "",
+ date: '',
+ dialog: false,
+ loading: true,
+ searchList: [],
+ getData: {},
+ userName: '',
+ btmLitstTitleShow: true,
+ btmLitstTitle: [{
+ name: "药品",
+ childarray: [{
+ lable: "本省注册药品",
+ value: 1,
+ }, {
+ lable: "本省持受托生产药品",
+ value: 2,
+ },]
+ }, {
+ name: "医疗器械",
+ childarray: [{
+ lable: "三类医疗器械",
+ value: 3,
+ }, {
+ lable: "三类体外诊断试剂",
+ value: 4,
+ }, {
+ lable: "二类医疗器械",
+ value: 5,
+ }, {
+ lable: "二类体外诊断试剂",
+ value: 6,
+ }, {
+ lable: "一类医疗器械",
+ value: 7,
+ }, {
+ lable: "一类体外诊断试剂",
+ value: 8,
+ },]
+ }, {
+ name: "化妆品",
+ childarray: [{
+ lable: "国产普通化妆品",
+ value: 9,
+ }, {
+ lable: "国产特殊化妆品",
+ value: 10,
+ }, {
+ lable: "进口普通化妆品",
+ value: 11,
+ }, {
+ lable: "进口特殊化妆品",
+ value: 12,
+ }]
+ },],
+ activebtm: 1,
+ query: {
+ current: 1,
+ size: 10,
+ type: 1,
+ },
+ total: 0,
+ btmLise: [],
+ loadingTow: true
+
+ }
+ },
+ watch: {
+ // async input(newValue, oldValue) {
+ // // let data = await this.$api.productPortrayal.findByName({current:1,size:10});
+ // if (newValue) {
+ // this.loading = true;
+ // this.dialog = true;
+ // // let a = this.throttle(this.getsearchList,500)
+ // this.getsearchList(newValue);
+ // } else {
+ // this.dialog = false;
+ // this.searchList = [];
+ // this.loading = false;
+ // }
+ // }
+ },
+ created() { this.dataNow(1) },
+ mounted() {
+ this.getDataInterval(1)
+ this.getLiset()
+ let user = JSON.parse(localStorage.getItem('userDto'))
+ this.userName = user.realName
+ },
+ methods: {
+
+ ListGO(item) {
+ this.$router.push({ path: "/bgpage", query: { code: item.code, name: item.name, type: item.type } })
+ },
+ changeList(e) {
+ this.loadingTow = true
+ this.query.current = e.page;
+ this.query.size = e.limit;
+ this.getLiset()
+
+ },
+ onActivebtm(item) {
+ this.loadingTow = true
+ this.activebtm = item.value;
+ this.query.current = 1;
+ this.query.size = 10;
+ this.query.type = item.value
+ this.getLiset()
+
+ },
+ //获取列表
+ getLiset() {
+ findByType(this.query).then((res) => {
+ console.log(res);
+ if (res.code == 200) {
+ this.total = res.data.total
+ this.btmLise = res.data.records
+ this.loadingTow = false
+ }
+ })
+ },
+ gotoBgpage() {
+ if (this.input) {
+ console.log(this.searchList, 'this.searchList')
+ console.log(this.getData.code, " this.getData");
+ if (this.searchList.length == 1 || this.getData.code) {
+ this.$router.push({ path: "/bgpage", query: { code: this.getData.code, name: this.getData.name, type: this.getData.type } })
+ this.searchList = [];
+ } else if (this.searchList.length > 1) {
+ this.$router.push({ path: "/bgpage", query: { code: this.searchList[0].code, name: this.searchList[0].name, type: this.searchList[0].type } })
+ this.searchList = [];
+ }
+ }
+ },
+ getDataInterval(index) {
+ setInterval(() => {
+ this.dataNow(index)
+ }, 1000);
+ },
+ dataNow(index) {
+ let now = new Date();
+
+ if (index == 1) {
+ let hour = now.getHours();
+ if (hour < 10) hour = "0" + hour
+
+ let minute = now.getMinutes();
+ if (minute < 10) minute = "0" + minute
+
+ let second = now.getSeconds();
+ if (second < 10) second = "0" + second
+
+ this.date = `${hour}:${minute}:${second}`
+ } else if (index == 2) {
+ let year = now.getFullYear();
+ if (year < 10) year = "0" + year
+
+ let month = now.getMonth() + 1;
+ if (month < 10) month = "0" + month
+
+ let day = now.getDate();
+ if (day < 10) day = "0" + day
+
+ return `${year}/${month}/${day}`
+ } else if (index == 3) {
+ let dayOfWeek = now.getDay();
+ // 将星期几转换为对应的中文表示
+ let weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+ let chineseDayOfWeek = weekDays[dayOfWeek];
+ return chineseDayOfWeek
+
+ }
+ },
+ getValue(item) {
+ this.input = item.name;
+ this.getData = item;
+ this.loading = true;
+ this.gotoBgpage()
+
+ },
+ async getsearchList() {
+ let res = await this.$api.productPortrayal.findByName({ name: this.input });
+ this.loading = false;
+ this.searchList = res.data;
+
+ if(this.searchList.length>0){
+ this.loading = false
+ }else{
+ this.$modal.msgWarning("未搜索到结果！")
+ this.loading = true
+ }
+ },
+ tuichudengl() {
+ console.log(111);
+ location.href = `${location.origin}/login`;
+ },
+ fanhuimenhu() {
+ location.href = `${location.origin}/ims/workbench/`;
+
+ }
+ },
+ computed: {}
+}
+</script>
+<style scoped lang='scss'>
+@import '../assets/styles/theme.scss';
+
+.container {
+ width: 100vw;
+ min-height: 100vh;
+ padding: 10px 40px 0;
+ background-color: #000000;
+ position: relative;
+ /* 将内容水平居中对齐 */
+ background: url('../assets/images/daping/searchbg.png') no-repeat center;
+ background-size: cover;
+}
+
+.content-top {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .content-top-left {
+ display: flex;
+ align-items: center;
+ color: #ffffff;
+
+ .content-top-left-data1 {
+ font-family: DIN;
+ margin: 0 20px 0 0;
+ font-size: 24px;
+ // font-family: Helvetica;
+ font-weight: bold;
+ color: #FFFFFF;
+ opacity: 0.72;
+ }
+
+ .content-top-left-data2 {
+ font-size: 14px;
+ font-family: Source Han Sans CN;
+ font-weight: 400;
+ color: #FFFFFF;
+ opacity: 0.72;
+ }
+ }
+
+ .content-top-right {
+ display: flex;
+ align-items: center;
+ color: #ffffff;
+
+ .content-top-fanhui {
+ margin-right: 10px;
+ background: linear-gradient(0deg, rgba(103, 200, 255, 0.2) 0%, rgba(111, 176, 231, 0.1) 100%);
+ cursor: pointer;
+
+ .content-top-fanhui-main {
+ padding: 2px 15px;
+ border: 1px solid;
+ border-image: linear-gradient(0deg, #1865F2, #7BAAFF) 10 10;
+ border-radius: 4px;
+ display: flex;
+ align-items: center;
+
+ .black-bg {
+ width: 36px;
+ height: 34px;
+ background: url('../assets/images/daping/back.png') no-repeat center;
+ background-size: cover;
+ margin-top: 3px;
+ }
+
+ span {
+ font-size: 18px;
+ font-family: SourceHanSansSC;
+ font-weight: bold;
+ color: #FEFFFF;
+ text-shadow: 0px 4px 9px rgba(0, 0, 0, 0.29);
+ background: linear-gradient(0deg, #CAFFFF 0%, #CAFFFF 0%, #FFFFFF 0%, #74B4F4 38.96484375%, #3883FF 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+ }
+ }
+
+ .userInfo {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+
+ img {
+ width: 31px;
+ height: 31px;
+ border-radius: 50%;
+ margin-right: 10px;
+ }
+ }
+
+ .el-dropdown-link {
+ font-size: 16px;
+ font-family: SourceHanSansSC;
+ font-weight: 400;
+ color: #FFFFFF;
+ }
+ }
+
+
+}
+
+.content-content {
+ height: 23vh;
+ position: relative;
+}
+
+.title {
+ margin-top: 60px;
+ color: #fff;
+
+ // display: flex;
+ // justify-content: center;
+ div {
+ position: relative;
+ z-index: 2;
+ padding-left: 50px;
+ text-align: center;
+ font-size: 48px;
+ font-family: Tensentype;
+ font-weight: 700;
+ color: #FFFFFF;
+ line-height: 18px;
+ text-shadow: 0px 8px 16px rgba(24, 118, 172, 0.6);
+ // background: linear-gradient(0deg, #C2E5FF 100%);
+ // -webkit-background-clip: text;
+ // -webkit-text-fill-color: transparent;
+ z-index: 20;
+
+ }
+
+ img {
+ width: 316px;
+ height: 316px;
+ position: absolute;
+ z-index: 1;
+ left: 50%;
+ transform: translate(-40%, -30%);
+ }
+}
+
+.content-bottom-box {
+ position: absolute;
+ top: 60%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 999;
+
+ .content-bottom {
+ position: relative;
+ // width: 800px;
+ display: flex;
+ align-items: center;
+ color: #ffffff;
+
+ .input {
+ width: 739px;
+
+ ::v-deep .el-input {
+ background-color: transparent;
+
+ input {
+ border: none;
+ background-color: transparent;
+ height: 150px;
+ background: url('../assets/images/daping/searchinputbg.png') no-repeat center;
+ background-size: 100% 100%;
+ padding-left: 50px;
+ font-size: 20px;
+ font-family: Source Han Sans CN;
+ font-weight: 400;
+ color: #9CB4E2;
+ line-height: 18px;
+ overflow: hidden;
+ padding-right: 30px;
+ }
+ }
+ }
+
+ .sousuo {
+ position: absolute;
+ left: 710px;
+ // padding: 3px 5px;
+ width: 162px;
+ height: 55px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: url('../assets/images/daping/searchbuttonbg.png') no-repeat center;
+ background-size: 100% 100%;
+ font-size: 24px;
+ font-family: Source Han Sans CN;
+ font-weight: bold;
+ color: #FFFFFF;
+ line-height: 18px;
+ cursor: pointer;
+
+ img {
+ width: 25px;
+ height: 25px;
+ margin-right: 10px;
+
+ }
+ }
+
+ .box-dialog {
+ position: absolute;
+ width: 690px;
+ height: 300px;
+ top: 120px;
+ left: 10px;
+ padding: 2px;
+ // background: linear-gradient(to right, rgba(24, 101, 242, 0.1), rgba(24, 101, 242, 0.1));
+ background: linear-gradient(to right, rgb(1, 2, 62), rgb(25, 31, 84));
+ overflow: scroll;
+
+ .dialog-item {
+ // padding: 15px 27px;
+ padding: 5px 10px;
+ font-size: 18px;
+ font-family: Source Han Sans CN;
+ font-weight: 400;
+ color: #FFFFFF;
+ cursor: pointer;
+ // line-height: 50px;
+ // background-color: rgb(63,110,204)
+ // background-color: rgba(205,235,243,0.1)
+ }
+
+ .dialog-item:hover {
+ background-color: rgb(63, 110, 204)
+ }
+ }
+ }
+}
+
+.bottomList {
+ padding-left: 50px;
+ color: #fff;
+
+ .conbtm-item {
+ display: flex;
+ align-items: center;
+ margin: 20px 0;
+ color: #fff;
+
+ .conitem-bgimg {
+ width: 45px;
+ height: 45px;
+ font-size: 16px;
+ background-image: url("../assets/images/icon-type.png");
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .conitme-title {
+ color: #f28221;
+ padding: 0 15px;
+ font-size: 17px;
+ text-align: justify;
+
+ /* 将文字两端对齐 */
+ .spantext {
+ display: inline-block;
+ width: 70px;
+ text-align: justify;
+ text-align-last: justify;
+ }
+ }
+
+ .conitme-right-item {
+ padding: 10px 20px;
+ background-color: #314b70;
+ margin-right: 1rem;
+ border-radius: 5px;
+ font-size: 18px;
+ cursor: pointer;
+
+ &:hover {
+ background: #1d82dc;
+
+ }
+ }
+
+ .conitme-right-item-active {
+ background: #1d82dc;
+ }
+
+ }
+
+ .bottomListShow {
+ position: relative;
+ z-index: 200;
+ text-align: center;
+ margin-left: -60px;
+
+ .el-icon-d-arrow-left {
+ transform: rotate(90deg);
+ font-size: 16px;
+ margin-left: 5px;
+
+ }
+
+ ::v-deep .el-button {
+ font-size: 16px;
+ background: #4ed4a4;
+ }
+ }
+
+ .listBottom {
+ .listBottom-title {
+ display: flex;
+ align-items: center;
+
+ .span1 {
+ width: 25px;
+ height: 20px;
+ background-image: url("../assets/images/icon-search.png");
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ margin-right: 10px;
+ }
+
+ .div1 {
+ color: #accbee;
+ font-size: 16px;
+
+ .span2 {
+ color: #0cc16e;
+ margin: 0 8px;
+ }
+ }
+ }
+
+
+
+ .listBottom-item {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ padding: 15px 20px;
+ color: #fff;
+ background: #1f3552;
+ border-radius: 10px;
+ margin: 15px 0;
+
+ .listitem-title {
+ width: 100%;
+ white-space: nowrap;
+ /* 禁止文本换行 */
+ overflow: hidden;
+ /* 溢出部分隐藏 */
+ text-overflow: ellipsis;
+ font-weight: 700;
+ font-size: 18px;
+ }
+
+
+ .listBottom-item-left {
+ width: 40%;
+
+ .listitemleft-bottom {
+ margin-top: 20px;
+ color: #accbee;
+ font-size: 18px;
+ display: flex;
+ align-items: center;
+
+ .span1 {
+ margin-right: 10px;
+ display: flex;
+ align-items: center;
+
+ .span2 {
+ display: inline-block;
+ width: 200px;
+ white-space: nowrap;
+ /* 禁止文本换行 */
+ overflow: hidden;
+ /* 溢出部分隐藏 */
+ text-overflow: ellipsis;
+ /* 显示省略号 */
+ }
+ }
+ }
+
+ }
+
+ .listBottom-item-right {
+ width: 50%;
+
+ .listitemright-bottom {
+ display: flex;
+ align-items: center;
+
+ .listitemright-bottom-item {
+ margin-top: 10px;
+ display: flex;
+ align-items: center;
+ font-size: 18px;
+ margin-right: 10px;
+
+ img {
+ width: 45px;
+ height: 45px;
+ margin-right: 10px;
+ }
+
+ span {
+ margin-left: 10px;
+ color: #35c4ff;
+ font-size: 28px;
+ font-weight: 700;
+ }
+ }
+ }
+ }
+
+ .listBottom-item-xiangqing {
+ display: flex;
+ align-items: center;
+
+ ::v-deep .el-button {
+ font-size: 16px;
+ }
+ }
+
+
+ }
+ }
+}
+
+
+//设置遮罩层颜色
+::v-deep .el-loading-mask {
+ background-color: rgba(205, 235, 243, 0.1);
+}
+
+// //设置图标颜色
+// ::v-deep .el-loading-spinner .path{
+// stroke: #005432;
+// }
+// 设置文字颜色
+// ::v-deep .el-loading-spinner .el-loading-text{
+// color: #005432;
+// }</style>