manage-client 3.1.26 → 3.1.27

package/src/components/daping/NetWork.vue

@@ -0,0 +1,238 @@
+<template>
+  <div class="network">
+    <div class="label">管网</div>
+    <div id="network"></div>
+  </div>
+</template>
+
+<script>
+  import {HttpResetClass} from "vue-client";
+
+  export default {
+    name: "net-work",
+    props: {
+      listenheight: String,
+    },
+    data() {
+      return {
+        xc: '',
+        construction: {//建设数据
+          types: [],
+          Built: [200, 100, 30],//已建数据
+          rebuilt: [20, 15, 66],//在建数据
+          approved: [70, 50, 121],//审批数据
+        },
+      }
+    },
+    methods: {
+      async resize(){
+        let http = new HttpResetClass()
+        // 收费
+        await http.load('post', '/rs/sql/getNetWork', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
+          console.log('管网---------------',res)
+          this.construction.types = res.data.map(item => item.f_type)
+          this.construction.Built = res.data.map(item => item.f_yijian)
+          this.construction.rebuilt = res.data.map(item => item.f_zaijian)
+          this.construction.approved = res.data.map(item => item.f_shenpi)
+          this.setBar()
+        })
+      },
+      setBar() {
+        this.xc = this.$echarts.init(document.getElementById('network'))
+        var scale=this.$parent.$parent.$parent.scale
+        this.xc.setOption({
+          title: {
+            text: '',
+            subtext: '',
+            x: 'left'
+          },
+          colors: ['#6fd9d0', '#f7cb32', '#7395db'],
+          tooltip: {
+            alwaysShowContent:true,
+            backgroundColor:'rgba(2, 59, 63, 0.45)',
+            // borderColor :'rgba(13, 109, 180)',
+            borderWidth:0,
+            hideDelay:100,
+              padding:10,
+              textStyle:{
+                  fontSize:18
+              },
+            formatter: function (params) {
+              if (params[0].data == '') {
+                return ''
+              }
+              var result = ''
+              params.forEach(function (item) {
+                result += item.marker + " " + item.seriesName + " &nbsp;&nbsp;&nbsp; <sapn style='color:#e1e52a;font-weight: bolder'>" + item.value + "</sapn></br>";
+              });
+              return "<div style='text-align: center;height: 1px;font-weight: normal'>"+params[0].axisValue + '</div><br/>' + result
+            },
+            trigger: 'axis',
+            axisPointer: {type: 'line', lineStyle: {width: 0}},
+            extraCssText: 'width: auto;height: auto;'
+          },
+
+          legend: {
+            icon: 'circle',
+            x: 'right',
+            y: 'top',
+            itemGap: 20,
+            itemWidth: 20 ,
+            itemHeight: 10 ,
+            // padding: [0, 25, 0, 0],
+            data: ['已建', '在建', '审批'],
+            textStyle: {
+              fontSize: 14 * scale,
+              color: '#ffffff'          // 图例文字颜色
+            }
+          },
+          grid: {left: '2%', top: "25%", bottom: "1%", right: "5%", containLabel: true},
+          calculable: true,
+          xAxis: [
+            {
+              type: 'category',
+
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: '#004371'
+                }
+              },
+              axisTick: {
+                interval: 0,
+                length: '100px',
+              },
+              data: this.construction.types,           //图分段的段名
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  fontSize: 14 ,
+                  color: '#ffffff'
+                }
+              }
+            }
+          ],
+          yAxis: [
+            {
+                // name: '(km)',
+                // nameLocation: "end",
+                // type: 'value',
+                // nameTextStyle: {
+                //   fontSize: 14 ,
+                //   padding: [50 , 35 , 0, 0],
+                //   color: '#15dce2',
+                // },
+              axisLine: {
+                show: false
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  fontSize: 14 ,
+                  color: '#15dce2'
+                }
+              },
+              axisTick: {show: false},
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  type: 'dashed',
+                  color: '#004371',
+                }
+              },
+            }
+          ],
+          barCategoryGap: '2%',
+          series: [
+            {
+              name: '已建',
+              type: 'bar',
+              // barGap: 0,
+              barCategoryGap: '1%',
+              barWidth: '20%',
+              data: this.construction.Built,
+              hoverAnimation: false,
+              label: {
+                show: true,
+                position: 'top',
+                textStyle: { //数值样式
+                  color: '#fefefe',
+                  fontSize: 14
+                }
+              },
+              itemStyle: {
+                normal: {color: '#6fd9d0',},
+              }
+            },
+            {
+              name: '在建',
+              type: 'bar',
+              //  barGap: 0,
+              barCategoryGap: '1%',
+              barWidth: '20%',
+              data: this.construction.rebuilt,
+              hoverAnimation: false,
+              label: {
+                show: true,
+                position: 'top',
+                textStyle: { //数值样式
+                  color: '#fefefe',
+                  fontSize: 14
+                }
+              },
+              itemStyle: {normal: {color: '#f7cb32'}},
+            },
+            {
+              name: '审批',
+              type: 'bar',
+              //    barGap: 0,
+              barCategoryGap: '1%',
+              barWidth: '20%',
+              data: this.construction.approved,
+              hoverAnimation: false,
+              label: {
+                show: true,
+                position: 'top',
+                textStyle: { //数值样式
+                  color: '#fefefe',
+                  fontSize: 14
+                }
+              },
+              itemStyle: {normal: {color: '#7393db'}},
+            },
+          ],
+        }, true)
+      },
+    },
+    watch: {
+      // 'listenheight': {
+      //   deep: true,
+      //   handler(val) {
+      //     if (this.listenheight !== '') {
+      //       // this.$parent.$parent.changeresize(this.xc)
+      //     }
+      //   },
+      // }
+    },
+    ready() {
+      this.resize()
+    }
+  }
+</script>
+
+<style scoped>
+  .label {
+    margin-left: 6%;
+    font-size: 1.85rem;
+    float: left;
+    color: #fff;
+    height: 8%;
+  }
+
+  #network {
+    padding: 0 4%;
+    height: 91%;
+    width: 100%;
+  }
+
+</style>

