修改

src/views/screen/preview_v1.vue

@@ -65,7 +65,6 @@
               <baidu-map class="center-map" :center="center" :zoom="zoom" @ready="mapInit">
                 
                 <bml-marker-clusterer :averageCenter="true">
-                  <bm-marker v-for="(marker,index) of markers" :key="index" :position="{lng: marker.lng, lat: marker.lat}" :icon="{url: 'https://rlfd.oss-cn-hangzhou.aliyuncs.com/smart_tool/beng_16.png', size: {width: 16, height: 16}}"></bm-marker>
                   <bm-marker v-for="(marker,index) of windMarkers" :key="index+200" :position="{lng: marker.lng, lat: marker.lat}" :icon="{url: 'https://rlfd.oss-cn-hangzhou.aliyuncs.com/smart_tool/wind_32.png', size: {width: 32, height: 32}}"></bm-marker>
                 </bml-marker-clusterer>
               </baidu-map>
@@ -134,12 +133,9 @@ export default {
       this.map.setMapStyle({style:'dark'});
       map.enableScrollWheelZoom();
       
+
         for (let i = 0; i < 200; i++) {
           const position = {lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21}
-          this.markers.push(position)
-        }
-        for (let i = 0; i < 50; i++) {
-          const position = {lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21}
           this.windMarkers.push(position)
         }
       

src/views/wind/fan/detail.vue

@@ -1,392 +1,119 @@
 <template>
   <el-drawer
-    title="设备信息"
+    title="统计分析"
     :visible.sync="drawerVisible"
     :direction="direction"
     size="60%"
   >
-    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
-      <el-tab-pane label="液压泵信息" name="first">
-        <el-divider content-position="left">基础信息</el-divider>
-        <el-row>
-          <div style="margin-bottom: 30px; margin-left: 50px">
-            <el-col
-              :span="6"
-              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
-            >
-              <div class="detail-item">
-                <span>法兰编号：</span>
-                <span class="item">{{ data.number }}</span>
-              </div>
-              <div class="detail-item">
-                <pre style="display: inline">型    号：</pre>
-                <span class="item">{{ data.model }}</span>
-              </div>
-              <div class="detail-item">
-                <span>所属部门：</span>
-                <span class="item">{{ data.depart_name }}</span>
-              </div>
-            </el-col>
-            <el-col
-              :span="6"
-              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
-            >
-              <div class="detail-item">
-                <pre style="display: inline">名    称：</pre>
-                <span class="item">{{ data.name }}</span>
-              </div>
-              <div class="detail-item">
-                <span>使用状态：</span>
-                <span class="item">在用</span>
-              </div>
-              <div class="detail-item">
-                <pre style="display: inline">品    牌：</pre>
-                <span class="item">{{ data.brand }}</span>
-              </div>
-            </el-col>
-            <el-col
-              :span="6"
-              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
-            >
-              <div class="detail-item">
-                <pre style="display: inline">供 应 商：</pre>
-                <span class="item">{{ data.supplier }}</span>
-              </div>
-              <div class="detail-item">
-                <span>出厂日期：</span>
-                <span class="item">{{ data.out_date }}</span>
-              </div>
-              <div class="detail-item">
-                <pre style="display: inline">备    注：</pre>
-                <span class="item">{{ data.remark }}</span>
-              </div>
-            </el-col>
-            <el-col :span="6"></el-col>
-          </div>
-        </el-row>
-        <el-divider content-position="left">规格信息</el-divider>
-        <el-row>
-          <div style="margin-bottom: 30px; margin-left: 50px">
-            <el-col
-              :span="24"
-              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
-            >
-              <div class="detail-item">
-                <pre style="display: inline">压力范围（PSI）：</pre>
-                <span class="item">{{ data.pressure_range }}</span>
-              </div>
-            </el-col>
-          </div>
-        </el-row>
-      </el-tab-pane>
-      <el-tab-pane label="使用扳手" name="second">
-        <el-table
-          :data="AssemblyData"
-          style="width: 100%; margin-left: 20px"
-          :row-class-name="tableRowClassName"
-        >
-          <el-table-column prop="number" label="编号"> </el-table-column>
-          <el-table-column prop="name" label="名称"> </el-table-column>
-          <el-table-column prop="model" label="型号"> </el-table-column>
-        </el-table>
-      </el-tab-pane>
-      <el-tab-pane label="螺栓紧固方案" name="third">
-        <el-divider content-position="left"><span style="color:#1850ef">单同步</span></el-divider>
-        <el-table
-          :data="oneData"
-          style="width: 100%;margin-left: 20px"
-        >
-          <el-table-column prop="step" label="步骤">
-          </el-table-column>
-          <el-table-column prop="number" label="螺栓编号">
-          </el-table-column>
-          <el-table-column prop="preload" label="标准预紧力（N*m）"> </el-table-column>
-        </el-table>
-        <el-divider content-position="left"><span style="color:#1850ef">两同步</span></el-divider>
-        <el-table
-          :data="twoData"
-          style="width: 100%;margin-left: 20px"
-        >
-          <el-table-column prop="step" label="步骤">
-          </el-table-column>
-          <el-table-column prop="number" label="螺栓编号">
-          </el-table-column>
-          <el-table-column prop="preload" label="标准预紧力（N*m）"> </el-table-column>
-        </el-table>
-        <el-divider content-position="left"><span style="color:#1850ef">四同步</span></el-divider>
-        <el-table
-          :data="fourData"
-          style="width: 100%;margin-left: 20px"
-        >
-          <el-table-column prop="step" label="步骤">
-          </el-table-column>
-          <el-table-column prop="number" label="螺栓编号">
-          </el-table-column>
-          <el-table-column prop="preload" label="标准预紧力（N*m）"> </el-table-column>
-        </el-table>
-        <el-divider content-position="left"><span style="color:#1850ef">六同步</span></el-divider>
-        <el-table
-          :data="sixData"
-          style="width: 100%;margin-left: 20px"
-        >
-          <el-table-column prop="step" label="步骤">
-          </el-table-column>
-          <el-table-column prop="number" label="螺栓编号">
-          </el-table-column>
-          <el-table-column prop="preload" label="标准预紧力（N*m）"> </el-table-column>
-        </el-table>
-      </el-tab-pane>
-      <el-tab-pane label="实时维保信息" name="fourth">
-           <el-table
-          :data="nowData"
-          style="width: 100%;margin-left: 20px"
-        >
-          <el-table-column prop="number" label="螺栓编号">
-          </el-table-column>
-          <el-table-column prop="real_preload" label="实际预紧力（N*m）">
-          </el-table-column>
-          <el-table-column prop="stand_preload" label="标准预紧力（N*m）">
-          </el-table-column>
-          <el-table-column prop="end_time" label="预紧结束时间">
-          </el-table-column>
-          <el-table-column prop="beng_no" label="液压泵编号">
-          </el-table-column>
-          <el-table-column prop="banshou_no" label="液压扳手编号">
-          </el-table-column>
-          <el-table-column prop="ways" label="紧固方式">
-          </el-table-column>
-          <el-table-column prop="operator" label="操作员"> </el-table-column>
-        </el-table>
-      </el-tab-pane>
-      <el-tab-pane label="历史维保记录" name="five">
-           <el-table
-          :data="historyData"
-          style="width: 100%;margin-left: 20px"
-        >
-         <el-table-column prop="number" label="螺栓编号">
-          </el-table-column>
-          <el-table-column prop="real_preload" label="实际预紧力（N*m）">
-          </el-table-column>
-          <el-table-column prop="stand_preload" label="标准预紧力（N*m）">
-          </el-table-column>
-          <el-table-column prop="end_time" label="预紧结束时间">
-          </el-table-column>
-          <el-table-column prop="beng_no" label="液压泵编号">
-          </el-table-column>
-          <el-table-column prop="banshou_no" label="液压扳手编号">
-          </el-table-column>
-          <el-table-column prop="ways" label="紧固方式">
-          </el-table-column>
-          <el-table-column prop="operator" label="操作员"> </el-table-column>
-        </el-table>
-      </el-tab-pane>
-    </el-tabs>
+    <div class="app-container" style="padding:0px 20px;margin:0px">
+        <div class="head-search">
+            <div>
+                <label class="search_title">上报时间：</label>
+                <el-date-picker
+                    class="search-box"
+                    v-model="timepart"
+                    type="datetimerange"
+                    align="right"
+                    value-format="yyyy-MM-dd HH:mm:ss"
+                    unlink-panels
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="截止日期"
+                    :picker-options="pickerOptions"
+                    @change="refresh"
+                    :clearable="false"
+                ></el-date-picker>
+                
+                <el-button class="search-box" type="info" @click="refresh">筛选</el-button>
+                <!-- <el-button type="defaul" @click="clearFilter">重置</el-button> -->
+            </div>
+        </div>
+        <el-divider content-position="left">塔基</el-divider>
+        <base-line-chart  ref="angleChart" height="400px" :options="options" />
+        <el-divider content-position="left">第一层塔筒</el-divider>
+        <base-line-chart  ref="angleChart" height="400px" :options="options" />
+        <el-divider content-position="left">第二层塔筒</el-divider>
+        <base-line-chart  ref="angleChart" height="400px" :options="options" />
+        <el-divider content-position="left">第三层塔筒</el-divider>
+        <base-line-chart  ref="angleChart" height="400px" :options="options" />
+        <el-divider content-position="left">第四层塔筒</el-divider>
+        <base-line-chart  ref="angleChart" height="400px" :options="options" />
+        
+     </div>
+
   </el-drawer>
 </template>
 <script>
+import BaseLineChart from '@/components/Charts/BaseLineChart';
 export default {
+  components: { BaseLineChart },
   props: ["detailVisible", "data"],
   data() {
     return {
       drawer: false,
       direction: "rtl",
       activeName: "first",
-      AssemblyData: [
-        {
-          model: "v23300",
-          name: "测试工具1",
-          number: "2022030301",
-        },
-        {
-          model: "v23301",
-          name: "测试工具2",
-          number: "2022030302",
-        },
-        {
-          model: "v23302",
-          name: "测试工具3",
-          number: "2022030303",
-        },
-        {
-          model: "v23303",
-          name: "测试工具4",
-          number: "2022030304",
-        },
-      ],
-       oneData: [
-        {
-          step: 1,
-          preload: "2120",
-          number: "01",
-        },
-        {
-          step: 2,
-          preload: "2126",
-          number: "02",
-        }
-      ],
-      twoData: [
-        {
-          step: 1,
-          preload: "2128",
-          number: "03",
-        },
-        {
-          step: 2,
-          preload: "2100",
-          number: "04",
-        }
-      ],
-       fourData: [
-        {
-          step: 1,
-          preload: "2128",
-          number: "05",
-        },
-        {
-          step: 2,
-          preload: "2100",
-          number: "06",
-        }
-      ],
-       sixData: [
-        {
-          step: 1,
-          preload: "2128",
-          number: "07",
-        },
-        {
-          step: 2,
-          preload: "2100",
-          number: "08",
-        }
-      ],
-       nowData: [
-        {
-          number: '09',
-          real_preload: "2128",
-          stand_preload: "3000",
-          end_time:'2022-03-02 15:31:54',
-          beng_no:'200001',
-          banshou_no:'300001',
-          ways:'单同步',
-          operator:'张速'
-        },
-        {
-          number: 10,
-          real_preload: "2129",
-          stand_preload: "3001",
-          end_time:'2022-03-02 16:31:44',
-          beng_no:'200002',
-          banshou_no:'300002',
-          ways:'两同步',
-          operator:'张速'
-        },
-         {
-          number: 11,
-          real_preload: "2139",
-          stand_preload: "3002",
-          end_time:'2022-03-02 16:31:44',
-          beng_no:'200002',
-          banshou_no:'300002',
-          ways:'四同步',
-          operator:'张速'
-        },
-         {
-          number: 12,
-          real_preload: "2129",
-          stand_preload: "3003",
-          end_time:'2022-03-02 16:31:44',
-          beng_no:'200002',
-          banshou_no:'300002',
-          ways:'六同步',
-          operator:'张速'
-        }
-      ],
-       historyData: [
-        {
-          number: 13,
-          real_preload: "2128",
-          stand_preload: "3005",
-          end_time:'2022-03-02 15:31:54',
-          beng_no:'200001',
-          banshou_no:'300001',
-          ways:'单同步',
-          operator:'张速'
-        },
-        {
-          number: 14,
-          real_preload: "2129",
-          stand_preload: "3006",
-          end_time:'2022-03-02 16:31:44',
-          beng_no:'200002',
-          banshou_no:'300002',
-          ways:'两同步',
-          operator:'张速'
-        },
-         {
-          number: 15,
-          real_preload: "2139",
-          stand_preload: "3007",
-          end_time:'2022-03-02 16:31:44',
-          beng_no:'200002',
-          banshou_no:'300002',
-          ways:'四同步',
-          operator:'张速'
-        },
-         {
-          number: 16,
-          real_preload: "2129",
-          stand_preload: "3008",
-          end_time:'2022-03-02 16:31:44',
-          beng_no:'200002',
-          banshou_no:'300002',
-          ways:'六同步',
-          operator:'张速'
-        },
-         {
-          number: 17,
-          real_preload: "2128",
-          stand_preload: "3009",
-          end_time:'2022-03-02 15:31:54',
-          beng_no:'200001',
-          banshou_no:'300001',
-          ways:'单同步',
-          operator:'张速'
-        },
-        {
-          number: 18,
-          real_preload: "2129",
-          stand_preload: "3010",
-          end_time:'2022-03-02 16:31:44',
-          beng_no:'200002',
-          banshou_no:'300002',
-          ways:'两同步',
-          operator:'张速'
-        },
-         {
-          number: 19,
-          real_preload: "2139",
-          stand_preload: "3012",
-          end_time:'2022-03-02 16:31:44',
-          beng_no:'200002',
-          banshou_no:'300002',
-          ways:'四同步',
-          operator:'张速'
-        },
-         {
-          number: 20,
-          real_preload: "2129",
-          stand_preload: "3013",
-          end_time:'2022-03-02 16:31:44',
-          beng_no:'200002',
-          banshou_no:'300002',
-          ways:'六同步',
-          operator:'张速'
-        }
-      ],
+      options: {},
+      xData: [],
+      chartData: [], // 扭矩数据
+      pressData: [], // 压力数据
+      openValue: 25,    // 
+      recoverValue: 8, // 
+      timepart: null,
+            pickerOptions: {
+                shortcuts: [{
+                    text: '昨天',
+                    onClick(picker) {
+                      const end = new Date(new Date().toLocaleDateString());
+                      const start = new Date(new Date().toLocaleDateString());
+                      start.setTime(start.getTime() - 3600 * 1000 * 24);
+                      picker.$emit('pick', [start, end]);
+                    }
+                },{
+                    text: '今天',
+                    onClick(picker) {
+                      const end = new Date(new Date().toLocaleDateString());
+                      const start = new Date(new Date().toLocaleDateString());
+                      end.setTime(start.getTime() + 3600 * 1000 * 24);
+                      picker.$emit('pick', [start, end]);
+                    }
+                },{
+                    text: '最近一周',
+                    onClick(picker) {
+                      const end = new Date();
+                      const start = new Date(new Date().toLocaleDateString());
+                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+                      picker.$emit('pick', [start, end]);
+                    }
+                }, {
+                    text: '最近一个月',
+                    onClick(picker) {
+                      const end = new Date();
+                      const start = new Date(new Date().toLocaleDateString());
+                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+                      picker.$emit('pick', [start, end]);
+                    }
+                }, {
+                    text: '最近三个月',
+                    onClick(picker) {
+                      const end = new Date();
+                      const start = new Date(new Date().toLocaleDateString());
+                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+                      picker.$emit('pick', [start, end]);
+                    }
+                }]
+            },
     };
   },
+  created() {
+        // 初始查询日期
+        var start = new Date(new Date().toLocaleDateString());
+        var end = new Date(new Date().toLocaleDateString());
+        start.setTime(end.getTime() - 3600 * 1000 * 24 * 30);
+        this.timepart = [start, end]
+        // 获取配置
+        // this.getDeviceInfo()
+  },
   methods: {
     handleClick(tab, event) {
       console.log(tab, event);
@@ -399,6 +126,121 @@ export default {
       }
       return "";
     },
+        /**
+         * 初始化数据
+         */
+        initData() {
+            this.options = {}
+            this.xData = []
+            this.pressData = []
+            this.chartData = []
+            let data=[
+              {"pressure":30,"torque":29,"time":"2022-04-23 00:28:50"},
+              {"pressure":15,"torque":20,"time":"2022-04-24 00:28:50"},
+              {"pressure":19,"torque":14,"time":"2022-04-25 00:28:50"},
+              {"pressure":30,"torque":35,"time":"2022-04-26 00:28:50"},
+              {"pressure":22,"torque":29,"time":"2022-04-27 00:28:50"},
+              {"pressure":25,"torque":24,"time":"2022-04-28 00:28:50"},
+              {"pressure":30,"torque":13,"time":"2022-04-29 00:28:50"},
+              {"pressure":12,"torque":18,"time":"2022-04-30 00:28:50"},
+              {"pressure":30,"torque":31,"time":"2022-05-01 00:28:50"},
+              {"pressure":30,"torque":22,"time":"2022-05-02 00:28:50"},
+              {"pressure":11,"torque":23,"time":"2022-05-03 00:28:50"},
+              {"pressure":30,"torque":24,"time":"2022-05-04 00:28:50"},
+              {"pressure":30,"torque":29,"time":"2022-05-05 00:28:50"},
+              {"pressure":24,"torque":29,"time":"2022-05-06 00:28:50"},
+              {"pressure":30,"torque":26,"time":"2022-05-07 00:28:50"},
+              {"pressure":24,"torque":11,"time":"2022-05-08 00:28:50"},
+              {"pressure":7,"torque":29,"time":"2022-05-09 00:28:50"},
+              {"pressure":11,"torque":9,"time":"2022-05-10 00:28:50"},
+              {"pressure":17,"torque":12,"time":"2022-05-11 00:28:50"},
+            
+            ]
+            data.forEach(item => {
+                this.xData.push(item.time)
+                this.pressData.push(item.pressure)
+                this.chartData.push(item.torque)
+                  
+            })
+            this.getOptions()
+        },
+        /**
+         * 刷新
+         */
+        refresh(){
+            this.getData(this.assetNo)
+            this.getDeviceInfo()
+        },
+        /**
+         * 图表配置
+         */
+        getOptions() {
+            var itemStyle = {
+                        opacity: 0.8,
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowOffsetY: 0,
+                        shadowColor: 'rgba(0,0,0,0.3)'
+                    };
+            this.options = {
+                color: ['#80F1BE', '#dd4444'],
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross'
+                    }
+                },
+                xAxis: {
+                    type: "category",
+                    data: this.xData
+                },
+                yAxis: {},
+                dataZoom: [{
+                    startValue: this.xData[0]
+                }, {
+                    type: 'inside'
+                }],
+                visualMap: {
+                    show: false,
+                    min: 0,
+                    max: 180,
+                    inRange: {
+                        // symbolSize: [10, 20]
+                    }
+                },
+                series: [{
+                    name: '扭矩',
+                    type: 'scatter',
+                    symbolSize: 10,
+                    itemStyle: itemStyle,
+                    markLine: {
+                        silent: true,
+                        lineStyle: {
+                            color: '#0f0'
+                        },
+                        data: [{
+                            yAxis: 20,
+                        }]
+                    },
+                    data: this.chartData,
+                },{
+                    name: '压力',
+                    type: 'scatter',
+                    symbolSize: 15,
+                    itemStyle: itemStyle,
+                    markLine: {
+                        silent: true,
+                        lineStyle: {
+                            color: '#c00'
+                        },
+                        data: [{
+                            yAxis: this.openValue
+                        }]
+                    },
+                    data: this.pressData,
+                }]
+            }
+      }
   },
   computed: {
     drawerVisible: {
@@ -406,6 +248,9 @@ export default {
         this.$emit("sendVal", val); // 表示将子组件改变的值传递给父组件
       },
       get() {
+        if(this.detailVisible){
+           this.initData()
+        }
         return this.detailVisible; // 表示获取父组件的值
       },
     },
@@ -413,6 +258,9 @@ export default {
 };
 </script>
 <style scoped>
+::v-deep .el-drawer{
+  overflow: scroll !important;
+}
 .detail-item {
   width: 100%;
   padding: 15px 0px;
@@ -430,4 +278,8 @@ export default {
 .el-table .success-row {
   background: #f0f9eb !important;
 }
+.search_title {
+  font-size: 12px;
+  color: #6a6a6a;
+}
 </style>

src/views/wind/fan/index.vue

@@ -121,10 +121,11 @@
         min-width="120"
         align="center"
         fixed="right"
-         width="150"
+         width="180"
       >
         <template slot-scope="record">
             <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleUpdate(record.row)" ></el-button>
+            <el-button type="primary" size="mini" icon="el-icon-data-line" @click="handleDetail(record.row)" ></el-button>
             <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(record.row.id)" />
         </template>
       </el-table-column>
@@ -360,6 +361,13 @@ export default {
       })
       
     },
+        handleDetail(row){
+      this.detailVisible = true,
+      this.detail = row
+    },
+    closeDrawer(){
+      this.detailVisible = false
+    },
     handleChange(val) {
       //  console.log(val)
       this.queryParam.department_id = val;

src/views/wind/wind/form/AddEditWind.vue

@@ -175,12 +175,13 @@ export default {
         }).catch(() => {});
     },
     submitForm() {
+      console.log(this.defaultCheckedKeys)
       // 检测
       this.$refs[this.formName].validate((valid) => {
         if (!valid) {
           return false;
         }
-        if(this.defaultCheckedKeys){
+        if(!this.defaultCheckedKeys){
           this.$message.error("请选择地区");
           return false;
         }