菜单引导页

liujun0703-新项目开发
LiuJiaNan 2024-07-23 14:33:59 +08:00
parent bfb8addee3
commit 5680891cbe
19 changed files with 378 additions and 62 deletions

View File

@ -6,28 +6,28 @@ module.exports = {
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {},
'postcss-px-to-viewport': {
// options
unitToConvert: 'px',//(String) 需要转换的单位,默认为"px"
viewportWidth: 1920, // (Number) 设计稿的视口宽度一般是750
unitPrecision: 3, // (Number) 单位转换后保留的精度(很多时候无法整除)
viewportUnit: 'vw', // (String) 希望使用的视口单位
selectorBlackList: ['.ignore', '.hairlines'],
/*(Array) CSS使px
如果传入的值为字符串的话只要选择器中含有传入值就会被匹配
例如 selectorBlackList ['body'] 的话 那么 .body-class 就会被忽略
如果传入的值为正则表达式的话那么就会依据CSS选择器是否匹配该正则
例如 selectorBlackList [/^body$/] , 那么 body 会被忽略 .body 不会*/
minPixelValue: 1, // (Number) 设置最小的转换数值如果为1的话只有大于1的值会被转换
mediaQuery: false, // (Boolean) 媒体查询里的单位是否需要转换单位
exclude: [/^node_modules$/],// (Array or Regexp) 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件
include: [/BI/],
/*(Array or Regexp) include 'src/mobile'
如果值是一个正则表达式将包含匹配的文件否则将排除该文件
如果传入的值是一个数组那么数组里的值必须为正则
注意exclude和include是可以一起设置的将取两者规则的交集*/
landscapeUnit: 'vw', //横屏时使用的单位
landscapeWidth: 750,// 横屏时使用的视口宽度
}
// 'postcss-px-to-viewport': {
// // options
// unitToConvert: 'px',//(String) 需要转换的单位,默认为"px"
// viewportWidth: 1920, // (Number) 设计稿的视口宽度一般是750
// unitPrecision: 3, // (Number) 单位转换后保留的精度(很多时候无法整除)
// viewportUnit: 'vw', // (String) 希望使用的视口单位
// selectorBlackList: ['.ignore', '.hairlines'],
// /*(Array) 需要忽略的CSS选择器不会转为视口单位使用原有的px等单位
// 如果传入的值为字符串的话,只要选择器中含有传入值就会被匹配
// 例如 selectorBlackList 为 ['body'] 的话, 那么 .body-class 就会被忽略
// 如果传入的值为正则表达式的话,那么就会依据CSS选择器是否匹配该正则
// 例如 selectorBlackList 为 [/^body$/] , 那么 body 会被忽略,而 .body 不会*/
// minPixelValue: 1, // (Number) 设置最小的转换数值如果为1的话只有大于1的值会被转换
// mediaQuery: false, // (Boolean) 媒体查询里的单位是否需要转换单位
// exclude: [/^node_modules$/],// (Array or Regexp) 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件
// include: [/BI/],
// /*(Array or Regexp) 如果设置了include那将只有匹配到的文件才会被转换例如只转换 'src/mobile' 下的文件
// 如果值是一个正则表达式,将包含匹配的文件,否则将排除该文件
// 如果传入的值是一个数组,那么数组里的值必须为正则
// 注意exclude和include是可以一起设置的将取两者规则的交集*/
// landscapeUnit: 'vw', //横屏时使用的单位
// landscapeWidth: 750,// 横屏时使用的视口宽度
// }
}
}

View File

