|
@@ -0,0 +1,203 @@
|
|
|
+<template>
|
|
|
+ <div id="centerLeft1ALL">
|
|
|
+ <div class="bg-color-black">
|
|
|
+ <div class="d-flex pt-2 pl-2">
|
|
|
+ <span>
|
|
|
+ <icon name="chart-bar" class="text-icon"></icon>
|
|
|
+ </span>
|
|
|
+ <span class="fs-xl text mx-2 mb-1 pl-3">工单完成情况统计</span>
|
|
|
+ </div>
|
|
|
+ <div class="d-flex jc-center columnperent">
|
|
|
+ <CenterLeft1ALLChart/>
|
|
|
+ </div>
|
|
|
+ <div class="d-flex circleperent">
|
|
|
+ <div class="item" v-for="item in rate" :key="item.id">
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
+ <CenterChart :id="item.id" :tips="item.tips" :colorObj="item.colorData"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import CenterLeft1ALLChart from '@/components/assemblyechart/centerLeft/centerLeft1ALLChart'
|
|
|
+import CenterChart from '@/components/assemblyechart/centerLeft/centerChartRate'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ titleItem:[],
|
|
|
+ config: {
|
|
|
+ data: [],
|
|
|
+ showValue: true
|
|
|
+ },
|
|
|
+ // 通过率和达标率的组件复用数据
|
|
|
+ rate: [
|
|
|
+ {
|
|
|
+ id: 'centerRate1',
|
|
|
+ tips: 50,
|
|
|
+ colorData: {
|
|
|
+ textStyle: '#31b4fb',
|
|
|
+ series: {
|
|
|
+ color: ['rgba(19,122,244,0.29)', 'transparent'],
|
|
|
+ dataColor: {
|
|
|
+ normal: '#137af4',
|
|
|
+ shadowColor: '#80e0f5'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'centerRate2',
|
|
|
+ tips: 60,
|
|
|
+ colorData: {
|
|
|
+ textStyle: '#43cfe9',
|
|
|
+ series: {
|
|
|
+ color: ['#00bcd44a', 'transparent'],
|
|
|
+ dataColor: {
|
|
|
+ normal: '#32C5E9',
|
|
|
+ shadowColor: '#9fe5f5'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'centerRate3',
|
|
|
+ tips: 60,
|
|
|
+ colorData: {
|
|
|
+ textStyle: '#6ad59c',
|
|
|
+ series: {
|
|
|
+ color: ['rgba(25,161,95,0.29)', 'transparent'],
|
|
|
+ dataColor: {
|
|
|
+ normal: '#00a11a',
|
|
|
+ shadowColor: '#6cda9c'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ intervalId :null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ CenterLeft1ALLChart,
|
|
|
+ CenterChart
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.changeTiming()
|
|
|
+ },
|
|
|
+ beforeDestroy () {
|
|
|
+ clearInterval(this.intervalId)
|
|
|
+ this.chart.dispose()
|
|
|
+ this.chart.clear()
|
|
|
+ this.chart=null
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeTiming() {
|
|
|
+ this.changeNumber();
|
|
|
+ this.intervalId = setInterval(() => {
|
|
|
+ this.changeNumber()
|
|
|
+ }, 20000)
|
|
|
+ },
|
|
|
+ async changeNumber() {
|
|
|
+ var caller2 = 'ZZ!MakeComRate';
|
|
|
+ if (sessionStorage.getItem('li_code') == '所有'){
|
|
|
+ caller2 = 'ZZ!MakeComRate!ALL';
|
|
|
+ }
|
|
|
+ //工单关闭率
|
|
|
+ await this.$http.get("kanban/datalist.action?caller="+caller2+"&_noc=1&page=1&pageSize=100",{
|
|
|
+ params: {
|
|
|
+ condition: "1=1",
|
|
|
+ }
|
|
|
+ }).then((result)=>{
|
|
|
+ let dataList = JSON.parse(result.data.data);
|
|
|
+ for (let index = 0; index < dataList.length; index++) {
|
|
|
+ const element = dataList[index];
|
|
|
+ this.rate[index].tips = element.rate;
|
|
|
+ this.rate[index].title = element.title;
|
|
|
+ }
|
|
|
+ },(result)=>{
|
|
|
+ console.error(result)
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+$box-height: 420px;
|
|
|
+$box-width: 500px;
|
|
|
+#centerLeft1ALL {
|
|
|
+ padding: 0px;
|
|
|
+ height: $box-height;
|
|
|
+ font-size: 50px;
|
|
|
+ width: $box-width;
|
|
|
+ border-radius: 10px;
|
|
|
+ .bg-color-black {
|
|
|
+ height: $box-height - 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .circleperent {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .item {
|
|
|
+ width: 33%;
|
|
|
+ height: 118px;
|
|
|
+ span {
|
|
|
+ margin-top: 15px;
|
|
|
+ font-size: 18px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .columnperent {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ color: #FFE900;
|
|
|
+ }
|
|
|
+ .dv-dec-3 {
|
|
|
+ position: relative;
|
|
|
+ width: 150px;
|
|
|
+ height: 20px;
|
|
|
+ top: -3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-data {
|
|
|
+ .item-box {
|
|
|
+ & > div {
|
|
|
+ padding-right: 5px;
|
|
|
+ }
|
|
|
+ font-size: 14px;
|
|
|
+ float: right;
|
|
|
+ position: relative;
|
|
|
+ width: 50%;
|
|
|
+ color: #d3d6dd;
|
|
|
+ .dv-digital-flop {
|
|
|
+ width: 120px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ // 金币
|
|
|
+ .coin {
|
|
|
+ position: relative;
|
|
|
+ top: 6px;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #ffc107;
|
|
|
+ }
|
|
|
+ .colorYellow {
|
|
|
+ color: yellowgreen;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|