代码提交
This commit is contained in:
parent
a4e56cd65e
commit
2a297a38cd
|
|
@ -0,0 +1,24 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" />-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>xxx部队一张图</title>
|
||||
<script src="config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"name": "vite-project",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@enhances/bigscreen-fit-vue3": "^0.2.6",
|
||||
"element-plus": "^2.3.14",
|
||||
"less": "^4.2.0",
|
||||
"three": "^0.164.1",
|
||||
"vue": "^3.3.4",
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
"sass": "^1.77.6",
|
||||
"sass-loader": "^14.2.1",
|
||||
"vite": "^4.4.5"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
|
@ -0,0 +1,8 @@
|
|||
|
||||
function getQueryParam(param) {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
return "http://172.16.1.254:8201/Upload/" + urlParams.get(param);
|
||||
}
|
||||
const config = {
|
||||
VUE_APP_API_BASE_URL: getQueryParam("key"),
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,22 @@
|
|||
<script setup>
|
||||
import Three from './components/Three.vue'
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <div id="three3D">
|
||||
<Three />
|
||||
</div> -->
|
||||
<router-view></router-view>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
#three3D {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 416 B |
Binary file not shown.
|
After Width: | Height: | Size: 841 B |
Binary file not shown.
|
After Width: | Height: | Size: 524 B |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 451 B |
Binary file not shown.
|
After Width: | Height: | Size: 199 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 624 B |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
|
|
@ -0,0 +1,26 @@
|
|||
@use "sass:math";
|
||||
//默认设计稿的宽度
|
||||
//$designWidth: 3840;
|
||||
//默认设计稿的高度
|
||||
//$designHeight: 2160;
|
||||
#app,html{
|
||||
font-size: 32px;
|
||||
}
|
||||
@media screen and (max-width:1920px){
|
||||
#app,html{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
}
|
||||
$designWidth: 1920;
|
||||
$designHeight: 1080;
|
||||
|
||||
//px转为vw的函数
|
||||
@function vw($px) {
|
||||
@return math.div($px , $designWidth) * 100%;
|
||||
}
|
||||
|
||||
//px转为vh的函数
|
||||
@function vh($px) {
|
||||
@return math.div($px , $designHeight) * 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
|
|
@ -0,0 +1,168 @@
|
|||
<template></template>
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
|
||||
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js'
|
||||
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'
|
||||
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'
|
||||
import { CSS3DRenderer, CSS3DObject } from "three/examples/jsm/renderers/CSS3DRenderer";
|
||||
import * as THREE from 'three';
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
createCamera()
|
||||
createRender()
|
||||
createLight()
|
||||
// console.log(requestAnimationFrame);
|
||||
|
||||
animate()
|
||||
initIcon()
|
||||
})
|
||||
//加入事件监听器,窗口自适应
|
||||
window.addEventListener('resize', function () {
|
||||
var width = window.innerWidth;
|
||||
var height = window.innerHeight;
|
||||
renderer.setSize(width, height);
|
||||
camera.aspect = width / height;
|
||||
camera.updateProjectionMatrix();
|
||||
labelRenderer.setSize(window.innerWidth, window.innerHeight);
|
||||
// initIcon()
|
||||
})
|
||||
|
||||
let scene
|
||||
let camera
|
||||
let renderer
|
||||
let mesh //材质
|
||||
let labelRenderer //3d图片
|
||||
let controls
|
||||
scene = new THREE.Scene()
|
||||
camera = new THREE.PerspectiveCamera(25, window.innerWidth / window.innerHeight, .6, 10000)
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
|
||||
// 增加控制器
|
||||
controls = new OrbitControls(camera, renderer.domElement)
|
||||
// controls.maxPolarAngle = 20*Math.PI
|
||||
controls.maxDistance = 1000
|
||||
controls.minDistance = 200
|
||||
// controls.minAzimuthAngle = 100 * Math.PI;
|
||||
// controls.maxAzimuthAngle = 100 * Math.PI;
|
||||
controls.minPolarAngle = 0;
|
||||
controls.maxPolarAngle = (Math.PI / 4) *2
|
||||
|
||||
const emissiveColor = new THREE.Color(0xff0000)
|
||||
const material = new THREE.MeshStandardMaterial({
|
||||
color: 0xffffff, // 模型的基本颜色
|
||||
emissive: emissiveColor,
|
||||
emissiveIntensity: 1, // 自发光强度（可选）
|
||||
});
|
||||
// function init() {
|
||||
// const mtLoader = new MTLLoader()
|
||||
// const loader = new OBJLoader()
|
||||
// mtLoader.load('/model/YinFangShuJu_01.mtl', function (material) {
|
||||
|
||||
// console.log(material);
|
||||
// material.preload()
|
||||
// loader.setMaterials(material)
|
||||
// // 设置当前纹理
|
||||
|
||||
// loader.load('/model/YinFangShuJu_01.obj', (loadMesh) => {
|
||||
// mesh = loadMesh
|
||||
// console.log(mesh);
|
||||
// // 添加到场景
|
||||
// scene.add(mesh)
|
||||
// }, (xhr) => {
|
||||
// if (xhr.lengthComputable) {
|
||||
// const percentComplete = xhr.loaded / xhr.total * 100
|
||||
// console.log(Math.round(percentComplete, 2) + '%')
|
||||
// }
|
||||
|
||||
// })
|
||||
// })
|
||||
// }
|
||||
function init() {
|
||||
|
||||
const loader = new FBXLoader()
|
||||
loader.load('YFSJ_Model.fbx', (fbx) => {
|
||||
// fbx.traverse(function (child) {
|
||||
// if (child.isMesh && child.name =='路牙') {
|
||||
// child.material = new THREE.MeshPhongMaterial({
|
||||
// color: new THREE.Color('#b4babd'),
|
||||
// // 设置发光强度
|
||||
// // map: texture, // 纹理贴图
|
||||
// // emissive: 0x00ff00, // 设置发光颜色
|
||||
// emissiveIntensity: 1,
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
console.log(fbx,'模型');
|
||||
// fbx.children[21].material.emissiveIntensity = 1
|
||||
// fbx.material = fbx.children[21].material
|
||||
// console.log(fbx.children[21]);
|
||||
fbx.scale.set(1, 1, 1);
|
||||
// fbx.rotation.set(180,20,0)
|
||||
fbx.position.set(0, 0, 0);
|
||||
scene.add(fbx);
|
||||
})
|
||||
}
|
||||
function createLight() {
|
||||
// 环境光
|
||||
const ambientLight = new THREE.AmbientLight(0xffffff, 1.5) // 创建环境光
|
||||
scene.add(ambientLight) // 将环境光添加到场景
|
||||
const spotLight = new THREE.SpotLight('#ffffff', 0.7) // 创建聚光灯
|
||||
spotLight.position.set(1600, 1660, 100)
|
||||
spotLight.castShadow = true
|
||||
scene.add(spotLight)
|
||||
}
|
||||
function createCamera() {
|
||||
|
||||
camera.position.set(500, 400, -500)
|
||||
console.log(camera);
|
||||
camera.lookAt(scene.position)
|
||||
scene.add(camera)
|
||||
}
|
||||
function createRender() {
|
||||
renderer.setSize(window.innerWidth, window.innerHeight)
|
||||
renderer.shadowMap.enabled = true // 显示阴影
|
||||
renderer.shadowMap.type = THREE.PCFSoftShadowMap
|
||||
renderer.setClearColor('#ffffff') // 设置背景颜色
|
||||
document.querySelector('#three3D').appendChild(renderer.domElement)
|
||||
|
||||
// document.querySelector('#three3D').appendChild(labelRenderer.domElement);
|
||||
|
||||
}
|
||||
async function initIcon() {
|
||||
let pointList = [
|
||||
{
|
||||
name: "警报",
|
||||
point: {
|
||||
x: 40.91436767578125,
|
||||
y: 0.9466018676757812,
|
||||
z: 0
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "馍馍加辣条",
|
||||
point: {
|
||||
x:15.29782094726788,
|
||||
y: 2.00017999999690800907,
|
||||
z: -75.36294510575863,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "xxx",
|
||||
point: {
|
||||
x: 50.91436767578125,
|
||||
y: 0.9466018676757812,
|
||||
z: 200
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
function animate() {
|
||||
controls.update()
|
||||
requestAnimationFrame(animate);
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { createApp } from 'vue'
|
||||
import './style.scss'
|
||||
import App from './App.vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import router from "./router/router.js"
|
||||
import bigScreenFit from '@enhances/bigscreen-fit-vue3';
|
||||
const app =createApp(App)
|
||||
app.use(bigScreenFit, {
|
||||
compress: false, // 不压缩
|
||||
}).use(ElementPlus).use(router).mount('#app')
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path:'/',
|
||||
redirect:'/home',
|
||||
},
|
||||
{
|
||||
path:'/home',
|
||||
name:'home',
|
||||
component: () => import('@/views/home/index')
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
// history: createWebHistory(),
|
||||
history: createWebHashHistory(),
|
||||
routes,
|
||||
})
|
||||
|
||||
export default router;
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
#app,html,body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
color: rgba(221, 255, 253, 1);
|
||||
}
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,542 @@
|
|||
<template>
|
||||
<!-- 头部-->
|
||||
<div class="header">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="container-left">
|
||||
<div class="container-left-box">
|
||||
<!-- 报警列表 -->
|
||||
<div class="public-title">
|
||||
<span class="font">报警列表</span>
|
||||
<span class="more">
|
||||
查看更多
|
||||
</span>
|
||||
</div>
|
||||
<div class="alarmList">
|
||||
<section class="regional">
|
||||
|
||||
</section>
|
||||
<section>
|
||||
|
||||
</section>
|
||||
<section>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
<div class="public-title">
|
||||
<span class="font">钥匙柜状态总览</span>
|
||||
<span class="more">
|
||||
取还记录
|
||||
</span>
|
||||
</div>
|
||||
<!-- 钥匙柜数据 -->
|
||||
<div class="keyword">
|
||||
<ul class="keyword-state">
|
||||
<li v-for="(item,index) in keywordState">
|
||||
<i :class="'keyword-state-icon'+index"></i>
|
||||
<span>{{item}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<section v-for="(item,index) in keywordList" class="keyword-item" :class="'keyword-item'+index">
|
||||
<span>{{item.keyCapturing}}号锁位</span>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-right">
|
||||
<div class="container-right-box">
|
||||
<!-- 排班表 -->
|
||||
<div class="public-title">
|
||||
<span class="font">排班表</span>
|
||||
<span class="more">
|
||||
查看更多
|
||||
</span>
|
||||
</div>
|
||||
<div class="schedule-date">
|
||||
<p>
|
||||
<i class="drop"></i>
|
||||
日期：{{schedule.date}}
|
||||
</p>
|
||||
<p style="margin-left: 2.37rem">
|
||||
<i class="drop"></i>
|
||||
时间：{{schedule.day}}
|
||||
</p>
|
||||
<p>
|
||||
<i class="drop"></i>
|
||||
星期：{{schedule.week}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="schedule-person">
|
||||
<section v-for="(item,index) in schedule.person" class="schedule-person-item">
|
||||
|
||||
</section>
|
||||
</div>
|
||||
<!-- 巡更线监控 -->
|
||||
<div class="public-title">
|
||||
<span class="font">巡更线监控</span>
|
||||
</div>
|
||||
<div class="patrol-line">
|
||||
<el-table :data="tableData" style="width: 100%" stripe :row-class-name="getRowColor">
|
||||
<el-table-column prop="position" min-width="25%" label="巡更点" show-overflow-tooltip />
|
||||
<el-table-column prop="state" min-width="25%" label="巡更状态">
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<!-- <i class="qiu-icon" :style="'background-color:' + getColor(scope.row.state)"></i>{{
|
||||
getFont(scope.row.state) }} -->
|
||||
<p><i class="qiu-icon" :style="'background-color:' + getColor(scope.row.state)"></i>{{
|
||||
fontState[parseInt(scope.row.state)] }}</p>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="history" min-width="55%" label="打卡记录" show-overflow-tooltip />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部-->
|
||||
<div class="footer">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {ref} from 'vue'
|
||||
|
||||
// 报警列表
|
||||
const alarmList = ref({
|
||||
regional:[
|
||||
{
|
||||
address:'东6厂房西侧摄像头',
|
||||
date:'2022-07-18 12:02:56'
|
||||
}
|
||||
],
|
||||
humidity:[
|
||||
{
|
||||
alarmHumidity:'40℃',
|
||||
humidity:'40℃',
|
||||
address:'西3区厂房',
|
||||
date:'2022-07-18 12:02:56'
|
||||
}
|
||||
],
|
||||
urgent:[
|
||||
{
|
||||
alarmHumidity:'40℃',
|
||||
humidity:'40℃',
|
||||
address:'西3区厂房',
|
||||
date:'2022-07-18 12:02:56'
|
||||
}
|
||||
]
|
||||
})
|
||||
// 钥匙柜
|
||||
const keywordState = ref(['在位','不在位'])
|
||||
// 钥匙柜
|
||||
const keywordList = ref([
|
||||
{
|
||||
keyCapturing: "1",
|
||||
keyState: "在位",
|
||||
},
|
||||
{
|
||||
keyCapturing: "2",
|
||||
keyState: "在位",
|
||||
},
|
||||
{
|
||||
keyCapturing: "3",
|
||||
keyState: "在位",
|
||||
},
|
||||
{
|
||||
keyCapturing: "4",
|
||||
keyState: "在位",
|
||||
},
|
||||
{
|
||||
keyCapturing: "5",
|
||||
keyState: "不在位",
|
||||
position: "李柳柳取走",
|
||||
},
|
||||
{
|
||||
keyCapturing: "6",
|
||||
keyState: "不在位",
|
||||
position: "李柳柳取走",
|
||||
},
|
||||
{
|
||||
keyCapturing: "7",
|
||||
keyState: "不在位",
|
||||
position: "李柳柳取走",
|
||||
},
|
||||
{
|
||||
keyCapturing: "8",
|
||||
keyState: "在位",
|
||||
},
|
||||
{
|
||||
keyCapturing: "9",
|
||||
keyState: "在位",
|
||||
},
|
||||
{
|
||||
keyCapturing: "10",
|
||||
keyState: "在位",
|
||||
},
|
||||
{
|
||||
keyCapturing: "11",
|
||||
keyState: "在位",
|
||||
},
|
||||
{
|
||||
keyCapturing: "12",
|
||||
keyState: "在位",
|
||||
},
|
||||
]);
|
||||
// 排班表
|
||||
const schedule = ref({
|
||||
date:'2022-07-08',
|
||||
week:'周日',
|
||||
day:'18:04:55',
|
||||
person:[
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
]
|
||||
})
|
||||
// 巡更线
|
||||
const tableData = ref([
|
||||
{
|
||||
position: "巡更点1",
|
||||
state: "1",
|
||||
history: "刘七七 2020/06/08 14:27:11",
|
||||
},
|
||||
{
|
||||
position: "巡更点2",
|
||||
state: "0",
|
||||
history: "刘七七 2020/06/08 14:27:11",
|
||||
},
|
||||
{
|
||||
position: "巡更点3",
|
||||
state: "2",
|
||||
history: "刘七七 2020/06/08 14:27:11",
|
||||
},
|
||||
{
|
||||
position: "巡更点4",
|
||||
state: "3",
|
||||
history: "刘七七 2020/06/08 14:27:11",
|
||||
},
|
||||
{
|
||||
position: "巡更点5",
|
||||
state: "4",
|
||||
history: "刘七七 2020/06/08 14:27:11",
|
||||
},
|
||||
{
|
||||
position: "巡更点6",
|
||||
state: "1",
|
||||
history: "刘七七 2020/06/08 14:27:11",
|
||||
},
|
||||
{
|
||||
position: "巡更点7",
|
||||
state: "2",
|
||||
history: "刘七七 2020/06/08 14:27:11",
|
||||
},
|
||||
{
|
||||
position: "巡更点8",
|
||||
state: "2",
|
||||
history: "刘七七 2020/06/08 14:27:11",
|
||||
},
|
||||
{
|
||||
position: "巡更点9",
|
||||
state: "1",
|
||||
history: "刘七七 2020/06/08 14:27:11",
|
||||
},
|
||||
{
|
||||
position: "巡更点10",
|
||||
state: "1",
|
||||
history: "刘七七 2020/06/08 14:27:11",
|
||||
},
|
||||
{
|
||||
position: "巡更点10",
|
||||
state: "1",
|
||||
history: "刘七七 2020/06/08 14:27:11",
|
||||
},
|
||||
{
|
||||
position: "巡更点10",
|
||||
state: "1",
|
||||
history: "刘七七 2020/06/08 14:27:11",
|
||||
},
|
||||
{
|
||||
position: "巡更点10",
|
||||
state: "1",
|
||||
history: "刘七七 2020/06/08 14:27:11",
|
||||
},
|
||||
{
|
||||
position: "巡更点10",
|
||||
state: "1",
|
||||
history: "刘七七 2020/06/08 14:27:11",
|
||||
},
|
||||
{
|
||||
position: "巡更点10",
|
||||
state: "1",
|
||||
history: "刘七七 2020/06/08 14:27:11",
|
||||
},
|
||||
{
|
||||
position: "巡更点10",
|
||||
state: "1",
|
||||
history: "刘七七 2020/06/08 14:27:11",
|
||||
},
|
||||
{
|
||||
position: "巡更点10",
|
||||
state: "1",
|
||||
history: "刘七七 2020/06/08 14:27:11",
|
||||
},
|
||||
{
|
||||
position: "巡更点10",
|
||||
state: "1",
|
||||
history: "刘七七 2020/06/08 14:27:11",
|
||||
},
|
||||
]);
|
||||
|
||||
// 状态文字
|
||||
const fontState = ref(['准时','早巡','晚巡','补漏巡','漏巡'])
|
||||
// 获取状态颜色
|
||||
function getColor(state) {
|
||||
if (state === "1" || state === "2") {
|
||||
return "#f05657";
|
||||
} else if (state === "4" || state === "3") {
|
||||
return "#FFBF00";
|
||||
} else if (state === "0") {
|
||||
return "#52e76f";
|
||||
}
|
||||
}
|
||||
function getRowColor({ row }) {
|
||||
// if (row.state === "1" || row.state === "2") {
|
||||
// return "state1";
|
||||
// } else if (row.state === "4" || row.state === "3") {
|
||||
// return "state2";
|
||||
// } else if (row.state === "0") {
|
||||
// return "state3";
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
width: 100%;
|
||||
height: vh(108);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-size: 100% 100%;
|
||||
background-image: url('@/assets/images/header.png');
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&-left, &-right {
|
||||
padding-top: vw(104);
|
||||
width: vw(380);
|
||||
height: 100%;
|
||||
|
||||
&-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
//标题
|
||||
.public-title{
|
||||
|
||||
height:vh(40);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-left: 3.5rem;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/images/title-box.png');
|
||||
span:nth-child(1){
|
||||
//font-size: 1.625rem;
|
||||
}
|
||||
}
|
||||
&-left {
|
||||
background-image: url('@/assets/images/left-mask.png');
|
||||
padding-left: 3.5rem;
|
||||
background-size: 100% 100%;
|
||||
//报警列表
|
||||
.alarmList{
|
||||
width: 100%;
|
||||
height: vh(318);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-evenly;
|
||||
section{
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background-image: url('@/assets/images/alarm-item.png');
|
||||
}
|
||||
}
|
||||
// 钥匙柜
|
||||
.keyword{
|
||||
width: 100%;
|
||||
//background-color: #fff;
|
||||
height: vh(220);
|
||||
&-state{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
font-size: .75rem;
|
||||
margin: 1rem 0;
|
||||
&-icon0,&-icon1{
|
||||
width: 0.875rem;
|
||||
height: .875rem;
|
||||
background-size: 100% 100%;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
&-icon0{
|
||||
background-image: url('@/assets/images/has.png');
|
||||
}
|
||||
&-icon0 + span{
|
||||
color: rgba(0, 220, 183, 1);
|
||||
}
|
||||
&-icon1 + span{
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
&-icon1{
|
||||
margin-left: 2rem;
|
||||
background-image: url('@/assets/images/noHas.png');
|
||||
}
|
||||
}
|
||||
&-item{
|
||||
float: left;
|
||||
width: 23.5%;
|
||||
font-size: .75rem;
|
||||
height: 24%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .5rem;
|
||||
box-sizing: border-box;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: .5rem;
|
||||
background-image: url('@/assets/images/has-bg.png');
|
||||
background-size: 100% 100%;
|
||||
margin-right: .45rem;
|
||||
}
|
||||
&-item:nth-of-type(4n){
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-right {
|
||||
background-image: url('@/assets/images/right-mask.png');
|
||||
padding-right: 3.5rem;
|
||||
background-size: 100% 100%;
|
||||
.schedule-date{
|
||||
|
||||
.drop{
|
||||
margin-right: 0.5rem;
|
||||
width: 0.8rem;
|
||||
display: inline-block;
|
||||
height: 0.8rem;
|
||||
background-image: url('@/assets/images/drop.png');
|
||||
}
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-between;
|
||||
padding: 0.6rem 0.8rem;
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/images/schedule-date.png');
|
||||
width: 100%;
|
||||
height: vh(80);
|
||||
margin:.5rem 0;
|
||||
}
|
||||
.schedule-person{
|
||||
&-item{
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
background-image: url('@/assets/images/schedule-person.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
justify-content: space-between;
|
||||
height: vh(160);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-bottom: 1.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
height: vh(26);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background-image: url('@/assets/images/bottom.png');
|
||||
}
|
||||
//巡更线列表
|
||||
.patrol-line{
|
||||
height: vh(540);
|
||||
width: 100%;
|
||||
margin-top: 1.1rem;
|
||||
.qiu-icon {
|
||||
display: inline-block;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
margin-right: 0.3rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
:deep(.state2) {
|
||||
color: #ffbf00;
|
||||
}
|
||||
|
||||
:deep(.state1) {
|
||||
color: #f05657;
|
||||
}
|
||||
|
||||
:deep(.state3) {
|
||||
color: #52e76f;
|
||||
}
|
||||
:deep(.el-table__row--striped) {
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
:deep(tr.el-table__row td.el-table__cell) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
:deep(.el-table__inner-wrapper::before) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
:deep(.el-table .el-table__cell) {
|
||||
padding: 0;
|
||||
}
|
||||
:deep(.el-table .cell) {
|
||||
height: 100%;
|
||||
line-height: 2.4rem;
|
||||
}
|
||||
:deep(.el-table tr),
|
||||
:deep(.el-table),
|
||||
:deep(.el-table th),
|
||||
:deep(.el-table td) {
|
||||
background-color: transparent;
|
||||
}
|
||||
:deep(.el-table__row) {
|
||||
height: 2.4rem;
|
||||
}
|
||||
:deep(.el-table) {
|
||||
color: rgba(233, 244, 255, 1);
|
||||
font-size: 0.8rem;
|
||||
height: 100%;
|
||||
}
|
||||
:deep(.el-table thead){
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 0.8rem;
|
||||
background-image: url('@/assets/images/table-header.png');
|
||||
height: 2rem;
|
||||
line-height: 2rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
:deep(.el-table th.el-table__cell.is-leaf),
|
||||
:deep(.el-table td.el-table__cell) {
|
||||
border-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
import path from "path";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
define: {
|
||||
'process.env': process.env
|
||||
},
|
||||
resolve: {
|
||||
// 配置路径别名
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, './src'),
|
||||
},
|
||||
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
|
||||
},
|
||||
// vite 相关配置
|
||||
server: {
|
||||
port: 8801,
|
||||
host: true,
|
||||
open: true,
|
||||
proxy: {
|
||||
// https://cn.vitejs.dev/config/#server-proxy
|
||||
'/dev-api': {
|
||||
target: 'http://172.16.1.134:8021/',
|
||||
changeOrigin: true,
|
||||
rewrite: (p) => p.replace(/^\/dev-api/, '')
|
||||
}
|
||||
}
|
||||
},
|
||||
// 全局配置scss方法
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
additionalData: `@import "@/assets/scss/common.scss";`,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
Loading…
Reference in New Issue