system-phone 3.0.49-9 → 3.1.0

package/src/components/screen/SafeOrderContentPage.vue

@@ -1,440 +1,440 @@
-<template>
-  <div class="layui-container" style="background-color: darkblue;height: 100%;padding-top: 10px" >
-    <div class="layui-row" style="height: 5%">
-      <module-title :title="securityTitle" :font="5"></module-title>
-    </div>
-    <div class="layui-row" style="height: 15%">
-      <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
-        <div class="resident-text">居民</div>
-      </div>
-      <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
-        <div class="plan-content">
-          <div class="content-number">{{securityNotData[0].number}}</div>
-          <div class="content-text">{{securityNotData[0].text}}</div>
-        </div>
-      </div>
-      <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
-        <div class="security-check-content">
-          <div class="content-number">{{securityNotData[1].number}}</div>
-          <div class="content-text">{{securityNotData[1].text}}</div>
-        </div>
-      </div>
-    </div>
-    <div class="layui-row" style="height: 15%">
-      <div class="layui-col-xs4 layui-col-sm4 layui-col-md4" style="height: 100%">
-        <div class="items">
-          <div class="item"><security-check-item :content="securityData[2]"></security-check-item></div>
-          <div class="item"><security-check-item :content="securityData[3]"></security-check-item></div>
-          <div class="item"><security-check-item :content="securityData[4]"></security-check-item></div>
-        </div>
-      </div>
-      <div class="layui-col-xs4 layui-col-sm4 layui-col-md4" style="height: 100%">
-        <div class="house-entry-rate" id="houseEntryRate"></div>
-      </div>
-      <div class="layui-col-xs4 layui-col-sm4 layui-col-md4" style="height: 100%">
-        <div class="complete-rate" id="completeRate"></div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import * as echarts from 'echarts';
-export default {
-  title:"SafeOrderContentPage",
-  data(){
-    return{
-      securityTitle:'安检统计',
-      securityData:[{text:'本月计划数',number:4000},
-        {text:'本月安检数',number:3412},
-        {text:'正常入户',number:3000},
-        {text:'到访不遇',number:400},
-        {text:'长期无人',number:12}],
-      //安检 非居民数据
-      securityNotData:[{text:'本月计划数',number:4000},
-        {text:'本月安检数',number:3412},
-        {text:'正常入户',number:3000},
-        {text:'到访不遇',number:400}],
-
-      //工单统计
-      workOrderTitle:'工单统计',
-      workOrderDatas:[{text:'预约',number:4000},
-        {text:'完成',number:3412},
-        {text:'总量',number:3000},
-        {text:'完成',number:2122},
-        {text:'总量',number:5000},
-        {text:'完成',number:4560}],
-      dateType:'月',  //查询数据条件
-      value3: '',
-      target: ''    //查询数据条件
-    }
-  },
-  ready(){
-    this.houseEntryTate()
-    this.completeRate()
-  },
-  methods:{
-    completeRate() {
-      let myChart = echarts.init(document.getElementById('completeRate'));
-      let percentColor = "#fff"; //百分比颜色
-      var innerColor = "#fbcc56"; //黄色
-      /*---------------------缩放----------------------------*/
-      let scale = 0.5;
-      let option = {
-        title: [
-          {
-            text: "完成率",
-            x: "45%",
-            y: "62%",
-            textAlign: "center",
-            textStyle: {
-              color: "#fff",
-              textAlign: "center",
-              fontSize: 12 * scale,
-              fontWeight: "bold",
-            },
-          },
-        ],
-        series: [
-          //内圈圆环
-          {
-            name: "Line 0",
-            type: "pie",
-            clockWise: false, //顺时加载
-            hoverAnimation: false, //鼠标移入变大
-            center: ["50%", "55%"],
-            radius: ["63%", "70%"],
-            data: [
-              {
-                value: this.securityData[1].number,
-                name: "计划安检",
-                itemStyle: {
-                  normal: {
-                    color: {
-                      type: 'linear',
-                      colorStops: [
-                        // !! 在此添加想要的渐变过程色 !!
-                        {offset: 0, color: '#1594E7'},
-                        {offset: 1, color: '#072066'}
-                      ]
-                    }
-                  },
-                },
-                label: {
-                  normal: {
-                    formatter: "{d}%",
-                    position: "center",
-                    padding: [0, 0, 10, 0],
-                    align: "left",
-                    show: true,
-                    textStyle: {
-                      fontSize: 20 * scale,
-                      fontWeight: "bold",
-                      color: percentColor,
-                    },
-                  },
-                },
-              },
-              {
-                value: this.securityData[0].number - this.securityData[1].number,
-                name: "已安检",
-                itemStyle: {
-                  normal: {
-                    color: "none",
-                  },
-                },
-              },
-              {
-                //画中间的图标
-                name: "",
-                value: 35,
-                label: {
-                  borderRadius: "100%",
-                },
-                itemStyle: {
-                  color: "#ffffff",
-                  normal: {
-                    color: "#1594E7",
-                    borderColor: "#1594E7",
-                    borderWidth: 5,
-                    borderRadius: '100%'
-                  },
-                },
-                labelLine: {
-                  show: false,
-                },
-                emphasis: {
-                  labelLine: {
-                    show: false,
-                  },
-                  itemStyle: {
-                    color: "#5886f0",
-                  },
-                },
-              },
-              {
-                // 解决圆点过大后续部分显示明显的问题
-                name: "",
-                value: 4,
-                labelLine: {
-                  show: false,
-                },
-                itemStyle: {
-                  color: "#5886f0",
-                },
-                emphasis: {
-                  labelLine: {
-                    show: false,
-                  },
-                  itemStyle: {
-                    color: "#5886f0",
-                  },
-                },
-              },
-            ],
-          },
-          {
-            name: "",
-            type: "pie",
-            clockWise: true,
-            hoverAnimation: false,
-            radius: [23, "50%"],
-            center: ["50%", "55%"],
-            data: [
-              {
-                name: "aaa",
-                value: 60,
-                itemStyle: {
-                  normal: {
-                    color: "rgba(255,255,255,.1)"
-                  }
-                },
-                label: {
-                  show: false
-                }
-              }
-            ]
-          },
-        ],
-      };
-      // 使用刚指定的配置项和数据显示图表。
-      myChart.setOption(option);
-      window.addEventListener("resize", function () {
-        myChart.resize();
-      });
-    },
-    houseEntryTate() {
-      let myChart = echarts.init(document.getElementById("houseEntryRate"));
-      let percentColor = "#fff"; //百分比颜色
-      var innerColor = "#fbcc56"; //黄色
-      /*---------------------缩放----------------------------*/
-      let scale = 0.5;
-      let option = {
-        title: [
-          {
-            text: "入户率",
-            x: "45%",
-            y: "62%",
-            textAlign: "center",
-            textStyle: {
-              color: "#fff",
-              textAlign: "center",
-              fontSize: 12 * scale,
-              fontWeight: "bold",
-            },
-          },
-        ],
-        series: [
-          //内圈圆环
-          {
-            name: "",
-            type: "pie",
-            clockWise: false, //顺时加载
-            hoverAnimation: false, //鼠标移入变大
-            center: ["50%", "55%"],
-            radius: ["63%", "70%"],
-            data: [
-              {
-                value: this.securityData[2].number,
-                name: "计划安检",
-                itemStyle: {
-                  normal: {
-                    color: {
-                      type: 'linear',
-                      colorStops: [
-                        // !! 在此添加想要的渐变过程色 !!
-                        {offset: 0, color: '#35ECAC'},
-                        {offset: 1, color: '#072066'}
-                      ]
-                    }
-                  },
-                },
-                label: {
-                  normal: {
-                    formatter: "{d}%",
-                    position: "center",
-                    padding: [0, 0, 10, 0],
-                    align: "left",
-                    show: true,
-                    textStyle: {
-                      fontSize: 20 * scale,
-                      fontWeight: "bold",
-                      color: percentColor,
-                    },
-                  },
-                },
-              },
-              {
-                value: this.securityData[1].number - this.securityData[2].number,
-                name: "已安检",
-                itemStyle: {
-                  normal: {
-                    color: "none",
-                  },
-                },
-              },
-              {
-                //画中间的图标
-                name: "",
-                value: 35,
-                label: {
-                  borderRadius: "100%",
-                },
-                itemStyle: {
-                  color: "#ffffff",
-                  normal: {
-                    color: "#35ECAC",
-                    borderColor: "#35ECAC",
-                    borderWidth: 5,
-                    borderRadius: '100%'
-                  },
-                },
-                labelLine: {
-                  show: false,
-                },
-                emphasis: {
-                  labelLine: {
-                    show: false,
-                  },
-                  itemStyle: {
-                    color: "#5886f0",
-                  },
-                },
-              },
-              {
-                // 解决圆点过大后续部分显示明显的问题
-                name: "",
-                value: 4,
-                labelLine: {
-                  show: false,
-                },
-                itemStyle: {
-                  color: "#5886f0",
-                },
-                emphasis: {
-                  labelLine: {
-                    show: false,
-                  },
-                  itemStyle: {
-                    color: "#5886f0",
-                  },
-                },
-              },
-            ],
-          },
-          {
-            name: "",
-            type: "pie",
-            clockWise: true,
-            hoverAnimation: false,
-            radius: [23, "50%"],
-            center: ["50%", "55%"],
-            data: [
-              {
-                name: "aaa",
-                value: 60,
-                itemStyle: {
-                  normal: {
-                    color: "rgba(255,255,255,.1)"
-                  }
-                },
-                label: {
-                  show: false
-                }
-              }
-            ]
-          }
-        ],
-      };
-      // 使用刚指定的配置项和数据显示图表。
-      myChart.setOption(option);
-      window.addEventListener("resize", function () {
-        myChart.resize();
-      });
-    },
-  }
-}
-</script>
-<style lang="less" scoped>
-.items{
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  .item{
-    color: white;
-    font-size: vw(14);
-    height: 23%;
-    width: 100%;
-    margin-top: 1%;
-  }
-}
-.security-check-content{
-  height: 70%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: center;
-  text-align: center;
-  .content-number{
-    color: #87D8FF;
-    font-size: 10vw;
-    width: 100%;
-    height: 40%;
-  }
-  .content-text{
-    font-size: 4vw;
-    width: 100%;
-    color: white;
-    height: 35%;
-  }
-}
-.resident-text{
-  font-size: 6vw;
-  color: #F4AB41;
-  margin-top: 20%;
-  margin-left: 20%;
-  width: 100%;
-  height: 30%;
-}
-.plan-content{
-  height: 70%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: center;
-  text-align: center;
-  .content-number{
-    color: #34E9AB;
-    font-size: 10vw;
-    width: 100%;
-    height: 40%;
-  }
-  .content-text{
-    font-size: 4vw;
-    color: white;
-    width: 100%;
-    height: 35%;
-  }
-}
-</style>
+<template>
+  <div class="layui-container" style="background-color: darkblue;height: 100%;padding-top: 10px" >
+    <div class="layui-row" style="height: 5%">
+      <module-title :title="securityTitle" :font="5"></module-title>
+    </div>
+    <div class="layui-row" style="height: 15%">
+      <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
+        <div class="resident-text">居民</div>
+      </div>
+      <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
+        <div class="plan-content">
+          <div class="content-number">{{securityNotData[0].number}}</div>
+          <div class="content-text">{{securityNotData[0].text}}</div>
+        </div>
+      </div>
+      <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
+        <div class="security-check-content">
+          <div class="content-number">{{securityNotData[1].number}}</div>
+          <div class="content-text">{{securityNotData[1].text}}</div>
+        </div>
+      </div>
+    </div>
+    <div class="layui-row" style="height: 15%">
+      <div class="layui-col-xs4 layui-col-sm4 layui-col-md4" style="height: 100%">
+        <div class="items">
+          <div class="item"><security-check-item :content="securityData[2]"></security-check-item></div>
+          <div class="item"><security-check-item :content="securityData[3]"></security-check-item></div>
+          <div class="item"><security-check-item :content="securityData[4]"></security-check-item></div>
+        </div>
+      </div>
+      <div class="layui-col-xs4 layui-col-sm4 layui-col-md4" style="height: 100%">
+        <div class="house-entry-rate" id="houseEntryRate"></div>
+      </div>
+      <div class="layui-col-xs4 layui-col-sm4 layui-col-md4" style="height: 100%">
+        <div class="complete-rate" id="completeRate"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+export default {
+  title:"SafeOrderContentPage",
+  data(){
+    return{
+      securityTitle:'安检统计',
+      securityData:[{text:'本月计划数',number:4000},
+        {text:'本月安检数',number:3412},
+        {text:'正常入户',number:3000},
+        {text:'到访不遇',number:400},
+        {text:'长期无人',number:12}],
+      //安检 非居民数据
+      securityNotData:[{text:'本月计划数',number:4000},
+        {text:'本月安检数',number:3412},
+        {text:'正常入户',number:3000},
+        {text:'到访不遇',number:400}],
+
+      //工单统计
+      workOrderTitle:'工单统计',
+      workOrderDatas:[{text:'预约',number:4000},
+        {text:'完成',number:3412},
+        {text:'总量',number:3000},
+        {text:'完成',number:2122},
+        {text:'总量',number:5000},
+        {text:'完成',number:4560}],
+      dateType:'月',  //查询数据条件
+      value3: '',
+      target: ''    //查询数据条件
+    }
+  },
+  ready(){
+    this.houseEntryTate()
+    this.completeRate()
+  },
+  methods:{
+    completeRate() {
+      let myChart = echarts.init(document.getElementById('completeRate'));
+      let percentColor = "#fff"; //百分比颜色
+      var innerColor = "#fbcc56"; //黄色
+      /*---------------------缩放----------------------------*/
+      let scale = 0.5;
+      let option = {
+        title: [
+          {
+            text: "完成率",
+            x: "45%",
+            y: "62%",
+            textAlign: "center",
+            textStyle: {
+              color: "#fff",
+              textAlign: "center",
+              fontSize: 12 * scale,
+              fontWeight: "bold",
+            },
+          },
+        ],
+        series: [
+          //内圈圆环
+          {
+            name: "Line 0",
+            type: "pie",
+            clockWise: false, //顺时加载
+            hoverAnimation: false, //鼠标移入变大
+            center: ["50%", "55%"],
+            radius: ["63%", "70%"],
+            data: [
+              {
+                value: this.securityData[1].number,
+                name: "计划安检",
+                itemStyle: {
+                  normal: {
+                    color: {
+                      type: 'linear',
+                      colorStops: [
+                        // !! 在此添加想要的渐变过程色 !!
+                        {offset: 0, color: '#1594E7'},
+                        {offset: 1, color: '#072066'}
+                      ]
+                    }
+                  },
+                },
+                label: {
+                  normal: {
+                    formatter: "{d}%",
+                    position: "center",
+                    padding: [0, 0, 10, 0],
+                    align: "left",
+                    show: true,
+                    textStyle: {
+                      fontSize: 20 * scale,
+                      fontWeight: "bold",
+                      color: percentColor,
+                    },
+                  },
+                },
+              },
+              {
+                value: this.securityData[0].number - this.securityData[1].number,
+                name: "已安检",
+                itemStyle: {
+                  normal: {
+                    color: "none",
+                  },
+                },
+              },
+              {
+                //画中间的图标
+                name: "",
+                value: 35,
+                label: {
+                  borderRadius: "100%",
+                },
+                itemStyle: {
+                  color: "#ffffff",
+                  normal: {
+                    color: "#1594E7",
+                    borderColor: "#1594E7",
+                    borderWidth: 5,
+                    borderRadius: '100%'
+                  },
+                },
+                labelLine: {
+                  show: false,
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#5886f0",
+                  },
+                },
+              },
+              {
+                // 解决圆点过大后续部分显示明显的问题
+                name: "",
+                value: 4,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#5886f0",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#5886f0",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            name: "",
+            type: "pie",
+            clockWise: true,
+            hoverAnimation: false,
+            radius: [23, "50%"],
+            center: ["50%", "55%"],
+            data: [
+              {
+                name: "aaa",
+                value: 60,
+                itemStyle: {
+                  normal: {
+                    color: "rgba(255,255,255,.1)"
+                  }
+                },
+                label: {
+                  show: false
+                }
+              }
+            ]
+          },
+        ],
+      };
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    houseEntryTate() {
+      let myChart = echarts.init(document.getElementById("houseEntryRate"));
+      let percentColor = "#fff"; //百分比颜色
+      var innerColor = "#fbcc56"; //黄色
+      /*---------------------缩放----------------------------*/
+      let scale = 0.5;
+      let option = {
+        title: [
+          {
+            text: "入户率",
+            x: "45%",
+            y: "62%",
+            textAlign: "center",
+            textStyle: {
+              color: "#fff",
+              textAlign: "center",
+              fontSize: 12 * scale,
+              fontWeight: "bold",
+            },
+          },
+        ],
+        series: [
+          //内圈圆环
+          {
+            name: "",
+            type: "pie",
+            clockWise: false, //顺时加载
+            hoverAnimation: false, //鼠标移入变大
+            center: ["50%", "55%"],
+            radius: ["63%", "70%"],
+            data: [
+              {
+                value: this.securityData[2].number,
+                name: "计划安检",
+                itemStyle: {
+                  normal: {
+                    color: {
+                      type: 'linear',
+                      colorStops: [
+                        // !! 在此添加想要的渐变过程色 !!
+                        {offset: 0, color: '#35ECAC'},
+                        {offset: 1, color: '#072066'}
+                      ]
+                    }
+                  },
+                },
+                label: {
+                  normal: {
+                    formatter: "{d}%",
+                    position: "center",
+                    padding: [0, 0, 10, 0],
+                    align: "left",
+                    show: true,
+                    textStyle: {
+                      fontSize: 20 * scale,
+                      fontWeight: "bold",
+                      color: percentColor,
+                    },
+                  },
+                },
+              },
+              {
+                value: this.securityData[1].number - this.securityData[2].number,
+                name: "已安检",
+                itemStyle: {
+                  normal: {
+                    color: "none",
+                  },
+                },
+              },
+              {
+                //画中间的图标
+                name: "",
+                value: 35,
+                label: {
+                  borderRadius: "100%",
+                },
+                itemStyle: {
+                  color: "#ffffff",
+                  normal: {
+                    color: "#35ECAC",
+                    borderColor: "#35ECAC",
+                    borderWidth: 5,
+                    borderRadius: '100%'
+                  },
+                },
+                labelLine: {
+                  show: false,
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#5886f0",
+                  },
+                },
+              },
+              {
+                // 解决圆点过大后续部分显示明显的问题
+                name: "",
+                value: 4,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#5886f0",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#5886f0",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            name: "",
+            type: "pie",
+            clockWise: true,
+            hoverAnimation: false,
+            radius: [23, "50%"],
+            center: ["50%", "55%"],
+            data: [
+              {
+                name: "aaa",
+                value: 60,
+                itemStyle: {
+                  normal: {
+                    color: "rgba(255,255,255,.1)"
+                  }
+                },
+                label: {
+                  show: false
+                }
+              }
+            ]
+          }
+        ],
+      };
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+  }
+}
+</script>
+<style lang="less" scoped>
+.items{
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .item{
+    color: white;
+    font-size: vw(14);
+    height: 23%;
+    width: 100%;
+    margin-top: 1%;
+  }
+}
+.security-check-content{
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  text-align: center;
+  .content-number{
+    color: #87D8FF;
+    font-size: 10vw;
+    width: 100%;
+    height: 40%;
+  }
+  .content-text{
+    font-size: 4vw;
+    width: 100%;
+    color: white;
+    height: 35%;
+  }
+}
+.resident-text{
+  font-size: 6vw;
+  color: #F4AB41;
+  margin-top: 20%;
+  margin-left: 20%;
+  width: 100%;
+  height: 30%;
+}
+.plan-content{
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  text-align: center;
+  .content-number{
+    color: #34E9AB;
+    font-size: 10vw;
+    width: 100%;
+    height: 40%;
+  }
+  .content-text{
+    font-size: 4vw;
+    color: white;
+    width: 100%;
+    height: 35%;
+  }
+}
+</style>