<!--
 * @FilePath: \gitscreenFront\src\views\InPlantProducts\child\component\header1.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-17 11:05:00
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div class="header1" :style="{ width: props.width + 'px', height: props.height + 'px' }">
    <div>
      <h2>{{t('messages.DebugProgress')}}</h2>
    </div>
    <dv-percent-pond
      ref="progress"
      :config="config"
      :style="{ width: props.width + 'px', height: props.height/10*4 + 'px' }"
    />
    <div class="comeBack" @click="comeBackFun">
      <i class="iconfont icon-back"></i>
     </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { useInPlantProductsStore } from "@/store/module/InPlantProducts";
import { useRoute,useRouter } from "vue-router";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const store = useInPlantProductsStore();
const router=useRouter()
let props = defineProps<{
  width: number;
  height: number;
  title: String;
}>();
let progress=ref()
watch(
  () => store.newPageData,
  (newVal, oldVal) => {
    
    //动态更新echarts
    if(newVal.devInfo.progress){
      
      
      config.value=JSON.parse(newVal.devInfo.progress)
    }
    progress.value.updateRows(config)
    
  },
  { deep: true, flush: "post" }
);
let comeBackFun=()=>{
  router.go(-1)
}
let config = {
  value: 0,
  colors: ["#01c4f9", "#c135ff"],
  borderWidth: 3,
}
</script>

<style scoped>
.header1 {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
h2 {
  color: #fff;
  font-size: 25px;
}
p {
  color: #fff;
  font-size: 20px;
}
.comeBack{
  position: absolute;
  /* width: 2rem;
  height: 2rem; */
  top: 2%;
  left: 3rem;
  font-size: 3rem;
  color: #fff;
}
.comeBack>i{
  font-size: 3rem;
}
</style>