@ -5,7 +5,7 @@
"author": "",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 192.168.0.29",
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
@ -17,6 +17,7 @@
"dependencies": {
"@jiaminghi/data-view": "^2.10.0",
"@riophae/vue-treeselect": "^0.4.0",
"autofit.js": "^3.1.1",
"axios": "^0.21.1",
"dayjs": "^1.11.10",
"echarts": "^5.3.1",
@ -26,11 +27,11 @@
"jspdf": "^2.5.1",
"moment": "^2.29.3",
"motion": "^10.16.4",
"throttle-debounce": "^5.0.0",
"mqtt": "4.2.1",
"normalize.css": "^8.0.1",
"nprogress": "^0.2.0",
"relation-graph": "^1.1.0",
"throttle-debounce": "^5.0.0",
"video.js": "^7.19.2",
"vue": "^2.5.2",
"vue-baidu-map": "^0.21.22",

Binary file not shown.

After

Width:  |  Height:  |  Size: 1002 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 208 KiB

View File

@ -11,38 +11,56 @@
<div class="right-menu-item hover-effect">
<span style="font-weight: bold">姓名{{ userForm.NAME }}</span>
</div>
<div class="right-menu-item hover-effect" @click="gotoBI()">
<svg-icon icon-class="dashboard" />
<span>可视化</span>
</div>
<div class="right-menu-item hover-effect" @click="gotoMap()">
<svg-icon icon-class="dashboard" />
<span>地图</span>
</div>
<div class="right-menu-item hover-effect" @click="setShowModel('prevention')">
<svg-icon icon-class="dashboard" />
<span>双重预防</span>
</div>
<div class="right-menu-item hover-effect" @click="setShowModel('relatedParties')">
<svg-icon icon-class="dashboard" />
<span>相关方</span>
</div>
<div class="right-menu-item hover-effect" @click="setShowModel('educationAndTraining')">
<!-- <div class="right-menu-item hover-effect" @click="gotoBI()">-->
<!-- <svg-icon icon-class="dashboard" />-->
<!-- <span>可视化</span>-->
<!-- </div>-->
<!-- <div class="right-menu-item hover-effect" @click="gotoMap()">-->
<!-- <svg-icon icon-class="dashboard" />-->
<!-- <span>地图</span>-->
<!-- </div>-->
<!-- <div class="right-menu-item hover-effect" @click="setShowModel('prevention')">-->
<!-- <svg-icon icon-class="dashboard" />-->
<!-- <span>双重预防</span>-->
<!-- </div>-->
<!-- <div class="right-menu-item hover-effect" @click="setShowModel('relatedParties')">-->
<!-- <svg-icon icon-class="dashboard" />-->
<!-- <span>相关方</span>-->
<!-- </div>-->
<!-- <div class="right-menu-item hover-effect" @click="setShowModel('educationAndTraining')">-->
<!-- <svg-icon icon-class="example" />-->
<!-- <span>教育培训</span>-->
<!-- </div>-->
<!-- <div class="right-menu-item hover-effect" @click="setShowModel('highRisk')">-->
<!-- <svg-icon icon-class="example" />-->
<!-- <span>高危作业管理</span>-->
<!-- </div>-->
<!-- <div class="right-menu-item hover-effect" @click="setShowModel('monitor')">-->
<!-- <svg-icon icon-class="example" />-->
<!-- <span>监测预警</span>-->
<!-- </div>-->
<!-- <div class="right-menu-item hover-effect" @click="setShowModel('comprehensive')">-->
<!-- <svg-icon icon-class="example" />-->
<!-- <span>综合管理</span>-->
<!-- </div>-->
<div class="right-menu-item hover-effect" @click="$router.push({path:'/guide'})">
<svg-icon icon-class="example" />
<span>教育培训</span>
</div>
<div class="right-menu-item hover-effect" @click="setShowModel('highRisk')">
<svg-icon icon-class="example" />
<span>高危作业管理</span>
</div>
<div class="right-menu-item hover-effect" @click="setShowModel('monitor')">
<svg-icon icon-class="example" />
<span>监测预警</span>
</div>
<div class="right-menu-item hover-effect" @click="setShowModel('comprehensive')">
<svg-icon icon-class="example" />
<span>综合管理</span>
<span>首页</span>
</div>
<el-dropdown class="right-menu-item" trigger="click">
<div style="cursor:pointer;">
<svg-icon icon-class="guide" />
<span>更多</span>
<i class="el-icon-arrow-down el-icon--right"/>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="(item,index) in menuList" :key="index" @click.native="item.click">
{{ item.text }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<!-- <template v-if="device!=='mobile'">
<screenfull id="screenfull" class="right-menu-item hover-effect" />
@ -163,6 +181,7 @@ import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import { requestFN } from '@/utils/request'
import { upload } from '@/utils/upload'
import { menuList } from '@/views/newBI/menuList'
export default {
components: {
Breadcrumb,
@ -285,7 +304,8 @@ export default {
dialogImageUrl: '',
dialogVisible: false,
DEPARTMENT_NAME: '',
FFILE: {}
FFILE: {},
menuList
}
},
computed: {

View File

@ -99,6 +99,18 @@ export const constantRoutes = [
name: 'map',
hidden: true,
component: () => import('@/views/map/index')
},
{
path: '/guide',
name: 'guide',
hidden: true,
component: () => import('@/views/newBI/index'),
children: [
{
path: '',
component: () => import('@/views/newBI/guide')
}
]
}
]
const createRouter = () => new Router({

View File

@ -15,7 +15,7 @@
</ul>
</menu>
<div class="right">
<div class="iconfont icon-tuichu" @click="$router.push('/index')"/>
<div class="iconfont icon-tuichu" @click="$router.push('/guide')"/>
<div
:class="['iconfont', !isFullScreen ? 'icon-full-screen' : 'icon-tuichuquanping']"
@click="handleFullScreen(undefined)"/>

View File

@ -22,7 +22,7 @@
@click="handleFullScreen(undefined)">
<span>全屏</span>
</div>
<div class="iconfont icon-tuichu color058" @click="$router.push('/index')">
<div class="iconfont icon-tuichu color058" @click="$router.push('/guide')">
<span>退出</span>
</div>
</div>

View File

@ -22,7 +22,7 @@
@click="handleFullScreen(undefined)">
<span>全屏</span>
</div>
<div class="iconfont icon-tuichu" @click="$router.push('/index')">
<div class="iconfont icon-tuichu" @click="$router.push('/guide')">
<span>退出</span>
</div>
</div>

View File

@ -278,7 +278,7 @@ export default {
if (data.result === 'success') {
sessionStorage.setItem('user', JSON.stringify(data))
sessionStorage.setItem('loginCount', '0')
this.$router.push({ path: '/index' })
this.$router.push({ path: '/guide' })
this.loading = false
this.flag = false
this.getWorkTask(data.USER_ID)

View File

@ -1582,7 +1582,7 @@ export default {
this.destroyConnection()
this.onePerLocArr = []
this.$router.push('/index')
this.$router.push('/guide')
} else if (index === 1) {
this.handleFullScreen(undefined)
} else if (index === 2) {
@ -2849,7 +2849,7 @@ export default {
}
.title {
background-image: linear-gradient(bottom, #5bb4f7, #ffffff);
background-image: linear-gradient(to bottom, #5bb4f7, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 34px;

159
src/views/newBI/guide.vue Normal file
View File

@ -0,0 +1,159 @@
<template>
<div id="guide">
<div class="header">
<div class="title">秦港某公司安全监管平台</div>
</div>
<div class="container">
<div class="menu">
<template v-for="(item, index) in menuList">
<div
v-if="index < 7"
:key="index"
:style="{'--x': position[index].x + 'px', '--y': position[index].y + 'px'}"
class="item left"
@click="item.click"
>
<div class="text">{{ item.text }}</div>
<img src="../../assets/images/enterprise/jiantou_left.png" alt="">
</div>
<div
v-else
:key="index"
:style="{'--x': position[index - 7].x + 'px', '--y': position[index - 7].y + 'px'}"
class="item right"
@click="item.click"
>
<img src="../../assets/images/enterprise/jiantou_right.png" alt="">
<div class="text">{{ item.text }}</div>
</div>
</template>
</div>
</div>
</div>
</template>
<script>
import autofit from 'autofit.js'
import { menuList } from './menuList'
export default {
data() {
return {
position: [
{ x: -100, y: 92 },
{ x: -160, y: 192 },
{ x: -200, y: 292 },
{ x: -240, y: 392 },
{ x: -220, y: 492 },
{ x: -200, y: 592 },
{ x: -160, y: 692 }
],
menuList
}
},
mounted() {
autofit.init({
dh: 1080,
dw: 1920,
el: '#guide',
resize: true
})
},
beforeDestroy() {
autofit.off()
}
}
</script>
<style scoped lang="scss">
#guide {
width: 100vw;
height: 100vh;
background-image: url("../../assets/images/enterprise/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
.header {
width: 100%;
height: 125px;
background-image: url("../../assets/images/enterprise/titbg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 0;
left: 0;
.title {
max-width: 800px;
height: 52px;
text-align: center;
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
font-weight: bold;
background-image: linear-gradient(to bottom, #00a2ff, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 44px;
}
}
.container {
width: 991px;
height: 954px;
background-image: url("../../assets/images/enterprise/img1.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.menu {
font-size: 15px;
color: #fff;
.item {
display: flex;
align-items: center;
position: absolute;
top: var(--y);
width: 177px;
height: 53px;
cursor: pointer;
background-repeat: no-repeat;
background-size: 100% 100%;
&.left {
background-image: url("../../assets/images/enterprise/navbg_left.png");
left: var(--x);
.text {
margin-left: 30px;
margin-right: 15px;
}
}
&.right {
background-image: url("../../assets/images/enterprise/navbg_right.png");
right: var(--x);
img {
margin-left: 30px;
}
.text {
margin-left: 15px;
}
}
.text {
font-weight: bold;
}
}
}
}
}
</style>

12
src/views/newBI/index.vue Normal file
View File

@ -0,0 +1,12 @@
<script>
export default {
}
</script>
<template>
<router-view/>
</template>
<style scoped>
</style>

112
src/views/newBI/menuList.js Normal file
View File

@ -0,0 +1,112 @@
import store from '@/store/index'
import router from '@/router/index'
export const menuList = [
{
text: '管理员驾驶舱',
click: () => {
router.push({ path: '/monitoringCenter' })
}
},
{
text: '物联网+地图',
click: () => {
router.push({ path: '/map' })
}
},
{
text: '企业信息管理',
model: 'enterpriseInformation',
click: () => {
store.dispatch('permission/setShowModel', 'enterpriseInformation')
router.push({ path: '/corpInfo/information/info' })
}
},
{
text: '法律法规管理',
model: 'regulations',
click: () => {
store.dispatch('permission/setShowModel', 'regulations')
router.push({ path: '/threeSystems/safetyOperationRegulations' })
}
},
{
text: '安全目标管理',
model: 'safetyObjectives',
click: () => {
store.dispatch('permission/setShowModel', 'safetyObjectives')
router.push({ path: '/security_commitment/promise_book' })
}
},
{
text: '安全教育管理',
model: 'educationTraining',
click: () => {
store.dispatch('permission/setShowModel', 'educationTraining')
router.push({ path: '/archives/user' })
}
},
{
text: '双重预防管理',
model: 'doublePrevention',
click: () => {
store.dispatch('permission/setShowModel', 'doublePrevention')
router.push({ path: '/risk/riskunit' })
}
},
{
text: '相关方管理',
model: 'relatedParties',
click: () => {
store.dispatch('permission/setShowModel', 'relatedParties')
router.push({ path: '/relevantunits/insert' })
}
},
{
text: '消防安全管理',
model: 'fireSafety',
click: () => {
store.dispatch('permission/setShowModel', 'fireSafety')
router.push({ path: '/firefighting/qualifiedphotos' })
}
},
{
text: '危险作业管理',
model: 'dangerousOperations',
click: () => {
store.dispatch('permission/setShowModel', 'dangerousOperations')
router.push({ path: '/specialType/InterestedParties' })
}
},
{
text: '作业现场管理',
model: 'workSiteManagement',
click: () => {
store.dispatch('permission/setShowModel', 'workSiteManagement')
router.push({ path: '/keyprojects/units' })
}
},
{
text: '绩效考评管理',
model: 'performanceAssessment',
click: () => {
store.dispatch('permission/setShowModel', 'performanceAssessment')
router.push({ path: '/statistics/branch' })
}
},
{
text: '应急管理',
model: 'emergency',
click: () => {
store.dispatch('permission/setShowModel', 'emergency')
router.push({ path: '/emergency/plan' })
}
},
{
text: '科技创新',
model: 'innovation',
click: () => {
store.dispatch('permission/setShowModel', 'innovation')
router.push({ path: '/oneCompany/alarmList' })
}
}
]