更新datav

2023-12-04 14:04:50 +08:00 · 2023-12-04 14:04:50 +08:00 · 167ff82757
commit 167ff82757
parent 1d999e5b6f
5 changed files with 60 additions and 46 deletions
--- a/package.json
+++ b/package.json
@ -8,6 +8,7 @@
  },
  "dependencies": {
    "@dataview/datav-vue3": "^0.0.0-test.1672506674342",
+    "@iamzzg/data-view": "^2.10.0",
    "@jiaminghi/data-view": "^2.10.0",
    "@tweenjs/tween.js": "^19.0.0",
    "axios": "^1.3.2",
--- a/src/main.ts
+++ b/src/main.ts
@ -18,7 +18,7 @@ import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import echarts from '@/utils/echarts'
 import {createPinia} from 'pinia'
 // import DataV, { setClassNamePrefix } from '@dataview/datav-vue3';
-import dataV from '@jiaminghi/data-view'
+import dataV from "@iamzzg/data-view/dist/vue3/datav.map.vue.esm";
 import './registerServiceWorker'
 import router from './router'
 import i18n from './locales'
--- a/src/views/InPlantProducts/child/component/header1.vue
+++ b/src/views/InPlantProducts/child/component/header1.vue
@ -24,7 +24,7 @@
 </template>

 <script setup lang="ts">
-import { reactive, ref, watch } from "vue";
+import { reactive, ref, watch,onMounted } from "vue";
 import { useInPlantProductsStore } from "@/store/module/InPlantProducts";
 import { useRoute,useRouter } from "vue-router";
 import { useI18n } from 'vue-i18n'
@ -43,11 +43,9 @@ watch(
    
    //动态更新echarts
    if(newVal.devInfo.progress){
-      
-      
      config.value=JSON.parse(newVal.devInfo.progress)
    }
-    progress.value.updateRows(config)
+    progress.value.mergeConfig()
    
  },
  { deep: true, flush: "post" }
@ -55,11 +53,11 @@ watch(
 let comeBackFun=()=>{
  router.go(-1)
 }
-let config = {
+let config = reactive({
  value: 0,
  colors: ["#01c4f9", "#c135ff"],
  borderWidth: 3,
-}
+})
 </script>

 <style scoped>
--- a/src/views/InPlantProducts/content/chart/deviceslist.vue
+++ b/src/views/InPlantProducts/content/chart/deviceslist.vue
@ -58,7 +58,34 @@ let refborder2 = ref();

 const router = useRouter();

-const listdata = reactive<devListType>({});
+const listdata = reactive<devListType>({
+  header:[
+  t('messages.SerialNum'),
+  t('messages.RackNum'),
+  t('messages.productName'),
+  t('messages.ofLegion'),
+  t('messages.产品状态'),
+  t('messages.DebugProgress'),
+  t('messages.deliveryDay'),
+  ],
+  headerBGC: "#3469F3",
+  oddRowBGC: "#100C2A",
+  evenRowBGC: "#100C2A",
+  rowNum: 10,
+  waitTime: 3000,
+  carousel: "page",
+  hoverPause: true,
+  align: [
+    "center",
+    "center",
+    "center",
+    "center",
+    "center",
+    "center",
+    "center",
+  ],
+  columnWidth: [60, 130, 400, 100, 100],
+});
 let severdata = reactive([]); //暂存
 //弹窗显示与隐藏
 let visible = ref(false);
@ -72,6 +99,7 @@ const devlistSize = reactive({
 });

 const setData = (val: any) => {
+  
  let data = [];
  val.forEach((res) => {
    data.push([
@ -84,33 +112,7 @@ const setData = (val: any) => {
      res.deliveryDate,
    ]);
  });
-  listdata.header = [
-  t('messages.SerialNum'),
-  t('messages.RackNum'),
-  t('messages.productName'),
-  t('messages.ofLegion'),
-  t('messages.产品状态'),
-  t('messages.DebugProgress'),
-  t('messages.deliveryDay'),
-  ];
  listdata.data = data;
-  listdata.headerBGC = "#3469F3";
-  listdata.oddRowBGC = "#100C2A";
-  listdata.evenRowBGC = "#100C2A";
-  listdata.rowNum = 10;
-  listdata.waitTime = 3000;
-  listdata.carousel = "page";
-  listdata.hoverPause = true;
-  listdata.align = [
-    "center",
-    "center",
-    "center",
-    "center",
-    "center",
-    "center",
-    "center",
-  ];
-  listdata.columnWidth = [60, 130, 400, 100, 100];
  severdata = val;
  devList.value.updateRows(listdata.data, {
    headerBGC: "#00BAFF",
--- a/src/views/legionProducts/chart/scrollBoard.vue
+++ b/src/views/legionProducts/chart/scrollBoard.vue
@ -1,24 +1,24 @@
 <template>
    <div class="box">
-        <div class="box-title">{{t('messages.LegionDevList')}}</div>
+        <div class="box-title">{{ t('messages.LegionDevList') }}</div>
        <div class="box-body">
            <dv-scroll-board ref="devList" :config="prop.config" @mouseover="dvMouseover" @mouseend="dvmouseleave"
                @click="dvClick" :style="{
-                        width: '100%',
-                        height: '100%',
-                    }" />
-            <el-tooltip v-model:visible="visible" :content="tipcontent" placement="top" effect="light" trigger="click" popper-class="tooltip-class"
-                virtual-triggering :virtual-ref="triggerRef" />
+                    width: '100%',
+                    height: '100%',
+                }" />
+            <el-tooltip v-model:visible="visible" :content="tipcontent" placement="top" effect="light" trigger="click"
+                popper-class="tooltip-class" virtual-triggering :virtual-ref="triggerRef" />
        </div>
    </div>
 </template>

 <script setup lang='ts'>
-import { getCurrentInstance, onMounted, reactive, ref, defineProps } from "vue";
+import { getCurrentInstance, onMounted, reactive, ref, defineProps, watch } from "vue";
 import { devListType } from "@/type/InPlantProducts";
 import { useRouter } from "vue-router"
 import { useI18n } from 'vue-i18n'
-let {t} = useI18n();
+let { t } = useI18n();
 const prop = defineProps({
    config: Object,
    severdata: Array
@ -30,7 +30,7 @@ let tipcontent = ref(null)
 let visible = ref(false)
 //存储弹窗dom
 let triggerRef = ref(null)
-
+let devList = ref()
 /**
 * @函数功能: 鼠标移入组件方法
 * @param {*} value 
@ -38,13 +38,26 @@ let triggerRef = ref(null)
 * @函数备注: 
 */
 const dvMouseover = (value) => {
-    if (value.toElement && value.toElement.innerHTML&&value.toElement.className == 'ceil') {
+    if (value.toElement && value.toElement.innerHTML && value.toElement.className == 'ceil') {
        triggerRef.value = value.toElement
        tipcontent.value = value.toElement.innerText
        visible.value = true
    }

 };
+
+watch(() => prop.config, (newVal, oldVal) => {
+    devList.value.updateRows(newVal.data, {
+        header: [t('messages.SerialNum'), t('messages.productName'), t('messages.model'), t('messages.RackNum'), t('messages.type'), t('messages.InstallPhase'), t('messages.产品状态'), t('messages.AssemblyGroup'), t('messages.electronicGroup'), t('messages.inspector'), t('messages.deliveryDay')],
+        headerBGC: 'rgb(52, 105, 243)',
+        oddRowBGC: '#100c2a',
+        evenRowBGC: '#100c2a',
+        rowNum: 10,
+        columnWidth: [80, 170, 120, 120, 120, 120, 120, 120, 120, 100, 130],
+        align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center']
+    });
+}, { deep: true, flush: 'post' })
+
 /**
 * @函数功能:  鼠标移出组件方法
 * @出口参数: 
@ -59,7 +72,7 @@ const dvmouseleave = () => {
 const dvClick = (value) => {

    if (value.row) {
-        prop.severdata.forEach((res:any) => {
+        prop.severdata.forEach((res: any) => {
            if (res.index == value.row[0]) {
                router.push({
                    name: "devItem",
@ -108,7 +121,7 @@ const dvClick = (value) => {
 }
 </style>
 <style>
-.el-popper.tooltip-class{
+.el-popper.tooltip-class {
    color: #fff !important;
 }
 </style>