From 50e23bcf275f5e126af5eda85e6490d23e86e016 Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Thu, 25 Aug 2022 14:17:31 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AD=E5=BB=BA=E5=9B=9B=E5=B1=80(CIM+)?=
 =?UTF-8?q?=EF=BC=9A=E5=AE=8C=E6=88=90=E6=A8=A1=E5=9E=8B=E5=86=85=E5=AE=A1?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/jChart/bar/JBarChart.vue           | 154 ++++++++++++++++
 .../common/jChart/bar/JProgressChart.vue      | 139 +++++++++++++++
 .../common/jChart/line/JLineChart.vue         | 165 ++++++++++++++++++
 .../common/jChart/pie/JNestedRingChart.vue    | 108 ++++++++++++
 .../common/jChart/pie/JProblemChart.vue       | 123 +++++++++++++
 .../common/jChart/pie/JRingChart.vue          | 114 ++++++++++++
 src/views/projectAdmin/zjsj/cim/rightTop.vue  |  66 ++++++-
 7 files changed, 866 insertions(+), 3 deletions(-)
 create mode 100644 src/views/projectAdmin/common/jChart/bar/JBarChart.vue
 create mode 100644 src/views/projectAdmin/common/jChart/bar/JProgressChart.vue
 create mode 100644 src/views/projectAdmin/common/jChart/line/JLineChart.vue
 create mode 100644 src/views/projectAdmin/common/jChart/pie/JNestedRingChart.vue
 create mode 100644 src/views/projectAdmin/common/jChart/pie/JProblemChart.vue
 create mode 100644 src/views/projectAdmin/common/jChart/pie/JRingChart.vue

