fix：首页修改，交安事件联调，
This commit is contained in:
parent
0a840663d9
commit
c92e37c192
@ -10,3 +10,22 @@ export function selectTypeList(query) {
|
||||
}
|
||||
|
||||
|
||||
// 获取地图打点数据接口
|
||||
export function mapPointList(query) {
|
||||
return request({
|
||||
url: "/bigscreen/getMapPoint",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 获取地图绘制线段数据接口
|
||||
export function mapPciList(query) {
|
||||
return request({
|
||||
url: "/bigscreen/roadPci",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
47
src/api/xj/screen/traffic-screen.js
Normal file
47
src/api/xj/screen/traffic-screen.js
Normal file
@ -0,0 +1,47 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
// 交安事件接口
|
||||
export function safetyData(query) {
|
||||
return request({
|
||||
url: "/bigscreen/getEventInfo",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 交安事件趋势接口
|
||||
export function eventLog(query) {
|
||||
return request({
|
||||
url: "/bigscreen/getEventLog",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 交安事件统计接口
|
||||
export function statisticData(query) {
|
||||
return request({
|
||||
url: "/bigscreen/eventStatus",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 交安事件排名接口
|
||||
export function rankCount(query) {
|
||||
return request({
|
||||
url: "/bigscreen/getEventCountRanking",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 交安突发事件
|
||||
export function emergencyData(query) {
|
||||
return request({
|
||||
url: "/bigscreen/getEmergencyEvent",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
@ -254,6 +254,11 @@ export default {
|
||||
map.getTargetElement().style.cursor = "auto";
|
||||
}
|
||||
});
|
||||
// 地图缩放级别事件
|
||||
map.on("moveend",(e)=> {
|
||||
const zoom = map.getView().getZoom().toFixed(); //获取当前地图的缩放级别
|
||||
this.$emit("map-moveend", zoom);
|
||||
});
|
||||
// 图层选择事件
|
||||
let selectSingClick = new Select({ style: null });
|
||||
map.addInteraction(selectSingClick);
|
||||
|
||||
@ -1,12 +1,24 @@
|
||||
<template>
|
||||
<div class="navbar">
|
||||
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
||||
<hamburger
|
||||
id="hamburger-container"
|
||||
:is-active="sidebar.opened"
|
||||
class="hamburger-container"
|
||||
@toggleClick="toggleSideBar"
|
||||
/>
|
||||
|
||||
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
|
||||
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
|
||||
<breadcrumb
|
||||
id="breadcrumb-container"
|
||||
class="breadcrumb-container"
|
||||
v-if="!topNav"
|
||||
/>
|
||||
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
|
||||
|
||||
<div class="right-menu">
|
||||
<template v-if="device!=='mobile'">
|
||||
<template v-if="device !== 'mobile'">
|
||||
<div class="menu-return">
|
||||
<i class="el-icon-data-analysis" @click="goBigScreen"></i>
|
||||
</div>
|
||||
<search id="header-search" class="right-menu-item" />
|
||||
|
||||
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
||||
@ -14,12 +26,14 @@
|
||||
<el-tooltip content="布局大小" effect="dark" placement="bottom">
|
||||
<size-select id="size-select" class="right-menu-item hover-effect" />
|
||||
</el-tooltip>
|
||||
|
||||
</template>
|
||||
|
||||
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
|
||||
<el-dropdown
|
||||
class="avatar-container right-menu-item hover-effect"
|
||||
trigger="click"
|
||||
>
|
||||
<div class="avatar-wrapper">
|
||||
<img :src="avatar" class="user-avatar">
|
||||
<img :src="avatar" class="user-avatar" />
|
||||
<i class="el-icon-caret-bottom" />
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
@ -39,15 +53,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import Breadcrumb from '@/components/Breadcrumb'
|
||||
import TopNav from '@/components/TopNav'
|
||||
import Hamburger from '@/components/Hamburger'
|
||||
import Screenfull from '@/components/Screenfull'
|
||||
import SizeSelect from '@/components/SizeSelect'
|
||||
import Search from '@/components/HeaderSearch'
|
||||
import RuoYiGit from '@/components/RuoYi/Git'
|
||||
import RuoYiDoc from '@/components/RuoYi/Doc'
|
||||
import { mapGetters } from "vuex";
|
||||
import Breadcrumb from "@/components/Breadcrumb";
|
||||
import TopNav from "@/components/TopNav";
|
||||
import Hamburger from "@/components/Hamburger";
|
||||
import Screenfull from "@/components/Screenfull";
|
||||
import SizeSelect from "@/components/SizeSelect";
|
||||
import Search from "@/components/HeaderSearch";
|
||||
import RuoYiGit from "@/components/RuoYi/Git";
|
||||
import RuoYiDoc from "@/components/RuoYi/Doc";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -58,48 +72,50 @@ export default {
|
||||
SizeSelect,
|
||||
Search,
|
||||
RuoYiGit,
|
||||
RuoYiDoc
|
||||
RuoYiDoc,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'sidebar',
|
||||
'avatar',
|
||||
'device'
|
||||
]),
|
||||
...mapGetters(["sidebar", "avatar", "device"]),
|
||||
setting: {
|
||||
get() {
|
||||
return this.$store.state.settings.showSettings
|
||||
return this.$store.state.settings.showSettings;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.dispatch('settings/changeSetting', {
|
||||
key: 'showSettings',
|
||||
value: val
|
||||
})
|
||||
}
|
||||
this.$store.dispatch("settings/changeSetting", {
|
||||
key: "showSettings",
|
||||
value: val,
|
||||
});
|
||||
},
|
||||
},
|
||||
topNav: {
|
||||
get() {
|
||||
return this.$store.state.settings.topNav
|
||||
}
|
||||
}
|
||||
return this.$store.state.settings.topNav;
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/* 点击跳转大屏页面 */
|
||||
goBigScreen(){
|
||||
this.$router.push("/screen")
|
||||
},
|
||||
toggleSideBar() {
|
||||
this.$store.dispatch('app/toggleSideBar')
|
||||
this.$store.dispatch("app/toggleSideBar");
|
||||
},
|
||||
async logout() {
|
||||
this.$confirm('确定注销并退出系统吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.href = '/index';
|
||||
this.$confirm("确定注销并退出系统吗？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
}).catch(() => {});
|
||||
}
|
||||
}
|
||||
}
|
||||
.then(() => {
|
||||
this.$store.dispatch("LogOut").then(() => {
|
||||
location.href = "/index";
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -108,18 +124,18 @@ export default {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
|
||||
.hamburger-container {
|
||||
line-height: 46px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
transition: background .3s;
|
||||
-webkit-tap-highlight-color:transparent;
|
||||
transition: background 0.3s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .025)
|
||||
background: rgba(0, 0, 0, 0.025);
|
||||
}
|
||||
}
|
||||
|
||||
@ -138,14 +154,26 @@ export default {
|
||||
}
|
||||
|
||||
.right-menu {
|
||||
float: right;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
float: right;
|
||||
line-height: 50px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.menu-return {
|
||||
height: 100%;
|
||||
margin-right: 0.5rem;
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.right-menu-item {
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
@ -156,10 +184,10 @@ export default {
|
||||
|
||||
&.hover-effect {
|
||||
cursor: pointer;
|
||||
transition: background .3s;
|
||||
transition: background 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .025)
|
||||
background: rgba(0, 0, 0, 0.025);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 11:34:00
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-28 09:50:01
|
||||
* @LastEditTime: 2024-10-29 09:40:35
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
|
||||
* @Description: 大屏首页
|
||||
-->
|
||||
@ -83,7 +83,7 @@
|
||||
<!-- 左侧控制 -->
|
||||
<div class="road-select">
|
||||
<!-- 左上角病害筛查 -->
|
||||
<div class="road-div" v-if="mapClick === '2'" @click="clickImg">
|
||||
<div class="road-div" v-if="mapClick === 'defect'" @click="clickImg">
|
||||
<span>病害筛查</span>
|
||||
</div>
|
||||
<!-- 返回图片底图 -->
|
||||
@ -119,9 +119,8 @@
|
||||
v-for="(item, index) in mapCareList"
|
||||
:key="`map-care-${index}`"
|
||||
:style="{ left: item.left, top: item.top }"
|
||||
@click="changeMap(false, item)"
|
||||
>
|
||||
<span>{{ item.name }}</span>
|
||||
<span @click="changeMap(false, item)">{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -129,6 +128,7 @@
|
||||
<fssm-map
|
||||
v-if="!showImgBk"
|
||||
ref="roadMap"
|
||||
@map-moveend="mapMoveend"
|
||||
@map-zoom="getZoom"
|
||||
@feature-select="featureSelect"
|
||||
></fssm-map>
|
||||
@ -207,7 +207,11 @@ import TrafficEmergency from "./traffic-components/traffic-emergency.vue";
|
||||
import ImgDialog from "./components/img-dialog.vue";
|
||||
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
|
||||
// 接口
|
||||
import { selectTypeList } from "@/api/xj/screen/index";
|
||||
import {
|
||||
selectTypeList,
|
||||
mapPointList,
|
||||
mapPciList,
|
||||
} from "@/api/xj/screen/index";
|
||||
export default {
|
||||
name: "BigScreen",
|
||||
components: {
|
||||
@ -306,9 +310,9 @@ export default {
|
||||
// 切换地图图标类别按钮
|
||||
changeMapBtn: [
|
||||
{ name: "巡查车", click: "1" },
|
||||
{ name: "病害", click: "2" },
|
||||
{ name: "路产", click: "3" },
|
||||
{ name: "事件", click: "4" },
|
||||
{ name: "病害", click: "defect" },
|
||||
{ name: "路产", click: "equipment" },
|
||||
{ name: "事件", click: "event" },
|
||||
],
|
||||
/* 具体icon类别 */
|
||||
iconTypeList: [],
|
||||
@ -441,23 +445,28 @@ export default {
|
||||
},
|
||||
/* 点击图片点位切换地图事件 */
|
||||
changeMap(boolen, value) {
|
||||
this.mapZoom = "";
|
||||
this.showImgBk = boolen;
|
||||
// 默认点击的图标是巡查车
|
||||
this.changeIconType("1");
|
||||
if (!boolen) {
|
||||
// 默认点击的图标是巡查车
|
||||
this.changeIconType("defect");
|
||||
} else {
|
||||
this.mapClick = "";
|
||||
this.mapZoom = "";
|
||||
this.getZoom("10");
|
||||
}
|
||||
},
|
||||
/* 获取地图点位信息 */
|
||||
getCenterPiont() {
|
||||
this.centerPiont = [
|
||||
[123.30297096718999, 41.87942945541742],
|
||||
[123.08770760049077, 41.99409925522211],
|
||||
[123.6210023341045, 41.94237193236056],
|
||||
];
|
||||
// 如果当前已经有打点坐标
|
||||
if (!this.clusters) {
|
||||
mapPointList({ type: this.mapClick }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.centerPiont = data.map((item) => {
|
||||
return [item.geometry[0], item.geometry[1]];
|
||||
});
|
||||
this.drawPoint();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
/* 绘制地图点位 */
|
||||
drawPoint() {
|
||||
@ -485,8 +494,8 @@ export default {
|
||||
features.push(feature);
|
||||
});
|
||||
const clusterSource = new Cluster({
|
||||
distance: 200,
|
||||
minDistance: 20,
|
||||
distance: 30,
|
||||
minDistance: 30,
|
||||
source: new VectorSource({
|
||||
features,
|
||||
}),
|
||||
@ -527,21 +536,18 @@ export default {
|
||||
},
|
||||
/* 获取地图线段点位信息 */
|
||||
getLinePoint() {
|
||||
this.lineString = [
|
||||
[
|
||||
[123.32282646995006, 41.97498761493642],
|
||||
[123.35200891450947, 41.973156567233836],
|
||||
[123.37958916875502, 41.97956525514763],
|
||||
[123.39286432222431, 42.0021101177337],
|
||||
[123.40184182160729, 42.02952420024438],
|
||||
[123.4845914544503, 42.03583748930991],
|
||||
],
|
||||
[
|
||||
[122.5518798295274, 42.19039770874923],
|
||||
[123.7871925821671, 42.236903621119346],
|
||||
],
|
||||
];
|
||||
if (!this.markLayerLines) {
|
||||
mapPciList().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.lineString = data.map((item) => {
|
||||
return item.coordinates.split(";").map((it) => {
|
||||
return it.split(",").map(Number);
|
||||
});
|
||||
});
|
||||
this.drawLine();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
/* 绘制地图线段 */
|
||||
drawLine() {
|
||||
@ -593,11 +599,17 @@ export default {
|
||||
this.mapClick = value;
|
||||
// 获取对应右上角icon类型
|
||||
this.getIconType(value);
|
||||
// 请求地图打点/绘制线段接口
|
||||
if (!this.mapZoom) {
|
||||
this.getZoom("10");
|
||||
} else {
|
||||
this.getZoom(this.mapZoom);
|
||||
}
|
||||
}
|
||||
},
|
||||
/* 获取icon多选数据 */
|
||||
getIconType(value) {
|
||||
if (value === "2") {
|
||||
if (value === "defect") {
|
||||
this.iconTypeList = [
|
||||
{ name: "淤泥路面", value: "1" },
|
||||
{ name: "沥青路面", value: "2" },
|
||||
@ -633,24 +645,30 @@ export default {
|
||||
getZoom(zoom) {
|
||||
if (zoom === "10") {
|
||||
// 绘制点位
|
||||
if (this.mapZoom !== zoom) {
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.removeLayer(this.markLayerLines);
|
||||
this.markLayerLines = null;
|
||||
});
|
||||
this.mapZoom = zoom;
|
||||
this.getCenterPiont();
|
||||
}
|
||||
this.mapZoom = zoom;
|
||||
} else if (zoom === "9") {
|
||||
// 绘制线段
|
||||
if (this.mapZoom !== zoom) {
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.removeLayer(this.clusters);
|
||||
this.clusters = null;
|
||||
});
|
||||
this.getLinePoint();
|
||||
this.mapZoom = zoom;
|
||||
}
|
||||
},
|
||||
/* 地图缩放完成事件 */
|
||||
mapMoveend(zoom) {
|
||||
if (this.clusters && zoom > 13) {
|
||||
this.clusters.getSource().setDistance(1);
|
||||
} else if (this.clusters && zoom <= 13) {
|
||||
this.clusters.getSource().setDistance(30);
|
||||
}
|
||||
},
|
||||
/* 地图选中feature事件 */
|
||||
@ -1092,7 +1110,8 @@ export default {
|
||||
background-size: 100% 100%;
|
||||
background-position: 50%;
|
||||
|
||||
span{
|
||||
span {
|
||||
height: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 10:12:55
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-22 09:38:45
|
||||
* @LastEditTime: 2024-10-28 13:35:47
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-emergency.vue
|
||||
* @Description: 交安事件大屏-交安突发事件
|
||||
-->
|
||||
@ -27,7 +27,7 @@
|
||||
:key="`emergency-${index}`"
|
||||
>
|
||||
<div class="emergency-type">{{ item.type }}</div>
|
||||
<div class="emergency-name">{{ item.name }}</div>
|
||||
<div class="emergency-name">{{ item.segmentName }}</div>
|
||||
<div class="emergency-status"><a></a>{{ item.status }}</div>
|
||||
<div class="emergency-operation">操作</div>
|
||||
</div>
|
||||
@ -38,7 +38,7 @@
|
||||
|
||||
<script>
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
|
||||
import { emergencyData } from "@/api/xj/screen/traffic-screen";
|
||||
export default {
|
||||
name: "TrafficEmergency",
|
||||
components: { vueSeamlessScroll },
|
||||
@ -56,45 +56,22 @@ export default {
|
||||
waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
|
||||
},
|
||||
// 事件列表
|
||||
emergencyList: [
|
||||
{
|
||||
type: "中分率植物缺死",
|
||||
name: "换成高速啊实打实的",
|
||||
status: "待核验",
|
||||
},
|
||||
{
|
||||
type: "中分率植物缺死",
|
||||
name: "换成高速啊实打实的",
|
||||
status: "待核验",
|
||||
},
|
||||
{
|
||||
type: "中分率植物缺死",
|
||||
name: "换成高速啊实打实的",
|
||||
status: "待核验",
|
||||
},
|
||||
{
|
||||
type: "中分率植物缺死",
|
||||
name: "换成高速啊实打实的",
|
||||
status: "待核验",
|
||||
},
|
||||
{
|
||||
type: "中分率植物缺死",
|
||||
name: "换成高速啊实打实的",
|
||||
status: "待核验",
|
||||
},
|
||||
{
|
||||
type: "中分率植物缺死",
|
||||
name: "换成高速啊实打实的",
|
||||
status: "待核验",
|
||||
},
|
||||
{
|
||||
type: "中分率植物缺死",
|
||||
name: "换成高速啊实打实的",
|
||||
status: "待核验",
|
||||
},
|
||||
],
|
||||
emergencyList: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取事件列表数据 */
|
||||
getData() {
|
||||
emergencyData().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.emergencyList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -31,32 +31,41 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { rankCount } from "@/api/xj/screen/traffic-screen";
|
||||
export default {
|
||||
name: "TrafficRank",
|
||||
props: {
|
||||
select: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 排名数据
|
||||
rankList: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
select: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.getData();
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取排名数据 */
|
||||
getData() {
|
||||
this.rankList = [
|
||||
{ name: "G4562(没开始快速打开看)", value: 556 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 456 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 356 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 556 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 556 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 556 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 556 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 556 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 556 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 556 },
|
||||
];
|
||||
rankCount({ type: this.select }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.rankList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -2,24 +2,46 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 09:59:32
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-22 09:29:30
|
||||
* @LastEditTime: 2024-10-28 11:42:15
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-safety.vue
|
||||
* @Description: 交安事件大屏-交安事件
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="traffic-left"><span>87</span></div>
|
||||
<div class="traffic-left"><span>{{today}}</span></div>
|
||||
<div class="traffic-right">
|
||||
<div class="right-sum"><span>261</span>个</div>
|
||||
<div class="right-rate"><span> 37 </span>%</div>
|
||||
<div class="right-sum"><span>{{all}}</span>个</div>
|
||||
<div class="right-rate"><span> {{scale}} </span>%</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { safetyData } from "@/api/xj/screen/traffic-screen";
|
||||
export default {
|
||||
name: "TrafficSafety",
|
||||
data() {
|
||||
return {
|
||||
today: 0,
|
||||
all: 0,
|
||||
scale: 0,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
safetyData().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.today = data.today;
|
||||
this.all = data.all;
|
||||
this.scale = data.scale;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -75,7 +97,7 @@ export default {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: 100% 50%;
|
||||
color:#AAC6C7;
|
||||
color: #aac6c7;
|
||||
font-size: 0.9rem;
|
||||
|
||||
span {
|
||||
@ -104,7 +126,7 @@ export default {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: 100% 50%;
|
||||
color:#AAC6C7;
|
||||
color: #aac6c7;
|
||||
font-size: 0.9rem;
|
||||
|
||||
span {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 10:06:24
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-22 09:27:49
|
||||
* @LastEditTime: 2024-10-28 13:17:29
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-statistic.vue
|
||||
* @Description: 交安事件大屏-交安事件统计
|
||||
-->
|
||||
@ -40,35 +40,22 @@
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import { getDropList } from "@/api/xj/screen/disease-screen";
|
||||
import { statisticData } from "@/api/xj/screen/traffic-screen";
|
||||
export default {
|
||||
name: "TrafficStatistic",
|
||||
props: {
|
||||
select: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 下拉数据绑定
|
||||
itemSelect: "1",
|
||||
itemSelect: "",
|
||||
// 下拉框数据
|
||||
currentList: [
|
||||
{
|
||||
label: "分公司",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "分公司2",
|
||||
value: "2",
|
||||
},
|
||||
{
|
||||
label: "分公3",
|
||||
value: "3",
|
||||
},
|
||||
{
|
||||
label: "分公司4",
|
||||
value: "4",
|
||||
},
|
||||
{
|
||||
label: "分公司5",
|
||||
value: "5",
|
||||
},
|
||||
],
|
||||
currentList: [],
|
||||
// 取色盘
|
||||
colorList: [
|
||||
"#18F7FF",
|
||||
@ -115,15 +102,47 @@ export default {
|
||||
],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
select: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.getCurrentList();
|
||||
this.getChartData();
|
||||
}
|
||||
},
|
||||
},
|
||||
itemSelect: {
|
||||
handler() {
|
||||
this.getChartData();
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getChartData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取右上角下拉框数据 */
|
||||
getCurrentList() {
|
||||
getDropList({ type: this.select }).then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
this.currentList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 获取echart图数据 */
|
||||
getChartData() {
|
||||
const data = {
|
||||
itemName: this.itemSelect,
|
||||
type: this.select,
|
||||
};
|
||||
statisticData(data).then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
this.echartList = data;
|
||||
this.$nextTick(() => {
|
||||
this.drawChart();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 绘制echart图 */
|
||||
drawChart() {
|
||||
@ -179,12 +198,12 @@ export default {
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
fontFamily:"DouYu",
|
||||
fontFamily: "DouYu",
|
||||
fontSize: 28,
|
||||
color: "rgba(255, 183, 89, 0.8)",
|
||||
},
|
||||
b: {
|
||||
fontFamily:"DinBm",
|
||||
fontFamily: "DinBm",
|
||||
fontSize: 12,
|
||||
color: "#ffffff",
|
||||
},
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 10:03:08
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-21 15:59:07
|
||||
* @LastEditTime: 2024-10-28 13:47:21
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-trend.vue
|
||||
* @Description: 交安事件大屏-交安事件趋势
|
||||
-->
|
||||
@ -28,50 +28,128 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDropList } from "@/api/xj/screen/disease-screen";
|
||||
import { eventLog } from "@/api/xj/screen/traffic-screen";
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "TrafficTrend",
|
||||
props: {
|
||||
select: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 下拉框选中绑定
|
||||
itemSelect: "1",
|
||||
itemSelect: "",
|
||||
// 下拉框数据
|
||||
trafficList: [
|
||||
{
|
||||
label: "分公司",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "分公司2",
|
||||
value: "2",
|
||||
},
|
||||
{
|
||||
label: "分公3",
|
||||
value: "3",
|
||||
},
|
||||
{
|
||||
label: "分公司4",
|
||||
value: "4",
|
||||
},
|
||||
{
|
||||
label: "分公司5",
|
||||
value: "5",
|
||||
},
|
||||
],
|
||||
trafficList: [],
|
||||
// echart图表数据
|
||||
echartData: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
select: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.getCurrentList();
|
||||
this.getChartData();
|
||||
}
|
||||
},
|
||||
},
|
||||
itemSelect: {
|
||||
handler() {
|
||||
this.getChartData();
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getChartData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取右上角下拉框数据 */
|
||||
getCurrentList() {
|
||||
getDropList({ type: this.select }).then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
this.trafficList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 获取柱状图数据 */
|
||||
getChartData() {
|
||||
const data = {
|
||||
id: this.itemSelect,
|
||||
type: this.select,
|
||||
};
|
||||
eventLog(data).then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
console.log(data, "ffff");
|
||||
this.echartData = data;
|
||||
this.$nextTick(() => {
|
||||
this.drawChart();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 绘制echart */
|
||||
drawChart() {
|
||||
const xData = this.echartData.map((item) => {
|
||||
return item.label;
|
||||
});
|
||||
const yData = this.echartData.map((item,index) => {
|
||||
if (index % 2 == 0) {
|
||||
return {
|
||||
...item,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#033E43",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#00FFEA",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...item,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#034299",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#35F0FF",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
});
|
||||
const chart = echarts.init(this.$refs.trafficChart);
|
||||
chart.setOption({
|
||||
// backgroundColor: "#041139",
|
||||
@ -95,7 +173,7 @@ export default {
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
data: ["fdfs", "frffs", "wdwe", "10-1", "asdasd", "asd", "fdfs"],
|
||||
data: xData,
|
||||
axisLabel: {
|
||||
color: "#808C9F",
|
||||
fontSize: 12,
|
||||
@ -144,7 +222,7 @@ export default {
|
||||
series: [
|
||||
// 柱体
|
||||
{
|
||||
name: "人数",
|
||||
name: "数量",
|
||||
type: "bar",
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
@ -155,9 +233,6 @@ export default {
|
||||
backgroundStyle: {
|
||||
color: "rgba(105,160,231,0.1)",
|
||||
},
|
||||
// itemStyle: {
|
||||
|
||||
// },
|
||||
label: {
|
||||
show: false, //每条柱状图是否显示数字
|
||||
formatter: "{c}",
|
||||
@ -165,176 +240,7 @@ export default {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 15,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#034299",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#35F0FF",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 25,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#033E43",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#00FFEA",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 35,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#034299",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#35F0FF",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 45,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#033E43",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#00FFEA",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 55,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#034299",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#35F0FF",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 65,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#033E43",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#00FFEA",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 75,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#034299",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#35F0FF",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
data: yData,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
@ -1,18 +1,27 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-08 09:26:24
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-28 14:33:52
|
||||
* @FilePath: \znxjxt-ui\src\views\index.vue
|
||||
* @Description: 系统首页
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div id="map" class="map">
|
||||
<map-component></map-component>
|
||||
<div>顶栏</div>
|
||||
<div>
|
||||
<div>日常巡查</div>
|
||||
<div>病害识别</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>公路资产</div>
|
||||
<div>路况评定</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- // 这里的tk为你在天地图的官网申请的tk -->
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
import MapComponent from '../components/MapComponent';
|
||||
|
||||
|
||||
export default {
|
||||
name: "Index",
|
||||
data() {
|
||||
@ -20,29 +29,10 @@ export default {
|
||||
|
||||
};
|
||||
},
|
||||
components: {
|
||||
MapComponent
|
||||
},
|
||||
methods: {
|
||||
goTarget(href) {
|
||||
window.open(href, "_blank");
|
||||
},
|
||||
initMap() {
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
created(){
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.map{
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
}
|
||||
.app-container{
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
@ -1,7 +1,28 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-08 09:26:24
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-28 14:19:03
|
||||
* @FilePath: \znxjxt-ui\src\views\login.vue
|
||||
* @Description: 系统登录页
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="login">
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
||||
<h3 class="title">若依后台管理系统</h3>
|
||||
<div class="login-title">
|
||||
<div class="mini-title">辽宁交投</div>
|
||||
<div class="middle-title">
|
||||
<div>智能巡检系统</div>
|
||||
<div><span>安全生产</span><span>可视化便捷</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<el-form
|
||||
ref="loginForm"
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
class="login-form"
|
||||
>
|
||||
<h3 class="title">账号登陆</h3>
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="loginForm.username"
|
||||
@ -9,7 +30,11 @@
|
||||
auto-complete="off"
|
||||
placeholder="账号"
|
||||
>
|
||||
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
|
||||
<svg-icon
|
||||
slot="prefix"
|
||||
icon-class="user"
|
||||
class="el-input__icon input-icon"
|
||||
/>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
@ -20,7 +45,11 @@
|
||||
placeholder="密码"
|
||||
@keyup.enter.native="handleLogin"
|
||||
>
|
||||
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
|
||||
<svg-icon
|
||||
slot="prefix"
|
||||
icon-class="password"
|
||||
class="el-input__icon input-icon"
|
||||
/>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" v-if="captchaEnabled">
|
||||
@ -31,40 +60,46 @@
|
||||
style="width: 63%"
|
||||
@keyup.enter.native="handleLogin"
|
||||
>
|
||||
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
|
||||
<svg-icon
|
||||
slot="prefix"
|
||||
icon-class="validCode"
|
||||
class="el-input__icon input-icon"
|
||||
/>
|
||||
</el-input>
|
||||
<div class="login-code">
|
||||
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
|
||||
<img :src="codeUrl" @click="getCode" class="login-code-img" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
|
||||
<el-form-item style="width:100%;">
|
||||
<el-checkbox
|
||||
v-model="loginForm.rememberMe"
|
||||
style="margin: 0px 0px 25px 0px"
|
||||
>记住密码</el-checkbox
|
||||
>
|
||||
<el-form-item style="width: 100%">
|
||||
<el-button
|
||||
:loading="loading"
|
||||
size="medium"
|
||||
type="primary"
|
||||
style="width:100%;"
|
||||
style="width: 100%"
|
||||
@click.native.prevent="handleLogin"
|
||||
>
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
</el-button>
|
||||
<div style="float: right;" v-if="register">
|
||||
<router-link class="link-type" :to="'/register'">立即注册</router-link>
|
||||
<div style="float: right" v-if="register">
|
||||
<router-link class="link-type" :to="'/register'"
|
||||
>立即注册</router-link
|
||||
>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 底部 -->
|
||||
<div class="el-login-footer">
|
||||
<span>Copyright © 2018-2024 ruoyi.vip All Rights Reserved.</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCodeImg } from "@/api/login";
|
||||
import Cookies from "js-cookie";
|
||||
import { encrypt, decrypt } from '@/utils/jsencrypt'
|
||||
import { encrypt, decrypt } from "@/utils/jsencrypt";
|
||||
|
||||
export default {
|
||||
name: "Login",
|
||||
@ -76,32 +111,32 @@ export default {
|
||||
password: "admin123",
|
||||
rememberMe: false,
|
||||
code: "",
|
||||
uuid: ""
|
||||
uuid: "",
|
||||
},
|
||||
loginRules: {
|
||||
username: [
|
||||
{ required: true, trigger: "blur", message: "请输入您的账号" }
|
||||
{ required: true, trigger: "blur", message: "请输入您的账号" },
|
||||
],
|
||||
password: [
|
||||
{ required: true, trigger: "blur", message: "请输入您的密码" }
|
||||
{ required: true, trigger: "blur", message: "请输入您的密码" },
|
||||
],
|
||||
code: [{ required: true, trigger: "change", message: "请输入验证码" }]
|
||||
code: [{ required: true, trigger: "change", message: "请输入验证码" }],
|
||||
},
|
||||
loading: false,
|
||||
// 验证码开关
|
||||
captchaEnabled: true,
|
||||
// 注册开关
|
||||
register: false,
|
||||
redirect: undefined
|
||||
redirect: undefined,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler: function(route) {
|
||||
handler: function (route) {
|
||||
this.redirect = route.query && route.query.redirect;
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getCode();
|
||||
@ -109,8 +144,9 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
getCode() {
|
||||
getCodeImg().then(res => {
|
||||
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
|
||||
getCodeImg().then((res) => {
|
||||
this.captchaEnabled =
|
||||
res.captchaEnabled === undefined ? true : res.captchaEnabled;
|
||||
if (this.captchaEnabled) {
|
||||
this.codeUrl = "data:image/gif;base64," + res.img;
|
||||
this.loginForm.uuid = res.uuid;
|
||||
@ -120,29 +156,37 @@ export default {
|
||||
getCookie() {
|
||||
const username = Cookies.get("username");
|
||||
const password = Cookies.get("password");
|
||||
const rememberMe = Cookies.get('rememberMe')
|
||||
const rememberMe = Cookies.get("rememberMe");
|
||||
this.loginForm = {
|
||||
username: username === undefined ? this.loginForm.username : username,
|
||||
password: password === undefined ? this.loginForm.password : decrypt(password),
|
||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
|
||||
password:
|
||||
password === undefined ? this.loginForm.password : decrypt(password),
|
||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
|
||||
};
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
this.$refs.loginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
if (this.loginForm.rememberMe) {
|
||||
Cookies.set("username", this.loginForm.username, { expires: 30 });
|
||||
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
|
||||
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
|
||||
Cookies.set("password", encrypt(this.loginForm.password), {
|
||||
expires: 30,
|
||||
});
|
||||
Cookies.set("rememberMe", this.loginForm.rememberMe, {
|
||||
expires: 30,
|
||||
});
|
||||
} else {
|
||||
Cookies.remove("username");
|
||||
Cookies.remove("password");
|
||||
Cookies.remove('rememberMe');
|
||||
Cookies.remove("rememberMe");
|
||||
}
|
||||
this.$store.dispatch("Login", this.loginForm).then(() => {
|
||||
this.$router.push({ path: "/screen" }).catch(()=>{});
|
||||
}).catch(() => {
|
||||
this.$store
|
||||
.dispatch("Login", this.loginForm)
|
||||
.then(() => {
|
||||
this.$router.push({ path: "/screen" }).catch(() => {});
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
if (this.captchaEnabled) {
|
||||
this.getCode();
|
||||
@ -150,23 +194,52 @@ export default {
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
.login {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 10%;
|
||||
background-image: url("../assets/images/login-background.jpg");
|
||||
background-size: cover;
|
||||
|
||||
.login-title {
|
||||
width: 14.5%;
|
||||
height: 40%;
|
||||
padding: 3% 0;
|
||||
|
||||
.mini-title{
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.middle-title{
|
||||
width: 100%;
|
||||
|
||||
>div:nth-child(1){
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
>div:nth-child(2){
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
margin: 0px auto 30px auto;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
color: #707070;
|
||||
}
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-14 10:36:09
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-25 14:25:31
|
||||
* @LastEditTime: 2024-10-28 11:29:03
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\task-view.vue
|
||||
* @Description: 巡检任务-查看路径
|
||||
-->
|
||||
@ -17,7 +17,41 @@
|
||||
></fssm-map>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<el-slider v-model="timeTip" :show-tooltip="false"></el-slider>
|
||||
<div class="slider">
|
||||
<el-slider
|
||||
v-model="timeTip"
|
||||
:step="sliderStep"
|
||||
:marks="sliderMarks"
|
||||
:show-tooltip="true"
|
||||
></el-slider>
|
||||
</div>
|
||||
<div class="pause">
|
||||
<i
|
||||
class="el-icon-video-play"
|
||||
v-if="!animationVisable"
|
||||
@click="animation(true)"
|
||||
></i>
|
||||
<i
|
||||
class="el-icon-video-pause"
|
||||
v-if="animationVisable"
|
||||
@click="animation(false)"
|
||||
></i>
|
||||
</div>
|
||||
<div class="speed">
|
||||
<el-select
|
||||
v-model="spaadCode"
|
||||
@change="changeTimeTip"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in speedOption"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -37,16 +71,73 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
// 进度条位置绑定值
|
||||
timeTip: 26,
|
||||
timeTip: "0",
|
||||
// 进度条标记配置项
|
||||
sliderMarks: {
|
||||
0: "18",
|
||||
100: "24",
|
||||
},
|
||||
// 进度条步长
|
||||
sliderStep: 0.1,
|
||||
// 暂停/开始绑定
|
||||
animationVisable: false,
|
||||
// 定时器绑定
|
||||
timer: null,
|
||||
// 倍速绑定
|
||||
spaadCode: 1,
|
||||
// 倍数下拉
|
||||
speedOption: [
|
||||
{
|
||||
value: 1,
|
||||
label: "1x",
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: "2x",
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
label: "5x",
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
label: "10x",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
timeTip: {
|
||||
handler(val) {},
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
/* 暂停/开始事件 */
|
||||
animation(boolen) {
|
||||
this.animationVisable = boolen;
|
||||
if (boolen) {
|
||||
this.timer = setInterval(() => {
|
||||
this.timeTip = (this.timeTip + this.sliderStep).toFixed(1) * 1;
|
||||
}, 500);
|
||||
} else {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
},
|
||||
/* 进度条修改事件 */
|
||||
changeTimeTip(value) {
|
||||
this.sliderStep = value * 0.1;
|
||||
},
|
||||
/* 定时器事件 */
|
||||
startTime(value) {},
|
||||
/* 地图点击事件 */
|
||||
mapClick(feature) {},
|
||||
/* 地图双击事件 */
|
||||
mapDbclick(feature) {},
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -65,6 +156,27 @@ export default {
|
||||
.footer {
|
||||
height: 5rem;
|
||||
width: 100%;
|
||||
background-color: aqua;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
background-color: rgba(104, 128, 147, 0.3);
|
||||
|
||||
.slider {
|
||||
width: calc(100% - 8rem);
|
||||
padding: 0 2rem;
|
||||
|
||||
::v-deep .el-slider__marks-text {
|
||||
width: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pause {
|
||||
width: 3rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.speed {
|
||||
width: 5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user