<!--
 * @FilePath: \wwwd:\code\screenFront\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, height: props.height }">
    <div>
      <h2>调试进度</h2>
    </div>
    <dv-percent-pond
      ref="progress"
      :config="config"
      :key="props.width"
      :style="{ width: '100%', height: '40%' }"
    />
    <!-- <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: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "100%",
  },
  title: {
    type: String,
    default: "title",
  },
  config: {
    type: Object,
    default: () => {
      return {
        value: 0,
        colors: ["#01c4f9", "#c135ff"],
        borderWidth: 3,
      };
    },
  }
});
let progress=ref()

let comeBackFun=()=>{
  router.go(-1)
}
</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>
