首页提交

src/module/databoard/components/chart/ring-pie-chart.vue

+<template>
+  <div ref="chart" style="width: 100%;height: 50%;" @click=""/>
+</template>
+<script>
+import * as echarts from "_echarts@5.4.3@echarts";
+
+export default {
+  name:"RingPieChart",
+  data() {
+    return {
+      option:{
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: true,
+              // position: 'center',
+              fontSize: 12,
+              color: '#5eeef4',
+              formatter(param) {
+                return param.name + '\r\n' + param.value
+              }
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 12,
+                fontWeight: 'bold',
+                color: '#5eeef4',
+              }
+            },
+            data: this.data
+          }
+        ]
+      },
+      chart: null,
+    }
+  },
+  watch: {
+      data(newValue, oldValue){
+          this.option.data = newValue;
+          this.chart.setOption(this.option);
+      }
+  },
+  methods: {
+    resizeChart() {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      let chartDom = this.$refs.chart;
+      this.chart = echarts.init(chartDom);
+      this.chart.setOption(this.option);
+      window.addEventListener('resize', this.resizeChart);
+    }, 500)
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.resizeChart);
+  },
+  props:{
+    name: {
+      type: String,
+      default: "环形饼图",
+    },
+    data: {
+      type: Array,
+      default: function () {
+        return [
+          {value: 500, name: '值1'},
+          {value: 2500, name: '值3'},
+          {value: 1100, name: '值2'},
+        ];
+      },
+    }
+  }
+
+}
+</script>
+<style scoped>
+</style>

src/module/databoard/components/layout/num-with-r-b-mark.vue

-<template>
-  <div>
-    <div class="c_num">
-      <b>
-        <slot name="num"></slot>
-      </b>
-      <span class="c_unit">
-        <slot name="unit"></slot>
-      </span>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name:"NumWithRBMark",
-  data() {
-    return {
-    };
-  },
-
-  methods: {}
-};
-</script>
-<style scoped>
-
-.c_fl{
-  float: left;
-}
-
-.c_num{
-  position: relative;
-  font-size: 32px;
-  line-height: 46px;
-  text-align: center;
-  height: 100%;
-  width: 100%;
-}
-.c_unit{
-  position: absolute;
-  right: 0px;
-  bottom: 0px;
-  font-size: 16px;
-  line-height: 16px;
-  font-weight: normal;
-  text-align: center;
-  float: right;
-  width: 2em;
-}
-</style>

src/module/databoard/components/layout/title-content-mark.vue

+<template>
+  <div class="bd" :class="{'center-bd': isCenter}">
+    <div class="title" v-if="title" :class="{'center-title': isCenter}" :style="{'--titleHeight': titleHeight}">
+      {{title}}
+    </div>
+    <div class="content" :style="{'--titleHeight': titleHeight}">
+      <b v-if="isBold" :style="contentStyle">
+        {{content}}
+      </b>
+      <b v-if="!isBold" style="font-weight: normal" :style="contentStyle">
+        {{content}}
+      </b>
+      <span class="mark" :style="{'--markWidth': mark.length},markStyle">
+        {{mark}}
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name:"TitleContentMark",
+  data() {
+    return {
+    };
+  },
+  props:{
+    title: {
+      type: String,
+      default: "",
+    },
+    mark: {
+      type: String,
+      default: "",
+    },
+    content: {
+      type: String,
+      default: "",
+    },
+    titleHeight: {
+      type: String,
+      default: "20%",
+    },
+    isCenter: {
+      type: Boolean,
+    },
+    isBold:{
+      type: Boolean,
+    },
+    contentStyle:{
+      type: [String,Object],
+    },
+    markStyle:{
+      type: [String,Object],
+    }
+  },
+  methods: {},
+  computed:{
+  }
+};
+</script>
+<style scoped>
+:root{
+  --markWidth: 2em;
+  --titleHeight: 20%;
+}
+
+.bold{
+  font-weight: bold;
+}
+
+.bd{
+  height: 100%;
+  padding: 0 0 2% 0%;
+}
+
+.center-bd{
+  padding: 0 10% 6% 10%;
+}
+
+.title{
+  color: white;
+  height: var(--titleHeight);
+  margin-left: 10%;
+  line-height: 30px;
+}
+
+.center-title{
+  margin: 0;
+  display: block;
+  text-align: center;
+  width: 100%;
+}
+
+.content{
+  display: flex;
+  align-items: center;
+  position: relative;
+  font-size: 30px;
+  text-align: center;
+  height: calc(100% - var(--titleHeight));
+  width: 100%;
+}
+
+
+.content > b{
+  //margin-left: 12%;
+  width: 100%;
+}
+
+.mark{
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: normal;
+  text-align: center;
+  float: right;
+  width: var(--markWidth);
+}
+</style>

src/module/databoard/components/table/table-column.vue

+<template>
+  <table>
+    <thead v-if="showHead">
+    <tr><th>{{title}}&nbsp;</th></tr>
+    </thead>
+    <tbody>
+    <tr v-for="row in data"><td :style="eval(cellStyleJs,row[name])">{{row[name]}}</td></tr>
+    </tbody>
+  </table>
+</template>
+<script>
+export default {
+  name:"TableColumn",
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    eval(str,data){
+      let res;
+      if (str){
+        res = eval(str);
+      }else if (this.cellStyleFunction) {
+        res = this.cellStyleFunction(data);
+      }
+      return res;
+    }
+  },
+  props:{
+    name: {
+      type: String,
+      default: "",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    showHead: {
+      type: Boolean,
+    },
+    data: {
+      type: Array,
+    },
+    cellStyleJs: {
+      type: String,
+    },
+    cellStyleFunction:{
+      type: Function
+    },
+  }
+
+}
+</script>
+<style scoped>
+table{
+  color: white;
+}
+th{
+  color: white;
+  font-size: 12px;
+  font-weight: normal;
+}
+table,th,td,tr,thead{
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+tr{
+  width: 100%;
+}
+
+
+</style>

src/module/databoard/index_back1.vue

@@ -217,7 +217,7 @@ import InfoCard from "./components/card/info-card.vue";
 import ContrastCard from "./components/card/contrast-card.vue";
 import * as echarts from "echarts";
 import TitleContent from "./components/container/title-content.vue";
-import NumWithRBMark from "./components/layout/num-with-r-b-mark.vue";
+import NumWithRBMark from "./components/layout/title-content-mark.vue";
 import Card from "./components/card/card.vue";
 import ContainerWithBord from "./components/container/container-with-bord.vue";
 export default {