anytriangle.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  1. <template>
  2. <view class="math-container">
  3. <view class="header">
  4. <u-image width="100%" height="300rpx" :src="mathImgs[name].big" mode="aspectFit" @click="handleBigImage"></u-image>
  5. </view>
  6. <view class="main dir-top-wrap cross-center">
  7. <view class="form">
  8. <u-form-item label="边长a" label-width="160">
  9. <u-input type="number" v-model="formData.lengtha" :placeholder="lengthAInput.placeholder" :disabled="lengthAInput.disabled"/>
  10. </u-form-item>
  11. <u-form-item label="边长b" label-width="160">
  12. <u-input type="number" v-model="formData.lengthb" :placeholder="lengthBInput.placeholder" :disabled="lengthBInput.disabled"/>
  13. </u-form-item>
  14. <u-form-item label="边长c" label-width="160">
  15. <u-input type="number" v-model="formData.lengthc" :placeholder="lengthCInput.placeholder" :disabled="lengthCInput.disabled"/>
  16. </u-form-item>
  17. <u-form-item label="角度A" label-width="160">
  18. <u-input type="number" v-model="formData.anglea" :placeholder="angleAInput.placeholder" :disabled="angleAInput.disabled"/>
  19. </u-form-item>
  20. <u-form-item label="角度B" label-width="160">
  21. <u-input type="number" v-model="formData.angleb" :placeholder="angleBInput.placeholder" :disabled="angleBInput.disabled"/>
  22. </u-form-item>
  23. <u-form-item label="角度C" label-width="160">
  24. <u-input type="number" v-model="formData.anglec" :placeholder="angleCInput.placeholder" :disabled="angleCInput.disabled"/>
  25. </u-form-item>
  26. </view>
  27. <view class="btn-group main-left cross-center">
  28. <u-button :ripple="true" @click="handelCalc" :custom-style="{backgroundColor: $u.color['mainBgColor'],color:'#ffffff',width: '260rpx',marginRight:'30rpx'}">计算</u-button>
  29. <u-button :ripple="true" @click="handleClear">清空</u-button>
  30. </view>
  31. </view>
  32. <div class="footer">
  33. <view class="result dir-top-wrap cross-center" v-if="showResult">
  34. <view v-for="item in rules" v-if="item.value && item.show">
  35. <text>{{item.name}}=</text>{{item.value}}{{item.unit}}
  36. </view>
  37. </view>
  38. </div>
  39. </view>
  40. </template>
  41. <script>
  42. import mathImgs from "@/core/math-imgs"
  43. // 万能公式
  44. export default {
  45. data() {
  46. return {
  47. name: 'anytriangle',
  48. mathImgs: mathImgs,
  49. formData: {
  50. lengtha: '',
  51. lengthb: '',
  52. lengthc: '',
  53. anglea: '',
  54. angleb: '',
  55. anglec: '',
  56. },
  57. // 用来验证 输入
  58. rules: {
  59. lengtha: {name:'a', value:'',unit:'cm',show: true},
  60. lengthb:{name:'b', value:'',unit:'cm',show: true},
  61. lengthc: {name:'c', value:'',unit:'cm',show: true},
  62. anglea:{name:'角度A', value:'',unit:'°',show: true},
  63. angleb:{name:'角度B', value:'',unit:'°',show: true},
  64. anglec:{name:'角度C', value:'',unit:'°',show: true},
  65. }
  66. }
  67. },
  68. methods: {
  69. handleBigImage(){
  70. uni.previewImage({
  71. urls: [mathImgs[this.name].big],
  72. });
  73. },
  74. handelCalc(){
  75. this.initRules();
  76. let validate = [];
  77. for (const itemKey in this.formData) {
  78. validate.push(this.formData[itemKey]);
  79. }
  80. if(!this.$util.checkArrayNotNullNumber(validate,3)){
  81. this.$u.toast('至少输入三个参数');
  82. return;
  83. }
  84. let lengtha = 0;
  85. let lengthb = 0;
  86. let lengthc = 0;
  87. let anglea = 0;
  88. let angleb = 0;
  89. let anglec = 0;
  90. /**1、 已知a、b、c
  91. * cosA=(b²+c²-a²)÷(2bc)
  92. * cosB=(a²+c²-b²)÷(2ac)
  93. * cosC =(a²+b²-c²)÷(2ab)
  94. */
  95. lengtha = parseFloat( this.formData.lengtha);
  96. lengthb = parseFloat(this.formData.lengthb);
  97. lengthc = parseFloat(this.formData.lengthc);
  98. anglea = parseFloat(this.formData.anglea);
  99. angleb = parseFloat(this.formData.angleb);
  100. anglec = parseFloat(this.formData.anglec);
  101. if(lengtha && lengthb && lengthc){
  102. if(!this.$util.checkTriangle(lengtha, lengthb, lengthc)){
  103. this.$u.toast('两边之后要大于第三边');
  104. return;
  105. }
  106. anglea = this.$util.acos((Math.pow(lengthb,2) + Math.pow(lengthc,2) - Math.pow(lengtha,2)) / (2 * lengthb * lengthc))
  107. angleb = this.$util.acos((Math.pow(lengtha,2) + Math.pow(lengthc,2) - Math.pow(lengthb,2)) / (2 * lengtha * lengthc))
  108. anglec = this.$util.acos((Math.pow(lengtha,2) + Math.pow(lengthb,2) - Math.pow(lengthc,2)) / (2 * lengtha * lengthb))
  109. }
  110. /** 2、 已知a、b、A(a、b、B;a、c、A;a、c、C;b、c、B;b、c、C):
  111. * sinB=(b×sinA)÷a
  112. * c:a²=b²+c²-2bccosA
  113. * sinC=(c×sinA)÷a
  114. *
  115. */
  116. else if(lengtha && lengthb){
  117. //let c1 = ((2 * b * Math.cos(A)) + Math.sqrt(Math.pow(2 * b * Math.cos(A), 2) - 4 * (Math.pow(b, 2) - Math.pow(a, 2)))) / 2
  118. if(anglea){
  119. angleb = this.$util.asin((lengthb * this.$util.sin(anglea)) / lengtha)
  120. lengthc = ((2 * lengthb * this.$util.cos(anglea)) + Math.sqrt(Math.pow(2 * lengthb * this.$util.cos(anglea), 2) - 4 * (Math.pow(lengthb, 2) - Math.pow(lengtha, 2)))) / 2
  121. if(!this.$util.checkTriangle(lengtha, lengthb, lengthc)){
  122. lengthc = ((2 * lengthb * this.$util.cos(anglea)) - Math.sqrt(Math.pow(2 * lengthb * this.$util.cos(anglea), 2) - 4 * (Math.pow(lengthb, 2) - Math.pow(lengtha, 2)))) / 2
  123. }
  124. anglec = 180 - angleb - anglea
  125. }else if(angleb){
  126. anglea = this.$util.asin((lengtha * this.$util.sin(angleb)) / lengthb)
  127. lengthc = ((2 * lengtha * this.$util.cos(angleb)) + Math.sqrt(Math.pow(2 * lengtha * this.$util.cos(angleb), 2) - 4 * (Math.pow(lengtha, 2) - Math.pow(lengthb, 2)))) / 2
  128. if(!this.$util.checkTriangle(lengtha, lengthb, lengthc)){
  129. lengthc = ((2 * lengtha * this.$util.cos(angleb)) - Math.sqrt(Math.pow(2 * lengtha * this.$util.cos(angleb), 2) - 4 * (Math.pow(lengtha, 2) - Math.pow(lengthb, 2)))) / 2
  130. }
  131. anglec = 180 - angleb - anglea
  132. }else if(anglec){
  133. // sinA=(a×sinC)÷c
  134. // c²=a²+b²-2ab cosC
  135. lengthc = Math.sqrt(Math.pow(lengtha, 2) + Math.pow(lengthb, 2) - 2 * lengtha * lengthb * this.$util.cos(anglec))
  136. anglea = this.$util.asin((lengtha * this.$util.sin(anglec)) / lengthc)
  137. angleb = 180 - anglec - anglea
  138. }
  139. }else if(lengtha && lengthc){
  140. if(anglea){
  141. anglec = this.$util.asin((lengthc * this.$util.sin(anglea)) / lengtha)
  142. lengthb = ((2 * lengthc * this.$util.cos(anglea)) + Math.sqrt(Math.pow(2 * lengthc * this.$util.cos(anglea), 2) - 4 * (Math.pow(lengthc, 2) - Math.pow(lengtha, 2)))) / 2
  143. if(!this.$util.checkTriangle(lengtha, lengthb, lengthc)){
  144. lengthb = ((2 * lengthc * this.$util.cos(anglea)) - Math.sqrt(Math.pow(2 * lengthc * this.$util.cos(anglea), 2) - 4 * (Math.pow(lengthc, 2) - Math.pow(lengtha, 2)))) / 2
  145. }
  146. angleb = 180 - anglec - anglea
  147. }else if(angleb){
  148. // sinA=(a×sinB)÷b
  149. // b²=a²+c²-2ac cosC
  150. lengthb = Math.sqrt(Math.pow(lengtha, 2) + Math.pow(lengthc, 2) - 2 * lengtha * lengthc * this.$util.cos(angleb))
  151. anglea = this.$util.asin((lengtha * this.$util.sin(angleb)) / lengthb)
  152. anglec = 180 - anglea - angleb
  153. }else if(anglec){
  154. anglea = this.$util.asin((lengtha * this.$util.sin(anglec)) / lengthc)
  155. lengthb = ((2 * lengthc * this.$util.cos(anglea)) + Math.sqrt(Math.pow(2 * lengthc * this.$util.cos(anglea), 2) - 4 * (Math.pow(lengthc, 2) - Math.pow(lengtha, 2)))) / 2
  156. if(!this.$util.checkTriangle(lengtha, lengthb, lengthc)){
  157. lengthb = ((2 * lengthc * this.$util.cos(anglea)) - Math.sqrt(Math.pow(2 * lengthc * this.$util.cos(anglea), 2) - 4 * (Math.pow(lengthc, 2) - Math.pow(lengtha, 2)))) / 2
  158. }
  159. angleb = 180 - anglec - anglea
  160. }
  161. }else if(lengthb && lengthc){
  162. if(anglea){
  163. lengtha = Math.sqrt(Math.pow(lengthb, 2) + Math.pow(lengthc, 2) - 2 * lengthb * lengthc * this.$util.cos(anglea))
  164. angleb = this.$util.asin((lengthb * this.$util.sin(anglea)) / lengtha)
  165. anglec = 180 - anglea - angleb
  166. }else if(angleb){
  167. // sinA=(a×sinC)÷c
  168. anglec = this.$util.asin((lengthc * this.$util.sin(angleb)) / lengthb)
  169. lengtha = ((2 * lengthc * this.$util.cos(angleb)) + Math.sqrt(Math.pow(2 * lengthc * this.$util.cos(angleb), 2) - 4 * (Math.pow(lengthc, 2) - Math.pow(lengthb, 2)))) / 2
  170. if(!this.$util.checkTriangle(lengtha, lengthb, lengthc)){
  171. lengtha = ((2 * lengthc * this.$util.cos(angleb)) - Math.sqrt(Math.pow(2 * lengthc * this.$util.cos(angleb), 2) - 4 * (Math.pow(lengthc, 2) - Math.pow(lengthb, 2)))) / 2
  172. }
  173. anglea = 180 - angleb - anglec
  174. }else if(anglec){
  175. lengtha = ((2 * lengthb * this.$util.cos(anglec)) + Math.sqrt(Math.pow(2 * lengthb * this.$util.cos(anglec), 2) - 4 * (Math.pow(lengthb, 2) - Math.pow(lengthc, 2)))) / 2
  176. if(!this.$util.checkTriangle(lengtha, lengthb, lengthc)){
  177. lengtha = ((2 * lengthb * this.$util.cos(anglec)) - Math.sqrt(Math.pow(2 * lengthb * this.$util.cos(anglec), 2) - 4 * (Math.pow(lengthb, 2) - Math.pow(lengthc, 2)))) / 2
  178. }
  179. angleb = this.$util.asin((lengthb * this.$util.sin(anglec)) / lengthc)
  180. anglea = 180 - anglec - angleb
  181. }
  182. } else if(anglea && angleb){
  183. anglec = 180 - anglea - angleb
  184. if(lengtha){
  185. lengthb = (lengtha * this.$util.sin(angleb)) / this.$util.sin(anglea)
  186. lengthc = (lengtha * this.$util.sin(anglec)) / this.$util.sin(anglea)
  187. }else if(lengthb){
  188. lengtha = (lengthb * this.$util.sin(anglea)) / this.$util.sin(angleb)
  189. lengthc = (lengthb * this.$util.sin(anglec)) / this.$util.sin(angleb)
  190. }else if(lengthc){
  191. lengtha = (lengthc * this.$util.sin(anglea)) / this.$util.sin(anglec)
  192. lengthb = (lengthc * this.$util.sin(angleb)) / this.$util.sin(anglec)
  193. }
  194. }else if(anglea && anglec){
  195. angleb = 180 - anglea - anglec
  196. if(lengtha){
  197. lengthb = (lengtha * this.$util.sin(angleb)) / this.$util.sin(anglea)
  198. lengthc = (lengtha * this.$util.sin(anglec)) / this.$util.sin(anglea)
  199. }else if(lengthb){
  200. lengtha = (lengthb * this.$util.sin(anglea)) / this.$util.sin(angleb)
  201. lengthc = (lengthb * this.$util.sin(anglec)) / this.$util.sin(angleb)
  202. }else if(lengthc){
  203. lengtha = (lengthc * this.$util.sin(anglea)) / this.$util.sin(anglec)
  204. lengthb = (lengthc * this.$util.sin(angleb)) / this.$util.sin(anglec)
  205. }
  206. }else if(angleb && anglec){
  207. anglea = 180 - angleb - anglec
  208. if(lengtha){
  209. lengthb = (lengtha * this.$util.sin(angleb)) / this.$util.sin(anglea)
  210. lengthc = (lengtha * this.$util.sin(anglec)) / this.$util.sin(anglea)
  211. }else if(lengthb){
  212. lengtha = (lengthb * this.$util.sin(anglea)) / this.$util.sin(angleb)
  213. lengthc = (lengthb * this.$util.sin(anglec)) / this.$util.sin(angleb)
  214. }else if(lengthc){
  215. lengtha = (lengthc * this.$util.sin(anglea)) / this.$util.sin(anglec)
  216. lengthb = (lengthc * this.$util.sin(angleb)) / this.$util.sin(anglec)
  217. }
  218. }
  219. this.rules.lengtha.value = lengtha;
  220. this.rules.lengthb.value = lengthb;
  221. this.rules.lengthc.value = lengthc;
  222. this.rules.anglea.value = anglea;
  223. this.rules.angleb.value = angleb;
  224. this.rules.anglec.value = anglec;
  225. this.roundRules()
  226. },
  227. roundRules(){
  228. for (const itemKey in this.rules) {
  229. this.rules[itemKey].value = this.$util.round(this.rules[itemKey].value,2);
  230. }
  231. },
  232. initRules(){
  233. for (const itemKey in this.rules) {
  234. this.rules[itemKey].value = "";
  235. }
  236. },
  237. getInputItem(item){
  238. let validate = [];
  239. let placeholder = `请输入${this.rules[item].name}`;
  240. let disabled = false;
  241. for (const itemKey in this.rules) {
  242. if(item !== itemKey && typeof this.formData[itemKey] !== "undefined")
  243. validate.push(this.formData[itemKey]);
  244. }
  245. if(item.indexOf('angle') !== -1 && !this.$util.checkArrayNotNullNumber(validate,3)){
  246. validate = [];
  247. for (const itemKey in this.rules) {
  248. if(itemKey.indexOf('angle') !== -1 && itemKey !== item && typeof this.formData[itemKey] !== "undefined"){
  249. validate.push(this.formData[itemKey]);
  250. }
  251. }
  252. if(this.$util.checkArrayNotNullNumber(validate)){
  253. disabled = true;
  254. placeholder = '无需输入';
  255. }
  256. }else{
  257. if(this.$util.checkArrayNotNullNumber(validate,3)){
  258. disabled = true;
  259. placeholder = '无需输入';
  260. }
  261. }
  262. return {placeholder: placeholder,disabled:disabled};
  263. },
  264. handleClear() {
  265. this.initRules();
  266. this.formData = {
  267. lengtha: '',
  268. lengthb: '',
  269. lengthc: '',
  270. anglea: '',
  271. angleb: '',
  272. anglec: '',
  273. };
  274. }
  275. },
  276. computed:{
  277. lengthAInput(){
  278. return this.getInputItem('lengtha')
  279. },
  280. lengthBInput(){
  281. return this.getInputItem('lengthb')
  282. },
  283. lengthCInput(){
  284. return this.getInputItem('lengthc')
  285. },
  286. angleAInput(){
  287. return this.getInputItem('anglea')
  288. },
  289. angleBInput(){
  290. return this.getInputItem('angleb')
  291. },
  292. angleCInput(){
  293. return this.getInputItem('anglec')
  294. },
  295. showResult(){
  296. let validate = [];
  297. for (const itemKey in this.rules) {
  298. validate.push(this.rules[itemKey].value);
  299. }
  300. return this.$util.checkArrayNotNullNumber(validate,3)
  301. }
  302. }
  303. }
  304. </script>
  305. <style lang="scss" scoped>
  306. @import "@/static/css/math.scss";
  307. </style>