coolprop-vue-example/main.html at master · doomiris/coolprop-vue-example · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>coolprop-js-example</title>
  <!-- Bootstrap -->
  <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
          aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span
            class="navbar-toggler-icon"></span></button>
        <a class="navbar-brand" href="javascript:void(0)" tabindex="-1">coolprop</a>
        <div class="collapse navbar-collapse" id="navbarSupportedContent1">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item"> <a class="nav-link" tabindex="1" href="javascript:window.location.reload()">📰
                Reload </a> </li>
          </ul>
        </div>
      </nav>
  <div id="vueApp">
    <div class="form-row">
        <div class="form-group col-1">input:</div>
      <div class="form-group col-2">
        <select v-model="para.as" class="form-control">
          <option v-for="item in symbol">{{item}}</option>
        </select>
      </div>
      <div class="form-group col-2">
        <input type="number" v-model.number="para.av" class="form-control w-20">
      </div>
      <div class="form-group col-2">
        <select v-model="para.bs" class="form-control w-20">
          <option v-for="item in symbol">{{item}}</option>
        </select>
      </div>
      <div class="form-group col-2">
        <input type="number" v-model.number="para.bv" class="form-control w-20">
      </div>
    </div>
    <div class="form-row">
        <div class="form-group col-1">input:</div>
      <div class="form-group col-3">
        <select v-model="para.ref" class="form-control w-20">
          <option v-for="item in refrigerant">{{item}}</option>
        </select>
      </div>
    </div>
    <div class="form-row">
      <div class="form-group col-1">output:</div>
        <div class="form-group col-2">
            <select v-model="para.rs" class="form-control">
              <option v-for="item in symbol">{{item}}</option>
            </select>
        </div>
    </div>


  <div class="form-row">
      <ul class="list-group list-group-flush">
          <li class="list-group-item" v-for="item in rzt">Module.PropsSI({{item.rs}}, {{item.as}}, {{item.av}}, {{item.bs}}, {{item.bv}}, {{item.ref}}) = {{item.result}}</li>
      </ul>
  </div>
</div>
  <script src="coolprop/6.3.0/coolprop.min.js" type="text/javascript"></script>
  <script src="node_modules/vue/dist/vue.min.js"></script>
  <script>
    var myApp = new Vue({
      el: '#vueApp',
      data: {
        refrigerant: ["R22", "R134a", "R404A", "R407C", "R410A", "R32"],
        symbol: ['H', 'P', 'T', 'Q'],
        para: {
          rs: "H",
          as: "P",
          av: 60000,
          bs: "T",
          bv: 297.15,
          ref: "R22",
        },
        rzt:[],
        timer:{}
      },
      watch: {
        para:{
          deep:true,
          handler:function(oldValue,newValue){
            clearTimeout(this.timer)  //clear timer
            this.timer = setTimeout(()=>{   //delay execute
              this.calc(newValue)
            },500)
          },
          immediate: true
        }
      },
      methods:{
        calc:function(v){
          if (Module && Module.PropsSI){
              let result=Module.PropsSI(v.rs, v.as, v.av, v.bs, v.bv, v.ref)
              this.rzt.unshift({
                'rs':v.rs,
                'as':v.as,
                'av':v.av,
                'bs':v.bs,
                'bv':v.bv,
                'ref':v.ref,
                'result':result
              })
            }
          if (this.rzt.length>5) this.rzt.pop() //keep last record
        }
      },
      computed: {

      }
    })
  </script>

</body>

</html>