package/src/components/daping/RedactDaPing.vue

@@ -0,0 +1,454 @@
+<template>
+  <div class="flex" style="width: 100%;">
+      <h3 class="row" style="text-align: center;">管网信息录入</h3>
+      <div class="row" v-for="(index,item) in netWorkAll">
+        <div class="col-sm-2 form-group">
+          <label class="font_normal_body">类型</label>
+          <v-select :value.sync="item.f_type" v-model="item.f_type"
+                    title="参数: 管网类型(大屏信息录入)"
+                    :options='networktype' placeholder='类型'
+                    :value-single="true"
+                    style="width:60%"
+                    :search="false"
+                    close-on-select></v-select>
+        </div>
+        <div class="col-sm-2 form-group">
+          <label class="font_normal_body">已建数</label>
+          <input type="text" style="width:60%" class="input_search" v-model="item.f_yijian"
+                 placeholder="已建数">
+        </div>
+        <div class="col-sm-2 form-group">
+          <label class="font_normal_body">在建数</label>
+          <input type="text" style="width:60%" class="input_search" v-model="item.f_zaijian"
+                 placeholder="在建数">
+        </div>
+        <div class="col-sm-2 form-group">
+          <label class="font_normal_body">审批数</label>
+          <input type="text" style="width:60%" class="input_search" v-model="item.f_shenpi"
+                 placeholder="审批数">
+        </div>
+      </div>
+      <div class="row" style="text-align: right">
+        <button class="button_clear button_spacing" @click="add(1)">＋</button>
+        <button class="button_clear button_spacing" @click="remove(1)">一</button>
+        <button class="button_search button_spacing" @click="redactSave(1)">保存</button>
+      </div>
+
+
+      <h3 class="row" style="text-align: center;">收费信息录入</h3>
+      <div class="row" v-for="(index,item) in sellingAll">
+        <div class="col-sm-2 form-group">
+          <label class="font_normal_body">营业厅</label>
+          <v-select :value.sync="item.f_depname" v-model="item.f_depname"
+                    :search="false"
+                    :value-single="true"
+                    title="参数: 营业厅(大屏信息录入)"
+                    :options='depname' placeholder='营业厅'
+                    style="width:60%"
+                    close-on-select></v-select>
+        </div>
+        <div class="col-sm-2 form-group">
+          <label class="font_normal_body">用户类型</label>
+          <v-select :value.sync="item.f_user_type" v-model="item.f_user_type"
+                    :search="false"
+                    :value-single="true"
+                    title="参数: 用户类型"
+                    :options='usertype' placeholder='用户类型'
+                    style="width:60%"
+                    close-on-select></v-select>
+
+        </div>
+        <div class="col-sm-2 form-group">
+          <label class="font_normal_body">售气笔数</label>
+          <input type="text" style="width:60%" class="input_search" v-model="item.f_count"
+                 placeholder="售气笔数">
+        </div>
+        <div class="col-sm-2 form-group">
+          <label class="font_normal_body">售气量</label>
+          <input type="text" style="width:60%" class="input_search" v-model="item.f_gas"
+                 placeholder="售气量">
+        </div>
+        <div class="col-sm-2 form-group">
+          <label class="font_normal_body">售气金额</label>
+          <input type="text" style="width:60%" class="input_search" v-model="item.f_money"
+                 placeholder="售气金额">
+        </div>
+        <div class="col-sm-2 form-group">
+          <label class="font_normal_body">归属时间</label>
+          <datepicker placeholder="归属时间" style="width:60%"
+                      v-model="item.f_date"
+                      :value.sync="item.f_date"
+                      :format="'yyyy-MM-dd HH:mm:ss'"
+                      :show-reset-button="true">
+          </datepicker>
+        </div>
+      </div>
+    <div class="row" style="text-align: right">
+      <button class="button_clear button_spacing" @click="add(2)">＋</button>
+      <button class="button_clear button_spacing" @click="remove(2)">一</button>
+      <button class="button_search button_spacing" @click="redactSave(2)">保存</button>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import {HttpResetClass} from "vue-client";
+
+let load = async (self) => {
+
+  await self.loadParam(self)
+}
+export default {
+  title: '大屏编辑',
+  data() {
+    return{
+      forNum: 1,
+      param: [],
+      netWorkAll:[
+        {
+          f_type: '高压',
+          f_yijian: 0,
+          f_zaijian: 0,
+          f_shenpi: 0,
+          f_state: '有效'
+        }
+      ],
+      sellingAll:[
+        {
+          f_gas: 0.00,
+          f_money: 0.00,
+          f_depname: '',
+          f_user_type: '民用',
+          f_date: '',
+          f_count: 0,
+          f_state: '有效'
+        }
+      ]
+    }
+  },
+  methods: {
+    loadParam (self) {
+      let http = new HttpResetClass()
+      let a = []
+      http.load('POST', 'rs/sql/singleTableParam', {data:{
+          items: 'p.name,v.name value',
+          tablename:'t_parameter p left join t_paramvalue v on p.id = v.processid',
+          condition: '1 = 1'
+        }
+      }, {
+        resolveMsg: null,
+        rejectMsg: null
+      }).then(res =>{
+        self.param = res.data
+      })
+    },
+    getParam(name){
+      return this.param.filter(item => item.name == name).map(obj =>{return {label: obj.value, value: obj.value}})
+    },
+    add(val){
+      if(val === 1){
+        this.netWorkAll.push({
+          f_type: '高压',
+          f_yijian: 0,
+          f_zaijian: 0,
+          f_shenpi: 0,
+          f_state: '有效'
+        })
+        console.log('dddd', this.netWorkAll)
+      }else{
+        this.sellingAll.push({
+          f_gas: 0.00,
+          f_money: 0.00,
+          f_depname: '',
+          f_user_type: '民用',
+          f_date: '',
+          f_count: 0,
+          f_state: '有效'
+        })
+      }
+
+    },
+    remove(val){
+      if(val === 1){
+        if (this.netWorkAll.length === 1) return
+        this.netWorkAll.splice(this.netWorkAll.length-1, 1)
+      }else{
+        if (this.sellingAll.length === 1) return
+        this.sellingAll.splice(this.sellingAll.length-1, 1)
+      }
+    },
+    redactSave(flag){
+      let http = new HttpResetClass();
+      let data = {
+        state: flag,
+        message: []
+      }
+      if (flag === 1) {
+        data.message = this.netWorkAll
+      } else {
+        data.message = this.sellingAll
+      }
+      http.load('POST', 'rs/logic/RedactSave', {data: data}, {
+        resolveMsg: null,
+        rejectMsg: null
+      }).then(res =>{
+        console.log('55555555555', res)
+        if(res.data === 200) {
+          this.$showAlert('保存成功', 'success', 2000)
+          if (flag === 1) {
+            this.netWorkAll = [{
+              f_type: '高压',
+              f_yijian: 0,
+              f_zaijian: 0,
+              f_shenpi: 0,
+              f_state: '有效'
+            }]
+          } else {
+            this.sellingAll = [{
+              f_gas: 0.00,
+              f_money: 0.00,
+              f_depname: '',
+              f_user_type: '民用',
+              f_date: '',
+              f_count: 0,
+              f_state: '有效'
+            }]
+          }
+        }
+
+      })
+    }
+  },
+  ready () {
+    load(this)
+
+  },
+  watch:{
+  },
+  props: ['changeshow'],
+  computed: {
+    networktype(){
+      return this.getParam('管网类型(大屏信息录入)')
+    },
+    usertype(){
+      return this.getParam('用户类型')
+    },
+    depname(){
+      return this.getParam('营业厅(大屏信息录入)')
+    }
+  },
+}
+</script>
+
+
+
+
+
+
+  /*关键设置 tbody出现滚动条*/
+  #tableLast tbody {
+    display: block;
+    height: 45px;
+
+  }
+
+  #tableLast thead,
+  #tbodyLast tr {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+    border: 1px;
+    background-color: #012C45;
+    margin-top: 4px;
+  }
+  #tbodyLast tr td {
+    text-align: left;
+    color: #00F6FF;
+  }
+
+
+
+  .font-14-medium1{
+    color: #ffffff;
+    line-height: 24px;
+    font-size: 16px;
+    font-family: font-pingfang-medium;
+  }
+  .scada-font-title {
+    margin-right: 1em;
+    font-family: tRends;
+    font-size: 25px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 30px;
+    letter-spacing: 0px;
+  }
+  .font-14 {
+    font-size: 14px;
+    font-family: tRends;
+  }
+  #top-left {
+    /*padding: 1em;*/
+    width: 32%;
+    height: 100%;
+  }
+
+  #top-mid {
+    /*padding: 1em;*/
+    width: 30%;
+    height: 100%;
+  }
+
+  #top-right {
+    width: 37%;
+    height: 100%;
+  }
+
+  .title-font {
+    font-family: HYk2gj;
+    font-size: 40px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 26px;
+    letter-spacing: 2px;
+    color: #ffffff;
+  }
+
+  .title-main {
+    margin: 0 auto;
+  }
+
+  .flex-inline {
+    display: inline-flex;
+    justify-content: space-around;
+  }
+
+  #pie-one {
+    height: 100%;
+    width: 35%;
+  }
+
+  #weiruhu {
+    font-family: tRends;
+    font-size: 24px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 35px;
+    letter-spacing: 0px;
+    color: #00f6ff;
+  }
+
+  #anjian {
+    font-family: tRENDS;
+    font-size: 24px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 35px;
+    letter-spacing: 0px;
+    color: #ffc21f;
+  }
+
+  .qinhuamap {
+    position: absolute;
+    top: 2%;
+    left: 35%;
+    width: 28%;
+    height: 57%;
+  }
+  .scroll-content {
+    position: relative;
+    transition: top 0.825s;
+  }
+
+}
+@media screen and (max-width: 1440px) {
+  .main {
+    height: 100%;
+    padding: 1em;
+    flex: 1 1 auto;
+    flex-direction: column;
+    display: flex;
+  }
+
+  #top-left {
+    /*padding: 1em;*/
+    width: 32%;
+    height: 100%;
+  }
+
+  #top-mid {
+    /*padding: 1em;*/
+    width: 30%;
+    height: 100%;
+  }
+
+  #top-right {
+    width: 37%;
+    height: 100%;
+  }
+
+  .title-font {
+    font-family: HYk2gj;
+    font-size: 30px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 22px;
+    letter-spacing: 2px;
+    color: #ffffff;
+  }
+
+  .title-main {
+    margin: 0 auto;
+  }
+
+  .flex-inline {
+    display: inline-flex;
+    justify-content: space-around;
+  }
+
+  #pie-one {
+    height: 100%;
+    width: 35%;
+  }
+
+  #weiruhu {
+    font-family: tRends;
+    font-size: 18px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 22px;
+    letter-spacing: 0px;
+    color: #00f6ff;
+  }
+
+  #anjian {
+    font-family: tRENDS;
+    font-size: 18px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 22px;
+    letter-spacing: 0px;
+    color: #ffc21f;
+  }
+
+  .qinhuamap {
+    position: absolute;
+    top: 2%;
+    left: 35%;
+    width: 28%;
+    height: 57%;
+  }
+  .font-14-medium{
+    color: #ffffff !important;
+    line-height: 18px;
+    font-size: 12px;
+    font-family: font-pingfang-medium;
+  }
+  .scroll-content {
+    position: relative;
+    transition: top 0.825s;
+  }
+}
+</style>
+