|
|
|
@ -0,0 +1,180 @@
|
|
|
|
|
<template>
|
|
|
|
|
|
|
|
|
|
<div class="warn" v-if="showWarning" :draggable="true"
|
|
|
|
|
@dragstart="onDragStart"
|
|
|
|
|
@dragend="onDragEnd"
|
|
|
|
|
@mousedown.prevent.stop="onMouseDown"
|
|
|
|
|
@mousemove="onMouseMove"
|
|
|
|
|
@mouseup="onMouseUp">
|
|
|
|
|
<div class="warntitle">
|
|
|
|
|
<span> 设计预警通知</span>
|
|
|
|
|
<div>
|
|
|
|
|
<span @click="ExpandWran" class="warnclose"> <el-icon>
|
|
|
|
|
<Expand />
|
|
|
|
|
</el-icon></span>
|
|
|
|
|
<span @click="closeWran" class="warnclose"> <el-icon>
|
|
|
|
|
<CloseBold />
|
|
|
|
|
</el-icon></span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 折叠 -->
|
|
|
|
|
<div class="warncenter">
|
|
|
|
|
<div class="warntext" v-for="item in 5" :key="item">
|
|
|
|
|
<span style="margin-top:5px"><img :src="warnimg" alt="" /></span>
|
|
|
|
|
<div class="warnnr">
|
|
|
|
|
<span>铸造工艺设计负责人: <span class="warnname">{{`薛小宝`}}</span> 请注意!</span>
|
|
|
|
|
<span class="warnbh">项目编号【{{ item}}】的图纸设计即将超时,请及时完成。</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div v-if="showFilled" @click="FoldWran" class="FoldWran">
|
|
|
|
|
<span>
|
|
|
|
|
<el-icon>
|
|
|
|
|
<WarningFilled />
|
|
|
|
|
</el-icon>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { useCommonStore } from '@/store/modules/common'
|
|
|
|
|
import { CloseBold, Expand, WarningFilled } from '@element-plus/icons-vue'
|
|
|
|
|
import warnimg from '/src/assets/imgs/warnicon.png'
|
|
|
|
|
const commonStore = useCommonStore()
|
|
|
|
|
const showWarning = computed(() => commonStore.showWarning)
|
|
|
|
|
const showFilled = ref(false)
|
|
|
|
|
const FoldWran = () => {
|
|
|
|
|
showFilled.value = false
|
|
|
|
|
|
|
|
|
|
commonStore.setStore('showWarning', true)
|
|
|
|
|
}
|
|
|
|
|
const closeWran = () => {
|
|
|
|
|
commonStore.setStore('showWarning', false)
|
|
|
|
|
}
|
|
|
|
|
const ExpandWran = () => {
|
|
|
|
|
commonStore.setStore('showWarning', false)
|
|
|
|
|
showFilled.value = true
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 拖动
|
|
|
|
|
let dragStartX = 0;
|
|
|
|
|
let dragStartY = 0;
|
|
|
|
|
|
|
|
|
|
const onMouseDown = (event: MouseEvent) => {
|
|
|
|
|
dragStartX = event.clientX - document.querySelector('.warn')!.offsetLeft;
|
|
|
|
|
dragStartY = event.clientY - document.querySelector('.warn')!.offsetTop;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const onMouseMove = (event: MouseEvent) => {
|
|
|
|
|
if (event.buttons === 1) {
|
|
|
|
|
const target = document.querySelector('.warn')!;
|
|
|
|
|
target.style.left = `${event.clientX - dragStartX}px`;
|
|
|
|
|
target.style.top = `${event.clientY - dragStartY}px`;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// const onMouseUp = () => {
|
|
|
|
|
// // 可以在这里保存最终位置到store中(如果需要持久化)
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
// const onDragStart = (event: DragEvent) => {
|
|
|
|
|
// // 阻止默认的拖放行为,因为我们自己处理拖拽
|
|
|
|
|
// event.preventDefault();
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
// const onDragEnd = () => {
|
|
|
|
|
// // 可以在此处执行拖拽结束后的操作(如果需要)
|
|
|
|
|
// };
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.FoldWran {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
margin-left: 15px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 150px;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 50px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
background-color: #e6a23c;
|
|
|
|
|
color: #fff;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border-top-left-radius: 10px;
|
|
|
|
|
border-bottom-left-radius: 10px;
|
|
|
|
|
}
|
|
|
|
|
.warn {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 110px;
|
|
|
|
|
right: 60px;
|
|
|
|
|
z-index: 5000;
|
|
|
|
|
width: 400px;
|
|
|
|
|
height: 300px;
|
|
|
|
|
box-shadow: 0px 0px 10px 0px #999;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
.warntitle {
|
|
|
|
|
height: 40px;
|
|
|
|
|
background-color: #f7f8fa;
|
|
|
|
|
border-bottom: 1px solid #e4e7ed;
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.warnclose {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
margin-left: 15px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.warncenter {
|
|
|
|
|
height: 250px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
max-height: 250px;
|
|
|
|
|
.warntext {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
color: #54595e;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
.warnnr {
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.warnname {
|
|
|
|
|
color: #409eff;
|
|
|
|
|
}
|
|
|
|
|
.warnbh {
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
color: rgba(84, 89, 94, 0.6);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//滚动条整体部分
|
|
|
|
|
.warncenter::-webkit-scrollbar {
|
|
|
|
|
width: 10px; /* 水平滚动条宽度 */
|
|
|
|
|
height: 10px; /* 垂直滚动条高度 */
|
|
|
|
|
}
|
|
|
|
|
//滚动条两端的按钮
|
|
|
|
|
.warncenter::-webkit-scrollbar-button {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
// 外层轨道
|
|
|
|
|
.warncenter::-webkit-scrollbar-track {
|
|
|
|
|
background-color: #f1f1f1;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//滚动条里面可以拖动的那个
|
|
|
|
|
.warncenter::-webkit-scrollbar-thumb {
|
|
|
|
|
background-color: #888;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|