system-phone 1.4.0 → 3.0.2-tc

package/src/components/screen/SafeOrderContentPage.vue

@@ -0,0 +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>

package/src/components/screen/SecurityCheckItem.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="security-check-base">
+      <div class="circle"></div>
+      <div class="content-text">{{content.text}}</div>
+      <div class="content-number">{{content.number}}</div>
+    </div>
+</template>
+
+<script>
+    export default {
+      title: "SecurityCheckItem",
+      props:{
+        content:{
+          type:Object,
+          default:{
+            text:'正常入户',
+            number:3000
+          }
+        }
+      }
+    }
+</script>
+
+<style lang="less" scoped>
+  .security-check-base{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    font-size: vw(14);
+    .circle{
+      width: 4.5%;
+      height: 30%;
+      border-radius: 50%;
+      border:1px solid #43f5ff;
+    }
+    .content-text{
+      width: 70%;
+      height: 100%;
+    }
+    .content-number{
+      font-size: vw(16);
+      color: #01D6ED;
+      width: 45%;
+      height: 100%;
+    }
+  }
+</style>

package/src/components/screen/TotalItem.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="total-base">
+      <div class="total-icon" :style="{'background':'url('+ chargeTotalIcon +') no-repeat','background-size':'70% 100%'}"></div>
+      <div class="total-content">
+        <div class="number" :style="{'color': numberColor}">{{number}}</div>
+        <div class="text" :style="{'color': textColor}">{{text}}</div>
+      </div>
+    </div>
+</template>
+
+<script>
+    export default {
+      title: "TotalItem",
+      props:{
+        chargeTotalIcon:{
+          default: require('src/assets/images/用户1.png')
+        },
+        numberColor:{
+          type:String,
+          default: '#00F9FD'
+        },
+        textColor:{
+          type:String,
+          default: 'rgba(255, 255, 255, 0.7)'
+        },
+        number:{
+          type:Number,
+          default: 1245137
+        },
+        text:{
+          type:String,
+          default:'今日售气量'
+        }
+      },
+      data(){
+          return {
+
+          }
+      }
+    }
+</script>
+
+<style lang="less" scoped>
+  .total-base{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    .total-icon{
+      height: 100%;
+      width: 28%;
+      background: #ff8198;
+    }
+    .total-content{
+      height: 100%;
+      width: 65%;
+
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-around;
+      text-align: left;
+      .number{
+        font-size: 10vw;
+        width: 100%;
+        height: 65%;
+      }
+      .text{
+        font-size: vw(16);
+        width: 100%;
+        height: 30%;
+      }
+    }
+  }
+</style>

package/src/components/screen/TotalUserNumber.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="total-base">
+      <div class="total-icon">
+        <div class="icon" :style="{'background':'url('+ userTotalIcon +') no-repeat','background-size':'100% 100%'}"></div>
+      </div>
+      <div class="total-content">
+        <div class="content-text">{{totalData.title}}</div>
+        <div class="content-number">{{totalData.number}}</div>
+      </div>
+    </div>
+</template>
+
+<script>
+    export default {
+      title: "TotalUserNumbert",
+      props:{
+        totalData:{
+          type:Object,
+          default:{
+            title:'居民用户',
+            number:65412
+          }
+        },
+        userTotalIcon:{
+          default: require('../../assets/images/居民用户.png')
+        }
+      }
+    }
+</script>
+
+<style lang="less" scoped>
+  .total-base{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .total-icon{
+      margin-left: 2%;
+      width:10%;
+      height: 100%;
+      background: #182281;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      .icon{
+        width: 60%;
+        height: 60%;
+      }
+    }
+    .total-content{
+      margin-left: 1%;
+      width: 80%;
+      height: 100%;
+      background-image: linear-gradient(to right, rgb(20,31,128), rgba(0,65,146,0));
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      align-items: center;
+      font-size: vw(21);
+      .content-text{
+        width: 50%;
+        height: 60%;
+        font-size: 6vw;
+        color: #fff;
+      }
+      .content-number{
+        width: 40%;
+        height: 60%;
+        color: #00FFE5;
+        font-size: 6vw;
+        position: relative;
+      }
+    }
+  }
+</style>

package/src/components/screen/WorkOrderItem.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="order-item-base" :style="{'background':'url('+ workOderIcon +') no-repeat','background-size':'100% 100%'}">
+      <div class="item-number" :style="{'color': color}">{{workOrder.number}}</div>
+      <div class="item-name">{{workOrder.name}}</div>
+    </div>
+</template>
+
+<script>
+    export default {
+      title: "WorkOrderItem",
+      props:{
+        workOrder:{
+          type:Object,
+          default:{
+            name:'工单量',
+            number:8740
+          }
+        },
+        color:{
+          type: String,
+          default: '#fffb44'
+        },
+        workOderIcon:{
+          default: require('src/assets/images/客服工单量.png')
+        }
+      }
+    }
+</script>
+
+<style lang="less" scoped>
+  .order-item-base{
+    font-size: vw(14);
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: end;
+    align-items: center;
+    .item-name{
+      width: 40%;
+      height: 60%;
+      color: #fff;
+    }
+    .item-number{
+      text-align: right;
+      margin-right: 5%;
+      width: 38%;
+      height: 60%;
+    }
+  }
+</style>