451 lines
8.3 KiB
Vue
451 lines
8.3 KiB
Vue
|
|
<template>
|
|
<router-view v-slot="{ Component }">
|
|
<Component :is="Component"></Component>
|
|
<van-popup v-model:show="showAlert" closeable :close-on-click-overlay="false" close-icon-position="top-right"
|
|
position="bottom" @close="closePopup">
|
|
<div class="alert-content">
|
|
<div class="alert-cnt">
|
|
<van-icon name="warning-o" color="orange"></van-icon> {{ message }}
|
|
</div>
|
|
<div class="foot-btn">
|
|
<van-button round block type="primary" @click="okUpdate"> 确定更新 </van-button>
|
|
</div>
|
|
</div>
|
|
</van-popup>
|
|
</router-view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import watermark from "./utils/watermark.js";
|
|
import emitter from "./utils/eventBus.js";
|
|
import { onMounted, onUnmounted, ref, watch, reactive } from "vue";
|
|
import { getMyTaskList, getMyTaskTotal } from "./api/rwzx.js";
|
|
import { updateDate } from "./api/checkponit.js";
|
|
import { getDistance, hintToast, timeValidate } from "./utils/tools";
|
|
import { getAPPLocation } from "./api/spsApi";
|
|
import { useRoute } from "vue-router";
|
|
import router from "./router/index.js";
|
|
import store from "./store";
|
|
const route = useRoute();
|
|
let userLocation = null; //用户位置信息
|
|
const keepAlive = ref(false);
|
|
const routerName = ref(""); //要跳转的路由名称
|
|
const bbTime = ref(null); //查询报备定时函数
|
|
let userInfo;
|
|
let message = ref("版本已经更新，请退出重新登录!");
|
|
try {
|
|
userInfo = JSON.parse(window.localStorage.getItem("userInfo")); //用户信息
|
|
userLocation = JSON.parse(bridge.getLocation()); //手机端
|
|
} catch (error) {
|
|
userLocation = setPint(); //PC端
|
|
}
|
|
const isLogin = ref(true);
|
|
const isFirst = ref(true);
|
|
const isVersion = ref(true);
|
|
const showAlert = ref(false); //版本更新弹窗
|
|
|
|
watch(
|
|
() => route,
|
|
(val) => {
|
|
if (val.path != "/") {
|
|
if (isLogin.value) {
|
|
// 水印
|
|
let user = JSON.parse(localStorage.getItem("userInfo"));
|
|
if (user) {
|
|
let name =
|
|
user.userName +
|
|
"(" +
|
|
user.inDustRialId +
|
|
")" +
|
|
" - " +
|
|
user.deptName;
|
|
let time = timeValidate(new Date());
|
|
watermark.set(name, time);
|
|
}
|
|
}
|
|
isLogin.value = false;
|
|
} else {
|
|
isLogin.value = true; //退出
|
|
}
|
|
},
|
|
{
|
|
deep: true,
|
|
immediate: true,
|
|
}
|
|
);
|
|
|
|
onMounted(() => {
|
|
//默认设置用户主题色
|
|
if (!getStorage("themeSetting")) {
|
|
setStorage("themeSetting", "light");
|
|
}
|
|
//设置主题颜色
|
|
let themeType = getStorage("themeSetting");
|
|
setAttribute(themeType == "light" ? "theme1" : "theme2");
|
|
//手动点击首页设置主题色
|
|
emitter.on("selectTheme", (res) => {
|
|
setAttribute(res); // 应用主题
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
// 关闭提示
|
|
function closePopup() {
|
|
clearInterval(bbTime.value);
|
|
bbTime.value = null;
|
|
showAlert.value = false;
|
|
}
|
|
//随机生成坐标
|
|
function setPint() {
|
|
let obj = {};
|
|
for (let i = 0; i < 1; i++) {
|
|
obj = {
|
|
app_x: 104.019822 + Math.random() / 5,
|
|
app_y: 30.450369 + Math.random() / 5,
|
|
app_sfzh: userInfo ? userInfo.idEntityCard : "",
|
|
};
|
|
}
|
|
return obj;
|
|
}
|
|
|
|
// 调用任务接口
|
|
function _getTaskList() {
|
|
let data = {
|
|
pageSize: 10,
|
|
pageCurrent: 1,
|
|
};
|
|
getMyTaskList(data).then((res) => { });
|
|
}
|
|
onUnmounted(() => {
|
|
clearInterval(bbTime.value);
|
|
bbTime.value = null;
|
|
});
|
|
|
|
function setAttribute(theme) {
|
|
window.document.documentElement.setAttribute("data-theme", theme);
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "./assets/styles/mixin.scss";
|
|
|
|
body {
|
|
@include bg_color($background-color-theme);
|
|
}
|
|
|
|
#app {
|
|
width: 100vw;
|
|
}
|
|
|
|
.alert-content {
|
|
height: 24vw;
|
|
|
|
.alert-cnt {
|
|
margin-top: 10vw;
|
|
text-align: center;
|
|
|
|
.van-icon {
|
|
margin-right: 2vw;
|
|
}
|
|
}
|
|
|
|
.foot-btn {
|
|
margin: 4vw 5vw;
|
|
}
|
|
}
|
|
|
|
//首页模块标题样式
|
|
.leaderTitle {
|
|
height: 12.2vw;
|
|
line-height: 12.2vw;
|
|
font-size: 4.26667vw;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 4.5vw;
|
|
font-weight: 550;
|
|
@include font_color($font-color-theme);
|
|
}
|
|
|
|
.leaderTitle .title img {
|
|
width: 5.33334vw;
|
|
height: 5.33334vw;
|
|
margin-right: 2vw;
|
|
}
|
|
|
|
.leaderTitle .title img,
|
|
.leaderTitle .title span {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.leaderTitle .title {
|
|
padding: 0 0 0;
|
|
}
|
|
|
|
// .leaderTitle,
|
|
// .jrfxBox,
|
|
// .leaderTzBox,
|
|
// .leaderPubBox {
|
|
// position: relative;
|
|
// top: -6vw;
|
|
// }
|
|
|
|
//统计数据条格样式
|
|
.item_box {
|
|
@include font_color($font-color-theme);
|
|
border-radius: 2.5vw;
|
|
@include bg_color($background-color-theme);
|
|
@include border_outer_color($border-outer-color-theme);
|
|
// height: 28vw;
|
|
}
|
|
|
|
//左侧标题样式
|
|
.wq_title {
|
|
/* flex: 1; */
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
width: 8vw;
|
|
@include font_size($font_medium_s);
|
|
color: #fff;
|
|
background-color: #104ecc;
|
|
padding: 1vw 0;
|
|
}
|
|
|
|
//统计字体大小
|
|
.numb {
|
|
padding-top: 1vw;
|
|
font-weight: 500;
|
|
font-size: 6vw;
|
|
@include total_font_color($total-font-color-theme);
|
|
}
|
|
|
|
//空数据样式
|
|
.van-empty {
|
|
margin-top: 15vw !important;
|
|
}
|
|
|
|
.home_box {
|
|
@include bg_color($background-color-theme);
|
|
}
|
|
|
|
.leaderBg {
|
|
padding: 20vw 0 4vw 0;
|
|
}
|
|
|
|
/* 首页头部banner和按钮 */
|
|
.leaderTop {
|
|
height: 45.33334vw;
|
|
background: url("./assets/images/new/banner.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
width: 100%;
|
|
top: -6vw;
|
|
margin-bottom: 7vw;
|
|
}
|
|
|
|
.isGq {
|
|
background: url("./assets/images/new/banner_gq.png") no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.welcome {
|
|
font-size: 4.26667vw;
|
|
// padding: 14.46667vw 4.73334vw 0 5.73334vw;
|
|
padding: 12.86667vw 5.73334vw 2vw 5.73334vw;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
// margin-bottom: 6vw;
|
|
// margin-bottom: 14vw;
|
|
.userName_box {
|
|
// background: linear-gradient(0deg, #ff949e 0%, #f63c4b 100%);
|
|
// -webkit-background-clip: text;
|
|
// -webkit-text-fill-color: transparent;
|
|
// font-weight: bold;
|
|
color: #fff;
|
|
@include font_size($font_medium);
|
|
display: block;
|
|
padding-bottom: 1.5vw;
|
|
}
|
|
|
|
.tq_box {
|
|
display: block;
|
|
@include font_size($font_medium_s);
|
|
padding-left: 0.5vw;
|
|
margin-bottom: 2vw;
|
|
}
|
|
}
|
|
|
|
.welcome img.face {
|
|
height: 4.26667vw;
|
|
vertical-align: middle;
|
|
margin-right: 2vw;
|
|
}
|
|
|
|
.welcome span {
|
|
vertical-align: middle;
|
|
// color: #fff !important;
|
|
// @include font_color($font-color-theme);
|
|
}
|
|
|
|
//列表顶部时间样式
|
|
.time_icon {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.timeicon {
|
|
width: 3.5vw;
|
|
height: 3.5vw;
|
|
margin-right: 1.5vw;
|
|
}
|
|
}
|
|
|
|
.other_type_title {
|
|
color: #3e6ee8;
|
|
position: relative;
|
|
padding-left: 2vw;
|
|
}
|
|
|
|
.other_type_title::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 0.55vw;
|
|
height: 4vw;
|
|
left: 0;
|
|
top: 0.8vw;
|
|
background-color: #3e6ee8;
|
|
}
|
|
|
|
.gauge {
|
|
margin: 2vw 3.5vw;
|
|
}
|
|
|
|
// 字体颜色
|
|
.yellow {
|
|
color: #ffcc40;
|
|
}
|
|
|
|
.red {
|
|
color: red;
|
|
}
|
|
|
|
.green {
|
|
color: #07c160;
|
|
}
|
|
|
|
.bule {
|
|
color: #3e6ee8;
|
|
}
|
|
|
|
.cyan {
|
|
color: cyan;
|
|
}
|
|
|
|
.bg_yellow {
|
|
background-color: #ffcc40;
|
|
}
|
|
|
|
.bg_red {
|
|
background-color: red;
|
|
}
|
|
|
|
.bg_orange {
|
|
background-color: orange;
|
|
}
|
|
|
|
.bg_green {
|
|
background-color: #07c160;
|
|
}
|
|
|
|
.bg_bule {
|
|
background-color: #3e6ee8;
|
|
}
|
|
|
|
.bg_cyan {
|
|
background-color: cyan;
|
|
}
|
|
|
|
//底部按钮样式
|
|
.mapPattern {
|
|
padding: 10vw 20vw;
|
|
}
|
|
|
|
//只显示一排内容
|
|
.text_title {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
//只显示两排内容
|
|
.text_detail {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
//印章样式
|
|
.zwzl_box {
|
|
position: absolute;
|
|
right: -1vw;
|
|
width: 18vw;
|
|
top: 6vw;
|
|
}
|
|
|
|
//地图模板样式
|
|
.modelHtml {
|
|
@include font_size($font_medium_s);
|
|
background: #fff;
|
|
padding: 5vw;
|
|
border-radius: 1vw;
|
|
position: relative;
|
|
|
|
.mapClass {
|
|
position: absolute;
|
|
font-size: 25px;
|
|
top: -2px;
|
|
right: 1vw;
|
|
}
|
|
}
|
|
|
|
.textimeFzyc {
|
|
background: linear-gradient(to bottom, #ffffff, #02f131);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
font-size: 2vw;
|
|
font-weight: 600;
|
|
}
|
|
|
|
//吸顶盒子样式
|
|
.sticky_box {
|
|
@include bg_color($background-color-theme);
|
|
}
|
|
.amap-icon img {
|
|
width: 25px;
|
|
height: 34px;
|
|
}
|
|
|
|
.amap-marker-label {
|
|
border: 0;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.info {
|
|
position: relative;
|
|
margin: 0;
|
|
top: 0;
|
|
right: 0;
|
|
min-width: 0;
|
|
}
|
|
</style>
|