Merge branch 'master' of http://gogs.renlianiot.com:4000/zmcoding/smart-tool-ui

src/views/dashboard/rladmin/components/DeviceDataChart.vue

@@ -2,7 +2,7 @@
     <normal-card 
         trigger="hover"
         shadow="always"
-        title="设备数据"
+        title="故障分析"
         showMenu
         :menuItems="menuItems"
         :bodyStyle="{height: '400px'}"
@@ -91,13 +91,13 @@ export default {
             return  {
                 color: this.pieColor,
                 title: {
-                    text: '设备数量',
+                    text: '故障情况',
                     textStyle: {
                         fontWeight: '600',
                         fontSize: '15',
                         color: '#000'
                     },
-                    subtext: '统计所有种类设备数量占比'
+                    subtext: '统计所有类型数量占比'
                 },
                 tooltip: {
                     trigger: 'item',
@@ -130,7 +130,7 @@ export default {
                 },
                 series: [
                     {
-                        name: '设备数量',
+                        name: '故障数量',
                         type: 'pie',
                         label: {            
                             // show: false,                
@@ -179,13 +179,13 @@ export default {
         getlineOptions() {
             return {
                 title: {
-                    text: '设备增长趋势',
+                    text: '故障统计',
                     textStyle: {
                         fontWeight: '600',
                         fontSize: '15',
                         color: '#000'
                     },
-                    subtext: '统计所有种类设备数量变化'
+                    subtext: '设备故障统计'
                 },
                 tooltip: {
                     trigger: 'axis',

src/views/dashboard/rladmin/components/DeviceUseChart.vue

@@ -0,0 +1,222 @@
+<template>
+    <normal-card 
+        trigger="hover"
+        shadow="always"
+        title="工具使用分析"
+        showMenu
+        :menuItems="menuItems"
+        :bodyStyle="{height: '400px'}"
+    >
+        <template v-slot:content>
+            <base-pie-chart
+                :options="pieOptions"
+                width="40%"
+            />
+
+            <base-line-chart
+                :options="lineOptions"
+                width="60%"
+            />
+        </template>
+    </normal-card>
+</template>
+
+<script>
+import NormalCard from '@/components/Card/NormalCard'
+import BasePieChart from '@/components/Charts/BasePieChart'
+import BaseLineChart from '@/components/Charts/BaseLineChart'
+
+export default {
+    components: {
+        NormalCard,
+        BasePieChart,
+        BaseLineChart,
+    },
+    props: {
+        countData: {
+            type: Object
+        },
+        total: {
+            type: Number
+        }
+    },
+    created() {
+        // 初始化用户设备饼图统计数据
+        this.initPieChart()
+        // 初始化用户设备折线图统计数据
+        this.initLineChart()
+    },
+    data() {
+        return {
+            // 用户设备状态数据
+            pieColor: [],
+            pieData: [],
+            pieOptions: {},
+            // 增长趋势数据
+            lineSeriesData: [],
+            lineLegendData: [],
+            lineX: [],
+            lineOptions: {},
+            menuItems: [
+                {
+                    name: '全屏',
+                    command: 'full',
+                    icon: 'full-screen',
+                }
+            ]
+        }
+    },
+    watch: {
+        countData: function(val) {
+            this.initPieChart()
+        }
+    },
+    methods: {
+        // 初始化饼图统计数据
+        initPieChart() {
+            this.pieData = [];
+            if (this.countData.device_type_data && this.countData.device_type_data.length) {
+                this.countData.device_type_data.forEach(item => {
+                    this.pieData.push({
+                        name: item.text,
+                        value: item.total,
+                    })
+                })
+            }
+            // 设置选项
+            this.pieOptions = this.getpieOptions()
+        }, 
+        // 饼图配置项
+        getpieOptions() {
+            return  {
+                color: this.pieColor,
+                title: {
+                    text: '工具使用统计',
+                    textStyle: {
+                        fontWeight: '600',
+                        fontSize: '15',
+                        color: '#000'
+                    },
+                    subtext: '统计一周内所有工具使用占比'
+                },
+                tooltip: {
+                    trigger: 'item',
+                    formatter: '{a} <br/>{b} : {c}（{d}%）'
+                },
+                legend: {
+                    type: 'scroll',
+                    icon: 'circle',
+                    bottom: '0',
+                    // orient: 'vertical',
+                    formatter: (name) => {
+                        var arr = this.pieData.filter(function(item){
+                            return name == item.name;
+                        });
+                        if(arr.length){
+                            return  arr[0].name + ' ' + arr[0].value;
+                        }                        
+                    }
+                },
+                graphic:{
+                    type: "text",
+                    left: "center",
+                    top: "center",
+                    style:{
+                        text: this.total,
+                        // fill: "#000",
+                        fontSize: 30,
+                        fontWeight: 700
+                    }
+                },
+                series: [
+                    {
+                        name: '使用次数',
+                        type: 'pie',
+                        label: {            
+                            // show: false,                
+                            formatter: '{b} : {c}（{d}%）',
+                            position: 'outer',
+                            alignTo: 'labelLine',
+                            bleedMargin: 5
+                        },
+                        radius: ['45%', '60%'], // 内外半径
+                        center: ['50%', '50%'],
+                        data: this.pieData,
+                        animationEasing: 'cubicInOut',
+                        animationDuration: 2600
+                    }
+                ]
+            }
+        },
+        // 初始化用户设备增长趋势数据
+        initLineChart() {
+            this.$http.get('total/getDeviceGrowthTrendData')
+            .then(resp => {
+                if (resp.code === 10000) {
+                    this.lineOptions = []
+                    this.lineX = []
+
+                    if (!resp.data || !resp.data.length) {
+                        return false;
+                    }
+                    this.lineX = Object.keys(resp.data[0].data)
+                    resp.data.forEach(item => {
+                        // 折线图配置
+                        this.lineSeriesData.push({
+                            name: item.name,
+                            data: Object.values(item.data),
+                            type: "line",
+                            // smooth: false, //是否平滑曲线显示
+                        })
+                        // 
+                        this.lineLegendData.push(item.name)
+                    })
+                    this.lineOptions = this.getlineOptions()
+                }
+            })
+        },
+        // 获取用户设备增长趋势配置项
+        getlineOptions() {
+            return {
+                title: {
+                    text: '工具使用统计',
+                    textStyle: {
+                        fontWeight: '600',
+                        fontSize: '15',
+                        color: '#000'
+                    },
+                    subtext: '工具使用次数趋势'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                },
+                legend: {
+                    show: false,
+                    data: this.lineLegendData,
+                },
+                xAxis: {
+                    type: "category",
+                    data: this.lineX,
+                    boundaryGap: false,
+                    axisTick: {
+                        show: false,
+                    }
+                },
+                yAxis: {
+                    type: "value",
+                    minInterval: 1,
+                    axisTick: {
+                        show: false,
+                    }
+                },
+                series: this.lineSeriesData
+            }
+        }
+    }
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/dashboard/rladmin/index.vue

@@ -19,10 +19,22 @@
               </div>
             </div>
         </el-col>
-        
         <el-col class="gutter-row item item4" :span="8">
             <div class="gutter-box">
-              <div class="gutter-box-title">设备统计</div>
+              <div class="gutter-box-title">风机统计</div>
+              <div class="count-to-box">
+                <span class="text">总数</span>
+                <span class="number" @click="redirectPage('departments')">
+                  <i class="el-icon-loading" v-if="showLoading"></i>
+                  <countTo v-else :startVal='startVal' :endVal='countData.department_count' :duration='duration'></countTo>
+                </span>
+                个
+              </div>
+            </div>
+        </el-col>
+        <el-col class="gutter-row item item4" :span="8">
+            <div class="gutter-box">
+              <div class="gutter-box-title">工具统计</div>
               <div class="count-to-box">
                 <span class="text">总数</span>
                 <el-popover
@@ -30,20 +42,16 @@
                   width="600"
                   trigger="hover">
                   <div>
-                    <device-table :tableData="countData.device_type_data" />
+                    <device-table :tableData="table_data" />
                   </div>
                   <span slot="reference" class="number">
                     <i class="el-icon-loading" v-if="showLoading"></i>
                     <countTo v-else :startVal='startVal' :endVal='countData.device_total_count' :duration='duration'></countTo>
                   </span>
                 </el-popover>
-                <!-- <span class="number" @click="redirectPage('school')">
-                  <i class="el-icon-loading" v-if="showLoading"></i>
-                  <countTo v-else :startVal='startVal' :endVal='countData.device_total_count' :duration='duration'></countTo>
-                </span> -->个
               </div>
               <div class="count-to-box">
-                <span class="text">在线数</span>
+                <span class="text">故障数</span>
                 <span class="number" @click="redirectPage('school')">
                   <i class="el-icon-loading" v-if="showLoading"></i>
                   <countTo v-else :startVal='startVal' :endVal='countData.device_online_count' :duration='duration'></countTo>
@@ -57,8 +65,13 @@
     </div>
 
     <div class="layout-2">
-
-      <!-- 用户设备数据 -->
+       <!-- 使用情况 -->
+      <el-row :gutter="16">
+        <el-col class="gutter-row item" :span="24">
+          <device-use-chart :countData="useCountData" :total="useCountData.device_total_count" />
+        </el-col>
+      </el-row>
+      <!-- 故障分析 -->
       <el-row :gutter="16">
         <el-col class="gutter-row item" :span="24">
           <device-data-chart :countData="countData" :total="countData.device_total_count" />
@@ -151,6 +164,7 @@ import countTo from 'vue-count-to'
 import NormalCard from '@/components/Card/NormalCard'
 import StationDataChart from './components/StationDataChart'
 import DeviceDataChart from './components/DeviceDataChart'
+import DeviceUseChart from './components/DeviceUseChart'
 import DeviceAlarmMessage from './components/DeviceAlarmMessage'
 import TotalAlarmGrowth from './components/TotalAlarmGrowth'
 import StationTable from './components/StationTable'
@@ -164,6 +178,7 @@ export default {
     NormalCard,
     StationDataChart,
     DeviceDataChart,
+    DeviceUseChart,
     TotalAlarmGrowth,
     DeviceAlarmMessage,
     StationTable,
@@ -185,7 +200,23 @@ export default {
       showLoading: true,
       // showAddLoading: true,
       startVal: 0,
+      useCountData:{
+        device_total_count:115,
+         device_type_data:[
+         {
+          'text': "液压泵",
+          'total': 40,
+
+         },
+          {
+          'text': "液压扳手",
+          'total': 75,
+ 
+         }
+       ]
+      },
       //维保记录规律统计
+<<<<<<< HEAD
        torque:{
          name:"扭矩",
          url:'',
@@ -196,6 +227,34 @@ export default {
        },
 
 //
+=======
+      Maintenance:{
+
+      },
+      table_data:[
+         {
+           'alarm': 62,
+          'online': 31,
+          'text': "液压泵",
+          'total': 40,
+          'value': "0",
+         },
+          {
+           'alarm': 80,
+          'online': 32,
+          'text': "液压扳手",
+          'total': 75,
+          'value': "0",
+         },
+         {
+           'alarm': 80,
+          'online': 32,
+          'text': "其他",
+          'total': 100,
+          'value': "0",
+         },
+       ],
+>>>>>>> 30c9f6aee676707746ad5265ca62f6ecba845c15
       countData: {
        department_count:24,
        device_online_count:31,
@@ -204,21 +263,21 @@ export default {
          {
            'alarm': 62,
           'online': 31,
-          'text': "液压泵",
+          'text': "液压油偏低",
           'total': 40,
           'value': "0",
          },
           {
            'alarm': 80,
           'online': 32,
-          'text': "法兰",
+          'text': "液压油偏高",
           'total': 75,
           'value': "0",
          },
          {
            'alarm': 80,
           'online': 32,
-          'text': "液压扳手",
+          'text': "液压扳手故障",
           'total': 100,
           'value': "0",
          },

src/views/wind/fan/index.vue

@@ -80,6 +80,7 @@
         fixed="left"
         width="55"
       ></el-table-column>
+      
       <el-table-column
         prop="wind_name"
         label="风场名称"