添加悬浮时间
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
8703b28470
commit
ba6bcebe1f
130
src/App.vue
130
src/App.vue
|
|
@ -1,12 +1,7 @@
|
|||
<template>
|
||||
<div id="app" style="position: relative">
|
||||
<router-view />
|
||||
<div
|
||||
v-show="show"
|
||||
v-if="$route.matched.length > 0"
|
||||
v-adaptive
|
||||
@click="openI18n"
|
||||
style="
|
||||
<div v-show="show" v-if="$route.matched.length > 0" v-adaptive @click="openI18n" style="
|
||||
position: fixed;
|
||||
bottom: 50px;
|
||||
left: 50px;
|
||||
|
|
@ -19,58 +14,27 @@
|
|||
color: #fff;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
"
|
||||
>
|
||||
">
|
||||
i18n
|
||||
</div>
|
||||
<el-drawer
|
||||
:title="$t('il8n:title')"
|
||||
:visible.sync="drawer"
|
||||
direction="rtl"
|
||||
size="80%"
|
||||
>
|
||||
<el-drawer :title="$t('il8n:title')" :visible.sync="drawer" direction="rtl" size="80%">
|
||||
<div style="width: 800px">
|
||||
<el-form
|
||||
label-width="100px"
|
||||
@submit.native.prevent
|
||||
size="small"
|
||||
:inline="true"
|
||||
class="demo-form-inline"
|
||||
>
|
||||
<el-form label-width="100px" @submit.native.prevent size="small" :inline="true" class="demo-form-inline">
|
||||
<el-form-item :label="$t('il8n:search:keyword')">
|
||||
<el-input v-model="key" @input="keyChange" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('il8n:search:state')">
|
||||
<el-select
|
||||
v-model="State"
|
||||
clearable
|
||||
filterable
|
||||
@change="handleStateChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item of $d.InternationalizationKeyState"
|
||||
:key="'InternationalizationKeyState' + item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
<el-select v-model="State" clearable filterable @change="handleStateChange">
|
||||
<el-option v-for="item of $d.InternationalizationKeyState"
|
||||
:key="'InternationalizationKeyState' + item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
v-adaptive="{ bottomOffset: 50 }"
|
||||
height="100"
|
||||
style="width: 100%"
|
||||
@sort-change="handleSortByColumn"
|
||||
>
|
||||
<el-table-column
|
||||
prop="Code"
|
||||
:label="$t('il8n:table:label')"
|
||||
width="300"
|
||||
show-overflow-tooltip
|
||||
sortable="custom"
|
||||
>
|
||||
<el-table :data="tableData" v-adaptive="{ bottomOffset: 50 }" height="100" style="width: 100%"
|
||||
@sort-change="handleSortByColumn">
|
||||
<el-table-column prop="Code" :label="$t('il8n:table:label')" width="300" show-overflow-tooltip
|
||||
sortable="custom">
|
||||
</el-table-column>
|
||||
<!-- <el-table-column-->
|
||||
<!-- prop="Description"-->
|
||||
|
|
@ -81,71 +45,37 @@
|
|||
<!-- {{scope.row.Description}}-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<el-table-column
|
||||
prop="Value"
|
||||
:label="$t('il8n:table:en')"
|
||||
sortable="custom"
|
||||
>
|
||||
<el-table-column prop="Value" :label="$t('il8n:table:en')" sortable="custom">
|
||||
<template slot-scope="scope">
|
||||
<el-input
|
||||
v-model="scope.row.Value"
|
||||
@input="
|
||||
<el-input v-model="scope.row.Value" @input="
|
||||
(e) => {
|
||||
$set(scope.row, 'Value', e)
|
||||
}
|
||||
"
|
||||
size="mini"
|
||||
></el-input>
|
||||
" size="mini"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="ValueCN"
|
||||
:label="$t('il8n:table:cn')"
|
||||
sortable="custom"
|
||||
>
|
||||
<el-table-column prop="ValueCN" :label="$t('il8n:table:cn')" sortable="custom">
|
||||
<template slot-scope="scope">
|
||||
<el-input
|
||||
v-model="scope.row.ValueCN"
|
||||
@input="
|
||||
<el-input v-model="scope.row.ValueCN" @input="
|
||||
(e) => {
|
||||
$set(scope.row, 'ValueCN', e)
|
||||
}
|
||||
"
|
||||
size="mini"
|
||||
></el-input>
|
||||
" size="mini"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="ValueCN"
|
||||
:label="$t('il8n:table:state')"
|
||||
sortable="custom"
|
||||
>
|
||||
<el-table-column prop="ValueCN" :label="$t('il8n:table:state')" sortable="custom">
|
||||
<template slot-scope="scope">
|
||||
<el-select
|
||||
v-model="scope.row.State"
|
||||
clearable
|
||||
filterable
|
||||
size="mini"
|
||||
>
|
||||
<el-option
|
||||
v-for="item of $d.InternationalizationKeyState"
|
||||
:key="'InternationalizationKeyState' + item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
<el-select v-model="scope.row.State" clearable filterable size="mini">
|
||||
<el-option v-for="item of $d.InternationalizationKeyState"
|
||||
:key="'InternationalizationKeyState' + item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Version"
|
||||
:label="$t('il8n:table:Version')"
|
||||
sortable="custom"
|
||||
>
|
||||
<el-table-column prop="Version" :label="$t('il8n:table:Version')" sortable="custom">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="text-align: right; padding-top: 10px; padding-right: 10px">
|
||||
<el-button size="mini" @click="drawer = false"
|
||||
>{{ $t('common:button:cancel') }}
|
||||
<el-button size="mini" @click="drawer = false">{{ $t('common:button:cancel') }}
|
||||
</el-button>
|
||||
<el-button size="mini" type="primary" @click="handleSave">{{
|
||||
$t('common:button:save')
|
||||
|
|
@ -153,6 +83,7 @@
|
|||
</div>
|
||||
</el-drawer>
|
||||
<feedBack v-if="$route.matched.length > 0" />
|
||||
<timeTag />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -163,11 +94,12 @@ import {
|
|||
} from '@/api/dictionary/dictionary'
|
||||
import { getTrialExtralConfig } from '@/api/trials'
|
||||
import feedBack from '@/views/trials/trials-layout/components/feedBack'
|
||||
import timeTag from '@/components/timeTag'
|
||||
import Vue from 'vue'
|
||||
import i18n from './lang'
|
||||
export default {
|
||||
name: 'App',
|
||||
components: { feedBack },
|
||||
components: { feedBack, timeTag },
|
||||
data() {
|
||||
return {
|
||||
drawer: false,
|
||||
|
|
@ -366,13 +298,16 @@ export default {
|
|||
|
||||
<style lang="scss">
|
||||
$light_gray: #606266;
|
||||
|
||||
.el-tooltip__popper {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.my_multiple {
|
||||
.el-input--medium .el-input__inner {
|
||||
height: 36px !important;
|
||||
}
|
||||
|
||||
.el-select__tags {
|
||||
flex-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
@ -381,6 +316,7 @@ $light_gray: #606266;
|
|||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none !important;
|
||||
|
|
@ -393,6 +329,7 @@ input[type='number'] {
|
|||
.viewer-fixed.viewer-container {
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
textarea {
|
||||
white-space: break-spaces;
|
||||
word-break: normal;
|
||||
|
|
@ -401,12 +338,15 @@ textarea {
|
|||
* {
|
||||
word-break: normal !important;
|
||||
}
|
||||
|
||||
.box-body .el-button.is-circle:not(.is-disabled) i:before {
|
||||
color: #428bca;
|
||||
}
|
||||
|
||||
.box-body .el-button.is-circle i.el-icon-question:before {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.system-title {
|
||||
font-size: 35px;
|
||||
color: $light_gray;
|
||||
|
|
@ -415,9 +355,11 @@ textarea {
|
|||
font-family: 'Times New Roman';
|
||||
text-shadow: 1px 0.5px 1.5px #666;
|
||||
}
|
||||
|
||||
.title-logo {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.title-logo {
|
||||
height: 40px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,115 @@
|
|||
<template>
|
||||
<div id="timeTag" :style="`color:${suggestionTextColor};background-color: inherit;`">{{ time }}</div>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
export default {
|
||||
name: "timeTag",
|
||||
data() {
|
||||
return {
|
||||
time: '',
|
||||
timer: null,
|
||||
suggestionTextColor: '#000'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getTime()
|
||||
},
|
||||
async mounted() {
|
||||
this.dragDoc()
|
||||
this.setColor()
|
||||
},
|
||||
methods: {
|
||||
getTime() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
this.timer = setInterval(async () => {
|
||||
this.time = moment(new Date()).format('YYYY-MM-DD HH:mm:ss Z z')
|
||||
}, 1000)
|
||||
},
|
||||
dragDoc() {
|
||||
const box = document.querySelector('#timeTag')
|
||||
const body = document.getElementsByTagName('body')[0]
|
||||
let maxLeft = body.offsetWidth - box.offsetWidth
|
||||
let maxTop = body.offsetHeight - box.offsetHeight - 30
|
||||
box.style.cssText += `left:${maxLeft}px;top:0px;`
|
||||
const sty = (function () {
|
||||
if (window.document.currentStyle) {
|
||||
return (dom, attr) => dom.currentStyle[attr]
|
||||
} else {
|
||||
return (dom, attr) => getComputedStyle(dom, false)[attr]
|
||||
}
|
||||
})()
|
||||
|
||||
box.onmousedown = (e) => {
|
||||
// 鼠标按下，计算当前元素距离可视区的距离
|
||||
const disX = e.clientX - box.offsetLeft
|
||||
const disY = e.clientY - box.offsetTop
|
||||
|
||||
// 获取到的值带px 正则匹配替换
|
||||
let styL = sty(box, 'left')
|
||||
let styT = sty(box, 'top')
|
||||
|
||||
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
|
||||
if (styL.includes('%')) {
|
||||
styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
|
||||
styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
|
||||
} else {
|
||||
styL = +styL.replace(/\px/g, '')
|
||||
styT = +styT.replace(/\px/g, '')
|
||||
}
|
||||
const oldMousemove = document.onmousemove
|
||||
|
||||
document.onmousemove = function (e) {
|
||||
oldMousemove(e)
|
||||
// 通过事件委托，计算移动的距离
|
||||
let left = e.clientX - disX
|
||||
let top = e.clientY - disY
|
||||
if (left < 0) {
|
||||
left = 0
|
||||
}
|
||||
if (left > maxLeft) {
|
||||
left = maxLeft
|
||||
}
|
||||
if (top < 0) {
|
||||
top = 0
|
||||
}
|
||||
if (top > maxTop) {
|
||||
top = maxTop
|
||||
}
|
||||
// 移动当前元素
|
||||
box.style.cssText += `;left:${left}px;top:${top}px;`
|
||||
}
|
||||
|
||||
document.onmouseup = function (e) {
|
||||
document.onmousemove = oldMousemove
|
||||
document.onmouseup = null
|
||||
}
|
||||
}
|
||||
},
|
||||
setColor() {
|
||||
this.suggestionTextColor = "#000"
|
||||
let pathList = ['/showvisitdicoms', '/showdicom', '/readingDicoms', '/petct', '/noneDicomReading']
|
||||
if (pathList.includes(window.location.pathname)) {
|
||||
this.suggestionTextColor = "#fff"
|
||||
}
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#timeTag {
|
||||
position: fixed;
|
||||
z-index: 99999;
|
||||
cursor: move;
|
||||
width: 220px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
/>
|
||||
<!-- 分组(EN) -->
|
||||
<el-table-column
|
||||
prop="QuestionGroupEnName"
|
||||
prop="QuestionGroupName"
|
||||
v-if="$i18n.locale === 'en'"
|
||||
:label="$t('trials:readingUnit:qsList:title:groupNameEn')"
|
||||
show-overflow-tooltip
|
||||
|
|
|
|||
Loading…
Reference in New Issue