diff --git a/src/views/projectAdmin/common/jChart/bar/JBarChart.vue b/src/views/projectAdmin/common/jChart/bar/JBarChart.vue
new file mode 100644
index 00000000..c0ed47b6
--- /dev/null
+++ b/src/views/projectAdmin/common/jChart/bar/JBarChart.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="j-bar-chart" ref="jBarChart"></div>
+</template>
+
+<script>
+import echarts from 'echarts4'
+export default {
+  props: {
+    title: {
+      type: Object,
+      default: () => ({
+        text: ''
+      })
+    },
+    tooltip: {
+      type: Object,
+      default: () => ({ show: false })
+    },
+    grid: {
+      type: Array,
+      default: () => ['15%', '2%', '2%', '2%']
+    },
+    color: {
+      type: Array,
+      default: () => ['#5EC2D0', '#61D2B9', '#F67F51', '#7851F6']
+    },
+    xData: {
+      required: true,
+      type: Array,
+      default: () => []
+    },
+    yData: {
+      type: Array,
+      default: () => []
+    },
+    series: {
+      type: Array,
+      default: () => []
+    }
+  },
+  mounted() {
+    this.jBarChart = echarts.init(this.$refs.jBarChart)
+    this.createChart()
+  },
+  data() {
+    return { jBarChart: null }
+  },
+  watch:{
+    xData:{
+      handler(newVal,oldVal){
+         if(newVal != oldVal){
+          this.createChart();
+         }
+       },
+       deep:true,
+    },
+    yData:{
+      handler(newVal,oldVal){
+         if(newVal != oldVal){
+          this.createChart();
+         }
+       },
+       deep:true,
+    }
+  },
+  methods: {
+    createChart() {
+      const { title, tooltip, grid, color, xData, yData, series } = this
+      const configSeries = (series => {
+        if (series.length) {
+          return series.map(item => ({ data: item.data, type: 'bar', barWidth: 15 }))
+        } else {
+          return [{ data: yData, type: 'bar', barWidth: 15 }]
+        }
+      })(series)
+
+      const option = {
+        title: {
+          text: title.text,
+          right: 20,
+          textStyle: {
+            fontSize: '14px',
+            color: '#5EC2D0',
+            fontWeight: 'normal'
+          }
+        },
+        tooltip,
+        grid: {
+          top: grid[0],
+          right: grid[1],
+          bottom: grid[2],
+          left: grid[3],
+          containLabel: true
+        },
+        color,
+        xAxis: {
+          type: 'category',
+          data: xData,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              type: [5, 10]
+            }
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'value',
+          splitNumber: 4,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: [5, 10],
+              color: '#323D50'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              type: [5, 10]
+            }
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        series: configSeries
+      }
+      this.jBarChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style>
+.j-bar-chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/projectAdmin/common/jChart/bar/JProgressChart.vue b/src/views/projectAdmin/common/jChart/bar/JProgressChart.vue
new file mode 100644
index 00000000..43e188a1
--- /dev/null
+++ b/src/views/projectAdmin/common/jChart/bar/JProgressChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="j-progress-chart" ref="JProgressChart"></div>
+</template>
+
+<script>
+import echarts from 'echarts4'
+export default {
+  props: {
+    grid: {
+      type: Array,
+      default: () => ['10', '8%', '10', '10']
+    },
+    seriesData: {
+      required: true,
+      type: Array,
+      default: () => []
+    },
+    yData: {
+      required: true,
+      type: Array,
+      default: () => []
+    }
+  },
+  mounted() {
+    this.JProgressChart = echarts.init(this.$refs.JProgressChart)
+    this.createChart()
+  },
+  data() {
+    return { JProgressChart: null }
+  },
+  watch:{
+    seriesData:{
+      handler(newVal,oldVal){
+         if(newVal != oldVal){
+          this.createChart();
+         }
+       },
+       deep:true,
+    }
+  },
+  methods: {
+    createChart() {
+      const { grid, seriesData, yData } = this
+      const max = Math.max(...seriesData)
+      const maxData = seriesData.map(item => max)
+      const option = {
+        grid: {
+          top: grid[0],
+          right: grid[1],
+          bottom: grid[2],
+          left: grid[3],
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          axisLabel: {
+            formatter: () => ''
+          },
+          splitLine: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'category',
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          data: yData,
+          axisLabel: {
+            textStyle: {
+              fontSize: 12,
+              color: '#fff'
+            }
+          }
+        },
+        series: [
+          {
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 0, color: '#4A90E2' },
+                { offset: 1, color: '#4ADEE2' }
+              ]),
+              barBorderRadius: 3
+            },
+            label: {
+              show: true,
+              position: 'right',
+              color: 'white',
+              textStyle: {
+                fontSize: 15
+              }
+            },
+            data: seriesData,
+            barWidth: 13
+          },
+          {
+            type: 'bar',
+            itemStyle: {
+              color: 'rgba(255, 255, 255, 0.1)',
+              barBorderRadius: 3
+            },
+            // label: {
+            //   show: true,
+            //   position: 'right',
+            //   color: 'white',
+            //   textStyle: {
+            //     fontSize: 15
+            //   }
+            // },
+            barGap: '-100%',
+            barCategoryGap: '40%',
+            data: maxData,
+            barWidth: 13,
+            animation: false
+          }
+        ]
+      }
+      this.JProgressChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style>
+.j-progress-chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/projectAdmin/common/jChart/line/JLineChart.vue b/src/views/projectAdmin/common/jChart/line/JLineChart.vue
new file mode 100644
index 00000000..4762da1d
--- /dev/null
+++ b/src/views/projectAdmin/common/jChart/line/JLineChart.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="j-line-chart" ref="JLineChart"></div>
+</template>
+
+<script>
+import echarts from 'echarts4'
+export default {
+  props: {
+    title: {
+      type: Object,
+      default: () => ({ text: '' })
+    },
+    grid: {
+      type: Array,
+      default: () => ['12%', '2%', '6%', '1%']
+    },
+    color: {
+      type: Array,
+      default: () => ['#FAC915', '#ff6c7f', '#6ee4f0', '#F67F51', '#7851F6']
+    },
+    xData: {
+      required: true,
+      type: Array,
+      default: () => []
+    },
+    series: {
+      required: true,
+      type: Array,
+      default: () => [{}]
+    }
+  },
+  mounted() {
+    this.JLineChart = echarts.init(this.$refs.JLineChart)
+    this.createChart()
+  },
+  data() {
+    return { JLineChart: null }
+  },
+  watch: {
+    xData: {
+      handler(newVal, oldVal) {
+        if (newVal != oldVal) {
+          this.createChart()
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    series: {
+      handler(newVal, oldVal) {
+        if (newVal != oldVal) {
+          this.createChart()
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    createChart() {
+      const { title, grid, color, xData, series } = this
+
+      const fmtSeries = (series => {
+        return series.map(item => ({
+          name: item.name,
+          type: 'line',
+          smooth: true,
+          data: item.data,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: item.areaColor[0] },
+              { offset: 1, color: item.areaColor[1] }
+            ])
+          },
+          showSymbol: item.showSymbol,
+          itemStyle: {
+            emphasis: item.emphasis
+          }
+        }))
+      })(series)
+
+      const option = {
+        title: {
+          text: title.text,
+          right: 20,
+          textStyle: {
+            fontSize: '14px',
+            color: '#5EC2D0',
+            fontWeight: 'normal'
+          }
+        },
+        legend: {
+          left: 20,
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        grid: {
+          top: grid[0],
+          right: grid[1],
+          bottom: grid[2],
+          left: grid[3],
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        color,
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: xData,
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: 'rgba(255, 255, 255, .8)'
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              type: [5, 10],
+              color: '#364252'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: 'rgba(255, 255, 255, .8)'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              type: [5, 10],
+              color: '#787E8A'
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              type: [5, 10],
+              color: '#364252'
+            }
+          }
+        },
+        series: fmtSeries
+      }
+      this.JLineChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style>
+.j-line-chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/projectAdmin/common/jChart/pie/JNestedRingChart.vue b/src/views/projectAdmin/common/jChart/pie/JNestedRingChart.vue
new file mode 100644
index 00000000..103a9656
--- /dev/null
+++ b/src/views/projectAdmin/common/jChart/pie/JNestedRingChart.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="j-nested-ring-chart" ref="jNestedRingChart"></div>
+</template>
+
+<script>
+import echarts from 'echarts4'
+export default {
+  props: {
+    title: {
+      type: Object,
+      default: () => ({
+        text: '',
+        subTitle: '',
+        x: '48%',
+        y: '36%'
+      })
+    },
+    legend: {
+      type: Object,
+      default: () => ({})
+    },
+    series: {
+      required: true,
+      type: Array,
+      default: () => []
+    }
+  },
+  mounted() {
+    this.jNestedRingChart = echarts.init(this.$refs.jNestedRingChart)
+    this.createChart()
+  },
+  data() {
+    return {
+      jNestedRingChart: null
+    }
+  },
+  methods: {
+    createChart() {
+      const { title, legend, series } = this
+      const setSeries = (series => {
+        return series.map(item => ({
+          type: 'pie',
+          label: false,
+          center: ['50%', '50%'],
+          radius: item.radius || ['65%', '80%'],
+          roseType: item.roseType,
+          color: item.color,
+          data: item.data
+        }))
+      })(series)
+
+      const option = {
+        title: {
+          text: title.text,
+          subtext: title.subTitle,
+          x: title.x || '49%',
+          y: title.y || '40%',
+          show: true,
+          textAlign: 'center',
+          textStyle: {
+            fontSize: 20,
+            fontWeight: 'normal',
+            color: '#fff'
+          },
+          subtextStyle: {
+            fontSize: 16,
+            fontWeight: 'normal',
+            color: '#fff'
+          }
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          show: legend.show === false ? false : true,
+          type: 'scroll',
+          orient: 'vertical',
+          right: 50,
+          top: 'center',
+          itemWidth: 10,
+          itemHeight: 10,
+          selectedMode: false,
+          icon: 'circle',
+          textStyle: {
+            color: '#ffffff',
+            fontSize: 14
+          },
+          formatter: legend.formatter
+        },
+        series: setSeries
+      }
+      this.jNestedRingChart.setOption(option)
+    }
+  },
+  watch: {
+    series() {
+      this.createChart()
+    }
+  }
+}
+</script>
+
+<style>
+.j-nested-ring-chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/projectAdmin/common/jChart/pie/JProblemChart.vue b/src/views/projectAdmin/common/jChart/pie/JProblemChart.vue
new file mode 100644
index 00000000..0ac1a408
--- /dev/null
+++ b/src/views/projectAdmin/common/jChart/pie/JProblemChart.vue
@@ -0,0 +1,123 @@
+<template>
+  <!-- 质量问题 -->
+  <div class="myChart" ref="myChart" />
+</template>
+
+<script>
+import echarts from "echarts4";
+export default {
+  props: {
+    title: {
+      type: Object,
+      default: () => ({
+        text: "",
+        subTitle: "",
+        x: "48%",
+        y: "36%"
+      })
+    },
+    data: {
+      type: Array,
+      default: () => [{ value: 1, name: "" }]
+    },
+    color: {
+      type: Array,
+      default: () => ["#3cabfd", "#57ec72", "#f294c6", "#f43a8d", "#6ee4f0"]
+    }
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.initMyChart();
+  },
+  methods: {
+    initMyChart() {
+      const myChart = echarts.init(this.$refs.myChart);
+      const option = {
+        title: {
+          x: this.title.x || "29%",
+          y: this.title.y || "43%",
+          show: true,
+          text: this.title.text,
+          subtext: this.title.subTitle,
+          textAlign: "center",
+          textStyle: {
+            fontSize: 20,
+            fontWeight: "normal",
+            color: "#fff"
+          },
+          subtextStyle: {
+            fontSize: 16,
+            fontWeight: "normal",
+            color: "#fff"
+          }
+        },
+        tooltip: {
+          trigger: "item"
+        },
+        legend: {
+          type: "scroll",
+          orient: "vertical",
+          right: 50,
+          top: "center",
+          itemWidth: 10, // 设置宽度
+          itemHeight: 10, // 设置高度
+          selectedMode: true,
+          icon: "circle",
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 14
+          }
+        },
+        color: this.color,
+        series: [
+          {
+            type: "pie",
+            radius: ["30%", "25%"],
+            center: ["30%", "50%"],
+            labelLine: {
+              show: false
+            },
+            // x:'-20%',
+            color: ["#07162b", "#244e92", "#07162b", "#244e92"],
+            data: [{ value: 25 }, { value: 25 }, { value: 25 }, { value: 25 }]
+          },
+          {
+            type: "pie",
+            radius: ["50%", "65%"],
+            center: ["30%", "50%"],
+            avoidLabelOverlap: true,
+            label: {
+              show: false,
+              position: "center"
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: "20",
+                color: "#fff",
+                fontWeight: "bold"
+              },
+              scaleSize: 12
+            },
+            labelLine: {
+              show: false
+            },
+            data: this.data
+          }
+        ]
+      };
+
+      myChart.setOption(option);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.myChart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/projectAdmin/common/jChart/pie/JRingChart.vue b/src/views/projectAdmin/common/jChart/pie/JRingChart.vue
new file mode 100644
index 00000000..35432e35
--- /dev/null
+++ b/src/views/projectAdmin/common/jChart/pie/JRingChart.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="j-ring-chart" ref="jRingChart"></div>
+</template>
+
+<script>
+import echarts from 'echarts4'
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: () => [{ value: 1, name: '' }]
+    },
+    color: {
+      type: Array,
+      default: () => ['#5181F6', '#61D2B9', '#F67F51', '#7851F6']
+    },
+    title: {
+      type: Object,
+      default: () => ({
+        text: '',
+        subTitle: '',
+        x: '48%',
+        y: '36%'
+      })
+    },
+    radius: {
+      type: Array,
+      default: () => ['65%', '80%']
+    }
+  },
+  mounted() {
+    this.createRingChart()
+  },
+  watch:{
+    data:{
+      handler(newVal,oldVal){
+         if(newVal != oldVal){
+          this.createRingChart();
+         }
+       },
+       deep:true,
+       immediate:true,
+    },
+    title:{
+      handler(newVal,oldVal){
+         if(newVal != oldVal){
+          this.createRingChart();
+         }
+       },
+       deep:true,
+       immediate:true,
+    }
+  },
+  methods: {
+    createRingChart() {
+      const jRingChart = echarts.init(this.$refs.jRingChart)
+      const { title } = this
+      const option = {
+        color: this.color,
+        title: {
+          show: true,
+          text: title.text,
+          x: title.x || '48%',
+          y: title.y || '36%',
+          z: 5,
+          textAlign: 'center',
+          textStyle: {
+            color: 'rgba(255, 255, 255, 1)',
+            fontSize: 20
+          },
+          subtext: title.subTitle,
+          subtextStyle: {
+            color: 'rgba(255, 255, 255, 0.8)',
+            fontSize: 13
+          }
+        },
+        grid: {
+          right: 0
+        },
+        legend: {
+          show: false
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            radius: this.radius,
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            labelLine: {
+              show: false
+            },
+            data: this.data
+          }
+        ]
+      }
+
+      console.log(option, '草')
+      jRingChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style>
+.j-ring-chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/cim/rightTop.vue b/src/views/projectAdmin/zjsj/cim/rightTop.vue
index 81d33233..9ff8e77f 100644
--- a/src/views/projectAdmin/zjsj/cim/rightTop.vue
+++ b/src/views/projectAdmin/zjsj/cim/rightTop.vue
@@ -1,14 +1,74 @@
 <template>
   <Card title="模型内审">
-    模型内审
+    <div class="chart">
+      <JNestedRingChart :title="{ text: '33', subTitle: '问题总数' }" :series="series" :legend="{ show: false }" />
+    </div>
+    <div class="legend">
+      <div class="legend-item">未查看</div>
+      <div class="legend-item">未解决</div>
+      <div class="legend-item">已解决</div>
+    </div>
   </Card>
 </template>
 
 <script>
 import Card from '../components/Card.vue'
+import JNestedRingChart from '../../common/jChart/pie/JNestedRingChart.vue'
 export default {
-  components: { Card }
+  components: { Card, JNestedRingChart },
+  data() {
+    return {
+      series: [
+        {
+          roseType: 'area',
+          radius: ['58%', '52%'],
+          color: ['#0B1B35', '#4A8C9C'],
+          data: [30, 40, 30, 40]
+        },
+        {
+          radius: ['65%', '82%'],
+          color: ['#E86129', '#FFC303', '#6EE4F0'],
+          data: [
+            { value: 11, name: '未查看' },
+            { value: 11, name: '未解决' },
+            { value: 11, name: '已解决' }
+          ]
+        }
+      ]
+    }
+  }
 }
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.chart {
+  box-sizing: border-box;
+  padding-top: 20px;
+  height: 70%;
+}
+.legend {
+  margin-top: 30px;
+  display: flex;
+  justify-content: space-around;
+  .legend-item {
+    display: flex;
+    align-items: center;
+    &::before {
+      content: '';
+      margin-right: 8px;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+    &:nth-child(1)::before {
+      background-color: #e86129;
+    }
+    &:nth-child(2)::before {
+      background-color: #ffc303;
+    }
+    &:nth-child(3)::before {
+      background-color: #6ee4f0;
+    }
+  }
+}
+</style>