添加悬浮时间

src/App.vue

@@ -1,12 +1,7 @@
 <template>
   <div id="app" style="position: relative">
     <router-view />
-    <div
+    <div v-show="show" v-if="$route.matched.length > 0" v-adaptive @click="openI18n" style="
-      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
+    <el-drawer :title="$t('il8n:title')" :visible.sync="drawer" direction="rtl" size="80%">
-      :title="$t('il8n:title')"
-      :visible.sync="drawer"
-      direction="rtl"
-      size="80%"
-    >
       <div style="width: 800px">
-        <el-form
+        <el-form label-width="100px" @submit.native.prevent size="small" :inline="true" class="demo-form-inline">
-          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
+            <el-select v-model="State" clearable filterable @change="handleStateChange">
-              v-model="State"
+              <el-option v-for="item of $d.InternationalizationKeyState"
-              clearable
+                :key="'InternationalizationKeyState' + item.value" :label="item.label" :value="item.value" />
-              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
+      <el-table :data="tableData" v-adaptive="{ bottomOffset: 50 }" height="100" style="width: 100%"
-        :data="tableData"
+        @sort-change="handleSortByColumn">
-        v-adaptive="{ bottomOffset: 50 }"
+        <el-table-column prop="Code" :label="$t('il8n:table:label')" width="300" show-overflow-tooltip
-        height="100"
+          sortable="custom">
-        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
+        <el-table-column prop="Value" :label="$t('il8n:table:en')" sortable="custom">
-          prop="Value"
-          :label="$t('il8n:table:en')"
-          sortable="custom"
-        >
           <template slot-scope="scope">
-            <el-input
+            <el-input v-model="scope.row.Value" @input="
-              v-model="scope.row.Value"
+              (e) => {
-              @input="
+                $set(scope.row, 'Value', e)
-                (e) => {
+              }
-                  $set(scope.row, 'Value', e)
+            " size="mini"></el-input>
-                }
-              "
-              size="mini"
-            ></el-input>
           </template>
         </el-table-column>
-        <el-table-column
+        <el-table-column prop="ValueCN" :label="$t('il8n:table:cn')" sortable="custom">
-          prop="ValueCN"
-          :label="$t('il8n:table:cn')"
-          sortable="custom"
-        >
           <template slot-scope="scope">
-            <el-input
+            <el-input v-model="scope.row.ValueCN" @input="
-              v-model="scope.row.ValueCN"
+              (e) => {
-              @input="
+                $set(scope.row, 'ValueCN', e)
-                (e) => {
+              }
-                  $set(scope.row, 'ValueCN', e)
+            " size="mini"></el-input>
-                }
-              "
-              size="mini"
-            ></el-input>
           </template>
         </el-table-column>
-        <el-table-column
+        <el-table-column prop="ValueCN" :label="$t('il8n:table:state')" sortable="custom">
-          prop="ValueCN"
-          :label="$t('il8n:table:state')"
-          sortable="custom"
-        >
           <template slot-scope="scope">
-            <el-select
+            <el-select v-model="scope.row.State" clearable filterable size="mini">
-              v-model="scope.row.State"
+              <el-option v-for="item of $d.InternationalizationKeyState"
-              clearable
+                :key="'InternationalizationKeyState' + item.value" :label="item.label" :value="item.value" />
-              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
+        <el-table-column prop="Version" :label="$t('il8n:table:Version')" sortable="custom">
-          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"
+        <el-button size="mini" @click="drawer = false">{{ $t('common:button:cancel') }}
-          >{{ $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;
 }

src/components/timeTag/index.vue

@@ -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>

src/views/trials/trials-panel/setting/reading-unit/components/QuestionsList.vue

@@ -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