修改下拉框样式和布局样式

src/components/belt_diagnosis/belt_benti/index.vue

@@ -79,16 +79,7 @@ export default {
 
 <style scoped lang="less">
 .title {
-//     border-bottom: #5ddcf8 1px solid;
-//     height: 40px;
-//     width: 100%;
-//     font-size: 22px;
-//     line-height: 2;
-//     padding: 5px;
-//     font-weight: 500;
-//     color: #4adefe;
-//     margin-left: 20px;
-  color: #fff;
+  color: #4adefe;
   font-size: 20px;
   font-weight: bolder;
   text-align: center;

src/components/belt_diagnosis/belt_protect/index.vue

@@ -109,11 +109,12 @@ export default {
 </script>
 <style scoped lang="less">
 .title {
-  color: #fff;
+  color: #4adefe;
   font-size: 20px;
   font-weight: bolder;
   text-align: center;
-  margin: 10px;
+  margin-top: 10px;
+
 }
 .contour {
   display: flex;

src/components/belt_diagnosis/bianpin/index.vue

@@ -87,11 +87,13 @@ export default {
     // font-weight: 500;
     // color: #4adefe;
     // margin-left: 20px;
-      color: #fff;
+    
+  color: #4adefe;
   font-size: 20px;
   font-weight: bolder;
   text-align: center;
   margin-top: 10px;
+
 }
 .flex-ul {
   display: flex;

src/components/belt_diagnosis/dajie_equipment_status/index.vue

@@ -104,7 +104,7 @@ export default {
 
 <style scoped lang="less">
 .title {
-  color: #fff;
+  color: #4adefe;
   font-size: 20px;
   font-weight: bolder;
   text-align: center;

src/components/belt_diagnosis/dajie_equipment_status1/index.vue

@@ -103,7 +103,7 @@ export default {
   
   <style scoped lang="less">
 .title {
-  color: #fff;
+  color: #4adefe;
   font-size: 20px;
   font-weight: bolder;
   text-align: center;

src/components/belt_diagnosis/dianji1/index.vue

@@ -113,7 +113,7 @@ export default {
 
 <style scoped lang="less">
 .title {
-  color: #fff;
+  color: #4adefe;
   font-size: 20px;
   font-weight: bolder;
   text-align: center;

src/components/belt_diagnosis/dianji2/index.vue

@@ -113,7 +113,7 @@ export default {
 
 <style scoped lang="less">
 .title {
-  color: #fff;
+  color: #4adefe;
   font-size: 20px;
   font-weight: bolder;
   text-align: center;

src/components/belt_diagnosis/equipment_status/index.vue

@@ -87,10 +87,10 @@ export default {
 </script>
 <style scoped>
 .title {
-  color: #fff;
+  color: #4adefe;
   font-size: 20px;
   font-weight: bolder;
-   text-align: center;
+  text-align: center;
   margin-top: 10px;
 }
 .describe {

src/components/belt_diagnosis/failure_hand/index.vue

@@ -37,16 +37,16 @@
 
 <style scoped lang="less">
 .title {
-  color: #fff;
+  color: #4adefe;
   font-size: 20px;
   font-weight: bolder;
   text-align: center;
-  margin-top: 5px;
+  margin-top: 10px;
 }
 .title1 {
   color:#4adefe;
   font-size: 18px;
-  font-weight: bolder;
+  // font-weight: bolder;
   text-align: center;
   margin-top: -26px;
 }

src/components/belt_diagnosis/failure_pre/albox.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="class1">
+  <div class="select-veido">
 
-  <el-select v-model="value"  placeholder="请选择算法">
+  <el-select v-model="value"  placeholder="请选择算法" @change="change">
     <el-option 
-        class="class2"
         v-for="item in options"
         :key="item.value"
         :label="item.label"
         :value="item.value">
     </el-option>
   </el-select>
+ 
   </div>
 </template>
 
@@ -18,6 +18,9 @@ export default {
   name: "albox",
   data() {
     return {
+      activeName: "first",
+      title: "西大五1.6m皮带",
+      id: undefined,
       options: [{
         value: '选项1',
         label: '故障决策树'
@@ -31,15 +34,39 @@ export default {
         value: '选项4',
         label: 'D算法'
       }, ],
-      value: ''
+      value: '选项1'
     }
-  }
+  },
+  methods: {
+    handleClick(tab, event) {},
+    handleCommand(command) {
+      this.title = command;
+      if (this.activeName != "second") {
+        this.activeName = "second";
+      } else {
+        this.$refs.belt.clearData();
+      }
+    },
+    change(val) {
+      this.$emit("handlervalue", val);
+    }
+  },
+  watch: {
+    activeName(newValue, oldValue) {
+      // 监听activeName的变化
+      if (newValue == "second") {
+        this.$refs["tabs-span"].style.color = "#409EFF";
+      } else {
+        this.$refs["tabs-span"].style.color = "#FFFFFF";
+      }
+    },
+  },
 }
 </script>
 
 <style scoped>
 .class1{
-  column-rule-color: #13a0ec;
+  column-rule-color: #409eff;
   /* font-size: 18px; */
 
 }
@@ -51,4 +78,30 @@ export default {
 
 }
 
+.tabs-span {
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+}
+.tabs-span:hover {
+  color: #409eff;
+}
+
+.select-veido .el-select {
+    width: 150px;
+    /* margin-left: 279px; */
+    position: relative;
+    z-index: 999;
+}
+
+.select-veido >>> .el-input__inner {
+  border: 0;
+}
+.select-veido >>> .el-input--small .el-input__inner {
+  background: none;
+  color:  #4adefe;
+  font-size: 18px;
+}
+
 </style>

src/components/belt_diagnosis/failure_pre/index.vue

@@ -5,28 +5,22 @@
  
   <div class="contour"> 
     <span>
-     <el-button style="margin-left: -160px;">阈值设置</el-button>
+     <el-button  style="margin-left: 0px;" @click="show">阈值设置</el-button>
     </span>
-    <span><albox style="margin-left: 80px;color: #021722"></albox> 
+    <span><albox @handlervalue="handlervalue" ></albox> 
     </span>
       
     
         </div>
+        <dia :visible="data.visible" @hide="hide"  @handlervalue="handlervalue" ></dia>
  
    <div class="contour">
-   <span> <PieChart :value="data.paopian" title="跑偏" size="180px" :totalValue="100" :fakeData="false"></PieChart></span>
-   <span> <PieChart :value="data.dahua" title="打滑" size="180px" :totalValue="100" :fakeData="false"></PieChart></span>
-  <span> <PieChart :value="data.chaozai" title="超载" size="180px" :totalValue="100" :fakeData="false" ></PieChart></span>
-   <span> <PieChart :value="data.duimei"  title="堆煤" size="180px"  :totalValue="100" :fakeData="false" ></PieChart></span> 
+   <span> <PieChart :value="data.paopian" title="跑偏" size="180px" :totalValue="100" :fakeData="data.fakeData"></PieChart></span>
+   <span> <PieChart :value="data.dahua" title="打滑" size="180px" :totalValue="100" :fakeData="data.fakeData"></PieChart></span>
+  <span> <PieChart :value="data.chaozai" title="超载" size="180px" :totalValue="100" :fakeData="data.fakeData" ></PieChart></span>
+   <span> <PieChart :value="data.duimei"  title="堆煤" size="180px"  :totalValue="100" :fakeData="data.fakeData" ></PieChart></span> 
    </div>
 
-    <!-- <ul class="flex-ul">
-      <li>跑偏<span>:{{data.paopian}}</span>%</li>
-      <li>打滑<span>:{{data.dahua}}</span>%</li>
-      <li>超载<span>：{{data.chaozai}}</span>%</li>
-      <li>堆煤<span>:{{data.duimei}}</span>%</li>
-     
-    </ul> -->
 
 </div>
   
@@ -41,9 +35,11 @@ import albox from "../../../components/belt_diagnosis/failure_pre/albox.vue";
 // import PieChart3 from "../../../components/belt_diagnosis/failure_pre/pieChart3.vue"
 // import PieChart4 from "../../../components/belt_diagnosis/failure_pre/pieChart4.vue"
 import PieChart from "../../../common/pieChart.vue";
+import dia from "./yuzhishezhi.vue";
 
 export default {
     pieChart,
+    dia,
     data() {
         return {
             data: {
@@ -51,6 +47,11 @@ export default {
                 dahua: 20,
                 chaozai: 20,
                 duimei: 20,
+                 isShow:false,
+                 width:"60%",
+                height:"2000px",
+                visible:false,
+                fakeData:false,
             },
         };
     },
@@ -60,6 +61,14 @@ export default {
         this.initWebSocket();
     },
     methods: {
+      handlervalue(val) {
+        console.log('val :>> ', val);
+        this.data.paopian = this.getRandomNum(0, 80);
+        this.data.dahua = this.getRandomNum(0, 80);
+        this.data.duimei = this.getRandomNum(0, 80);
+        this.data.chaozai = this.getRandomNum(0, 80);
+      
+      },
         initWebSocket() {
             // 连接错误
             this.websocket.onerror = () => {
@@ -90,12 +99,23 @@ export default {
           this.data.dahua = Number(data["dahua_after"])*100;
           this.data.duimei = Number(data["jitouduimei_after"])*100;
             this.data.chaozai = Number(data["chaozai_after"])*100;
-            console.log("数据展示为：",  this.data);
+            // console.log("数据展示为：",  this.data);
         },
         close() {
             this.websocket.close();
             console.log("关闭websocket连接");
         },
+        show(){
+           this.data.visible=true
+      },
+      hide(){
+      //更改为false模式，隐藏提示框
+      this.data.visible=false;
+    },
+    changeFakeData(){
+      this.data.fakeData=true;
+
+    }
     },
     computed: {
         ...mapState(["websocketIP"]),
@@ -103,6 +123,7 @@ export default {
     components: { 
       PieChart,
       albox,
+      dia,
       // PieChart1,
       // PieChart2,
       // PieChart3,
@@ -113,8 +134,20 @@ export default {
 </script>
 
 <style scoped lang="less">
+
+.contour /deep/ .el-button{
+  background-color: transparent;
+  border: none;
+  font-size: 18px;
+  color: #4adefe;
+}
+
+.contour /deep/ .el-button:hover{
+  color: #f5e50d;
+}
+
 .title {
-  color: #fff;
+  color: #4adefe;
   font-size: 20px;
   font-weight: bolder;
   text-align: center;
@@ -152,6 +185,9 @@ export default {
     // }
   }
 }
+.buttoncolor{
+  color: rgb(126, 120, 120);
+}
 .flex-ul {
   display: flex;
   // flex-direction: column;

src/components/belt_diagnosis/failure_pre/yuzhishezhi.vue

@@ -0,0 +1,129 @@
+<template>
+    <div>
+      <el-dialog
+        title="阈值参数设置"
+        :visible.sync="visible"
+        width="30%"
+        :before-close="cancel"
+      >
+        <el-form :model="form" :rules="rules" ref="forms">
+          <!-- <el-form-item label="" label-width="100px" prop="character">
+            <el-select
+              v-model="form.character"
+              placeholder="请选择角色"
+              style="width: 100%"
+            >
+              <el-option label="业务人员" value="1"></el-option>
+              <el-option label="审核人员" value="2"></el-option>
+              <el-option label="风控经理" value="3"></el-option>
+              <el-option label="管理员" value="4"></el-option>
+            </el-select>
+          </el-form-item> -->
+          <el-form-item label="驱动电机功率（单位：KW）" label-width="200px" prop="remark">
+            <el-input v-model="form.dianjigonglv"  type="number" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="驱动电机电流（单位：A）" label-width="200px" >
+            <el-input v-model="form.dianjidianliu" type="number" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="传送带张力（单位：N）" label-width="200px" >
+            <el-input v-model="form.chuansongdaizhangli" type="number" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="皮带温度（单位：℃）" label-width="200px" >
+            <el-input v-model="form.pidaiwendu" type="number" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="滚筒温度（单位：℃）" label-width="200px" >
+            <el-input v-model="form.guntongwendu" type="number" autocomplete="off"></el-input>
+          </el-form-item>
+          <!-- <el-form-item label="皮带速度" label-width="120px" prop="reason">
+            <el-input
+              type="textarea"
+              v-model="form.reason"
+              autocomplete="off"
+            ></el-input>
+          </el-form-item> -->
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="cancel">取 消</el-button>
+          <el-button type="primary" @click="confirm"
+            >确 定</el-button
+          >
+        </span>
+      </el-dialog>
+    </div>
+  </template>
+  
+  <script>
+  import { mapState } from "vuex";
+  export default {
+    props: {
+        //接收父组件传过来的值。
+      visible: {
+        type: Boolean,
+        required: true,
+        default: false,
+      },
+    },
+    computed: {
+      ...mapState(["rowData"]),
+    },
+    watch: {
+        //监听vuex内rowData如果变了就赋值给form，从而从新渲染更新页面。
+      rowData() {
+        this.form = {
+          character: this.rowData.character,
+          remark: this.rowData.remark,
+          reason: this.rowData.reason,
+        };
+      },
+    },
+    data() {
+      return {
+          //弹出框内容双向绑定
+        form: {
+          character: "",
+          remark: "",
+          reason: "",
+        },
+        //规则：弹出框内容必填项等规则
+        rules: {
+          dianjigonglv: [
+            { required: true, message: "请输入数值", trigger: "blur" },
+          ],
+          dianjidianliu: [
+            { required: true, message: "请输入数值", trigger: "blur" },
+          ],
+          chuansongdaizhangli: [
+            { required: true, message: "请输入数值", trigger: "blur" },
+          ],
+          pidaiwendu: [
+            { required: true, message: "请输入数值", trigger: "blur" },
+          ],
+          guntongwendu: [
+            { required: true, message: "请输入数值", trigger: "blur" },
+          ],
+          pidaidusu: [
+            { required: true, message: "请输入数值", trigger: "blur" },
+          ],
+          dianjigonglv: [
+            { required: true, message: "请输入数值", trigger: "blur" },
+          ],
+        },
+      };
+    },
+    methods: {
+        //子传父，调用父组件方法改动显示隐藏从而动态控制子组件显示隐藏
+      cancel() {
+        this.$emit("hide");
+      },
+      confirm(val){
+        this.$emit("handlervalue", val);
+        this.$emit("hide");
+
+      },
+    },
+  };
+  </script>
+  
+  <style lang="less" scoped>
+  </style>
+ 

src/components/belt_diagnosis/guanlian_equipment_status/index.vue

@@ -103,8 +103,8 @@ export default {
 
 <style scoped lang="less">
 .title {
-  color: #fff;
-  font-size: 24px;
+  color: #4adefe;
+  font-size: 20px;
   font-weight: bolder;
   text-align: center;
   margin-top: 10px;

src/components/belt_diagnosis/guanlian_equipment_status/index1.vue

@@ -76,7 +76,7 @@ export default {
 
 <style scoped lang="less">
 .title {
-      color: #fff;
+  color: #4adefe;
   font-size: 20px;
   font-weight: bolder;
   text-align: center;

src/components/belt_diagnosis/guanlian_equipment_status/index2.vue

@@ -80,7 +80,7 @@ export default {
 
 <style scoped lang="less">
 .title {
-      color: #fff;
+  color: #4adefe;
   font-size: 20px;
   font-weight: bolder;
   text-align: center;

src/components/belt_diagnosis/guanlian_equipment_status/index3.vue

@@ -76,7 +76,7 @@ export default {
 
 <style scoped lang="less">
 .title {
-      color: #fff;
+  color: #4adefe;
   font-size: 20px;
   font-weight: bolder;
   text-align: center;

src/components/belt_diagnosis/guntong1/index.vue

@@ -80,7 +80,7 @@ export default {
 
 <style scoped lang="less">
 .title {
-  color: #fff;
+  color: #4adefe;
   font-size: 20px;
   font-weight: bolder;
   text-align: center;

src/components/belt_diagnosis/guntong2/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
   
-    <div class="title">滚筒1</div>
+    <div class="title">滚筒2</div>
       <ul class="flex-ul">
         <li >温度：<span class="content">{{data.wendu_after}}℃</span></li>
         <li >张力:<span class="content">{{data.zhangli_after}}N/m</span></li>
@@ -80,11 +80,11 @@
   
   <style scoped lang="less">
   .title {
-    color: #fff;
-    font-size: 20px;
-    font-weight: bolder;
-    text-align: center;
-    margin-top: 10px;
+    color: #4adefe;
+  font-size: 20px;
+  font-weight: bolder;
+  text-align: center;
+  margin-top: 10px;
   }
   .flex-ul {
     display: flex;

src/components/belt_diagnosis/transfer_status/index.vue

@@ -55,10 +55,10 @@ export default{
 </script>
 <style scoped>
 .title {
-  color: #fff;
+  color: #4adefe;
   font-size: 20px;
   font-weight: bolder;
-   text-align: center;
+  text-align: center;
   margin-top: 10px;
 }
 .item {

src/views/app_belt_diagnosis/newMain.vue

@@ -107,16 +107,17 @@ export default {
 
 <style lang="less" scoped>
 .grid {
-  background: #bdc3c7; /* fallback for old browsers */
+  background: #303030; /* fallback for old browsers */
   background: -webkit-linear-gradient(
     to top,
-    #2c3e50,
-    #bdc3c7
+    #303030,
+    #303030
   ); 
-  background: linear-gradient(to top, #2c3e50, #bdc3c7);
+  background: linear-gradient(to top, #303030, #303030);
   width: 100%;
   height: 890px;
   display: grid;
+  // margin-top: 10px;
   grid-template-rows: 1fr 2fr 1fr;
   grid-template-columns: 1fr 1fr 1fr;
   grid-gap: 10px;
@@ -154,12 +155,13 @@ export default {
     border-radius: 20px;
     padding: 0px;
     background-image: 
-      url(../../assets/img/tunneling/dataBg.png), 
-      url(../../assets/img/tunneling/dataBg.png), 
-      url(../../assets/img/tunneling/dataBg.png), 
-      url(../../assets/img/tunneling/dataBg.png),
-      url(../../assets/img/tunneling/dataBg.png),  
-      url(../../assets/img/tunneling/dataBg.png);
+     url(../../assets/img/tunneling/dataBg.png);
+      // url(../../assets/img/tunneling/dataBg.png), 
+      // url(../../assets/img/tunneling/dataBg.png), 
+      // url(../../assets/img/tunneling/dataBg.png), 
+      // url(../../assets/img/tunneling/dataBg.png),
+      // url(../../assets/img/tunneling/dataBg.png),  
+      // url(../../assets/img/tunneling/dataBg.png);
     background-repeat: no-repeat;
     background-size: 109% 100%;
     background-clip: content-box;